WAI BPE Presentation: Evaluating Scripts

This page contains material related to a presentation at the Web Accessibility Best Practices Evaluation Training in Paris, France in July 2004. It is not intended to stand-alone; rather, it is primarily provided as reference material for participants in the training.

Scope of Training and Materials: This one-day training focused on select topics that were particularly suited to the circumstances of this specific hands-on training session. It did not to cover all aspects of evaluating Web accessibility, and did not cover all Web Content Accessibility Guidelines (WCAG) 1.0 checkpoints.
No Endorsement or Recommendation of Evaluation Tools: W3C/WAI does not endorse Web accessibility evaluation tools and does not recommend one tool over another. Some tools were listed, demonstrated, and used in activities in this training. Mention of a specific tool does not imply endorsement nor recommendation. WAI does provide a comprehensive list of Evaluation, Repair, and Transformation Tools for Web Content Accessibility.

Evaluating Scripts

Incorrect Equivalent Script Alternative

  ...
  <noscript>
    <p>YOUR BROWSER DOES NOT SUPPORT JAVASCRIPT!!!</p>
  </noscript>
  ...

Correct Equivalent Script Alternative

  ...
  <noscript>
    <a href="...">Equivalent server-side functionality</a>
  </noscript>
  ...

Example of an Inaccessible Script: Table Width

<script language="JavaScript" type="text/javascript">
  ...
  document.write('<table width="' + myWidth '">');
  ...

Table Width: Accessibility Issues

6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page.

Example of an Accessible Script: Table Width

<table id="fluid" width="100%">
...
<script language="JavaScript" type="text/javascript">
  ...
  document.fluid.width = myWidth;
  ...

Example of an Inaccessible Dynamic Menu

  ...
  <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>
  ...

Example of an Accessible Dynamic Menu

  ...
  <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>
  ...

Example: http://www.accessibility.nl/amenu4

Example of an Inaccessible Rollover

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

Rollover: Accessibility Issues

11.1 Use W3C technologies when they are available and appropriate for a task and use the latest versions when supported.

Example of an Accessible Rollover

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

Automatically Refreshing Screens

7.4 Until user agents provide the ability to stop the refresh, do not create periodically auto-refreshing pages.

Embedded Objects

8.1 Make programmatic elements such as scripts and applets directly accessible or compatible with assistive technologies [Priority 1 if functionality is important and not presented elsewhere, otherwise Priority 2.]

Further Relevant Checkpoints

6.4 For scripts and applets, ensure that event handlers are input device-independent.
9.3 For scripts, specify logical event handlers rather than device-dependent event handlers.
7.5 Until user agents provide the ability to stop auto-redirect, do not use markup to redirect pages automatically. Instead, configure the server to perform redirects.
10.1 Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.