Accessible Web Applications

Client-Side Accessibility

Menu Structure
Embedded Scripts
Rollover Effects
User Interaction
Scripts in Links
Drop-Down Menus
Dialogs and Errors
More Things to Watch...

Non-existent Menu Structure

Guideline 13: Provide clear navigation mechanisms - Failed

  ...
  <div ...>Books
    <div ...>
      <div><a href="page1.html" ...>Crime</a></div>
      <div><a href="page2.html" ...>Comedy</a></div>
      <div><a href="page3.html" ...>Fiction</a></div>
    </div>
  </div>
  ...

Correct Menu Structure

Guideline 13: Provide clear navigation mechanisms - Passed

  ...
  <li ...>Books
    <ul ...>
      <li><a href="page1.html" ...>Crime</a></li>
      <li><a href="page2.html" ...>Comedy</a></li>
      <li><a href="page3.html" ...>Fiction</a></li>
    </ul>
  </li>
  ...

No Equivalent Alternative

Guideline 6: Ensure that pages featuring new technologies transform gracefully - Failed

  ...
  <script language="JavaScript" type="text/javascript">
    ...
  </script>
  ...
  <noscript>
    <p>YOUR BROWSER DOES NOT SUPPORT JAVASCRIPT!!!</p>
  </noscript>
  ...

Fallback Alternative

Guideline 6: Ensure that pages featuring new technologies transform gracefully - Passed

  ...
  <script language="JavaScript" type="text/javascript">
    ...
  </script>
  ...
  <noscript>
    ...
    <a href="alternate.html" ...>Server-Side Alternate</a>
    ...
  </noscript>
  ...

Script-Based Rollovers

Guideline 3: Use markup and style sheets and do so properly - Failed

  ...
  <a href="page1.html" onMouseOut="out(1)"
                       onMouseOver="over(1)" ...>Crime</a>
  ...

CSS-Based Rollovers

  ...
  <style type="text/css">
    ...
    a:hover { ... }
    ...
  </style>
  ...
  <a href="page3.html" ...>Fiction</a>
  ...

Mouse-Based Interaction

Guideline 9: Design for device-independence - Failed

  ...
  <a href="page1.html" onMouseOut="out(1)"
                       onMouseOver="over(1)" ...>Crime</a>
  ...

Mouse and Keyboard Interaction

Guideline 9: Design for device-independence - Passed

  ...
  <a href="page3.html" onBlur="out(3)"
                       onFocus="over(3)"
                       onMouseOut="out(3)"
                       onMouseOver="over(3)" ...>Fiction</a>
  ...

JavaScripts as Links

Guideline 1: Provide equivalent alternatives to auditory and visual content - Failed

  ...
  <a href="JavaScript:myFunction();" ...>Function</a>
  ...

JavaScript if Available

Guideline 1: Provide equivalent alternatives to auditory and visual content - Passed

  ...
  <a href="alternative.html"
        onclick="myFunction(); return False;" ...>Function</a>
  ...

OnChange Drop-Down Menu

Guideline 12: Provide context and orientation information - Failed

  ...
  <select name="Books" onChange="jump()">
    <option value="Crime">Crime</option>
    <option value="Comdey">Comedy</option>
    <option value="Fiction">Fiction</option>
  </select>
  ...

OnSubmit Drop-Down Menu

Guideline 12: Provide context and orientation information - Passed

  ...
  <select name="Books" onSubmit="check()">
    <option value="Crime">Crime</option>
    <option value="Comedy">Comedy</option>
    <option value="Fiction">Fiction</option>
  </select>
  <input type="Image" src="submit.png" alt="Submit Selection">
  ...

Color Based Dialogs

Guideline 2: Don't rely on color alone - Failed

  ...
  <p class="red">Values in red are required</p>
  ...

Clear Dialogs

Guideline 2: Don't rely on color alone - Passed

  ...
  <p class="red">Values marked with * are required</p>
  ...

More Things To Watch...

Pop-up windows or spawning new windows without informing the user: Guideline 12: Provide context and orientation information
Client-Side redirection (using META or JavaScript): Guideline 7: Ensure user control of time-sensitive content changes
Embedded objects (Applets, ActiveX, ...) are not accessible: Guideline 8: Ensure direct accessibility of embedded user interfaces

Server-Side Accessibility

Redundant Logic
Markup Generator
Database Model
Error Messages

Redundant Logic

Examples: 1. A server-side script checks the form values even though it is redundant to a client-side script; 2. Server-side session tracking is implemented even though it is redundant to the present cookies support
Rationale: Relying on certain browser functionality limits the compatibility of the application

Markup Generation

Example: 1. Table headers are inserted manually because the content management system generates broken table markup; 2. Scripts editor of the content authoring tool is not used because it produces inaccessible script code; 3. Configurations and templates are adjusted to compensate for the behaviour of the content management system
Rationale: Content authoring tools are required to generate valid markup and accessible content
Related Guidelines: Authoring Tools Accessibility Guidelines (ATAG) 1.0

Database Model

Example: 1. The alternate text and long description for an image are stored in the database along with the image itself; 2. A Database model is extended to include the table header, description as well as summary information
Rationale: In order to make a user interface accessible the database has to be designed appropriately
Related Guidelines: XML Accessibility Guidelines (XAG)

Error Messages

Example: 1. Error messages are modified to include navigation elements to direct the users back to the content; 2. Standard dialogs are stripped from codes and technical terms so that they are easier to understand
Rationale: Error message dialogs are part of the application and also need to be accessible

Summary

Provide navigational structure
Implement script alternatives
Design for device independence
Promote orientation and context
Be sure to generate valid markup
Beware of dialogs and messages
Model an accessible database

Related Resources

Client-side accessibility features

Server-side accessibility features