Web Accessibility Checklist

  1. Are ALT tags present and sufficiently equivalent to the graphic content?
  2. Does the page use structural elements such as headings effectively?
  3. Can all links, navigational elements, and controls be accessed using the keyboard?
  4. Does link text provide a reasonable description of the link target?
  5. Are form elements explicitly associated with labels?
  6. Are frames appropriately titled?
  7. Is information in PDF available either as tagged PDF or in other more accessible formats?
  8. Does the site avoid conveying meaning with color alone?
  9. Is there sufficient contrast between text and background?
  10. Are data tables marked up as required?
  11. Is multimedia content captioned (or if audio only, transcribed)?
  12. Is flickering content avoided?
  13. Is the page functional when scripts are disabled?
  14. Is the page functional when style sheets are disabled?
  15. If a page requires a timed response, can users request more time?
  16. Does the page pass HTML validation?

Instructions for Checking Web Pages

There are many ways to evaluate web pages based on the criteria in this checklist. These instructions document a few of the ways. Many of these techniques use tools identified on the Day 2 page.

1. Are ALT tags present and sufficiently equivalent to the graphic content?

Method 1: Using the Web Accessibility Toolbar in Internet Explorer, select the Images button, followed by Show Images. A dotted red border will appear around each image, and the alt attribute will be displayed.

Method 2: In Firefox (with Firebug installed), right click on any image and select Inspect Element from the menu to view the source code. Check the source code to be sure the <img> element has appropriate alternate text.

2. Does the page use structural elements such as headings effectively?

Method 1: Using the Web Accessibility Toolbar in Internet Explorer, select the Structure button, then select either Headings or Heading Structure. Check to be sure the headings form a logical outline of the page (for example, one <h1> tags, one or more <h2> tags, etc.)

Method 2: In Firefox, select Outline from the WAVE Toolbar. This will display an outline of the document's heading structure.

3. Can all links, navigational elements, and controls be accessed using the keyboard?

Using a mouse, point to items on the page that you suspect might have mouse-triggered behaviors. Examples include menu items and video player controls. If hovering over items with a mouse triggers changes on the page, try triggering these same changes with keyboard alone, using the Tab key to navigate through the page.

Also, if it is difficult to know which item on the page has focus when navigating by keyboard, this too is worth noting, since it can probably be easily fixed with CSS :focus.

4. Does link text provide a reasonable description of the link target?

Glance through the main page content looking for links. For each link, ask yourself whether the link text would make sense if it was presented in a list of links, out of context from the main page. Links such as "More..." and "Click here" fail this checkpoint.

5. Are form elements explicitly associated with labels?

Method 1: Using the Web Accessibility Toolbar in Internet Explorer, select the Structure button, then select Fieldset/Labels. This will tell you whether forms have appropriate accessible markup.

6. Are frames appropriately titled?

Method 1: Using the Web Accessibility Toolbar in Internet Explorer, select the Frames button, then select Frame Name/Title. This will list the frames on the page by name or title. This names/titles should communicate what content users will find in each frame (for example, a title like "Navigation" is good, whereas titles like "Left Frame" and "Frame 1" are bad.

7. Is information in PDF available either as tagged PDF or in other more accessible formats?

With the PDF open in Adobe Reader, go to File > Properties (Ctrl + D). At the bottom of the Document Properties dialog is a "Tagged PDF" field, which is either Yes or No. In order to be accessible, a PDF must be tagged. Being tagged doesn't guarantee accessibility, but without tags accessibility is impossible.

8. Does the site avoid conveying meaning with color alone?

Glance around the page content looking to see whether the page uses color to communicate information. If it does, make sure this information is communicated in ways other than color.

9. Is there sufficient contrast between text and background?

Look over the page for text that has questionable contrast between foreground and background colors. Then, using the Web Accessibility Toolbar in Internet Explorer, go to Color > Contrast Analyser. Use the eyedropper tool to sample both the foreground and background colors in question. The tool will tell you whether this color combination passes or fails accessibility requirements.

10. Are data tables marked up as required?

Method 1: Using the Web Accessibility Toolbar in Internet Explorer, select the Tables button, followed by Show Data Tables. This will reveal all markup associated with the data table. Review the markup looking especially to be sure column and row headers are marked up with <th>. If a table is complex (i.e., with nested rows and columns) look to be sure each <th> has an id attribute, and each <td> has a headers attribute. Also, the <table> element on complex tables should include a summary attribute.

Method 2: Using the Web Developer Toolbar in Firefox, select the Information button, followed by Display Table Information. Like the IE method described above, this will reveal all markup associated with the data table. Review that markup as explained in Method 1.

11. Is multimedia content captioned (or if audio only, transcribed)?

If there is video on the page, is it captioned? Look around on the video player for a closed caption (CC) button. If there is audio on the page, is it transribed?

12. Is flickering content avoided?

Note whether the page has content that flickers like a strobelight (roughly three or more times per second). Flickering content can cause seizures in susceptible individuals.

13. Is the page functional when scripts are disabled?

Method 1: Using the Web Accessibility Toolbar in Internet Explorer, select the IE button, then Toggle Javascript to turn Javascript off (a checkmark next to this option indicates that Javascript is currently enabled). Check to be sure all content is still present, and the page is still operable. (For example, do the menus work? Can users submit forms?)

Method 2: Using the Web Developer Toolbar in Firefox, select the Disable button, then select Disable Javascript, then All Javascript.

14. Is the page functional when style sheets are disabled?

Method 1: Using the Web Accessibility Toolbar in Internet Explorer, select the CSS button, then Disable CSS to turn off stylesheets. With stylesheets off, the page is not expected to look good, but all content should be visible and presented in a reasonably logical order. The idea is to be sure that the page is not overly dependent on a particular stylesheet, since users can disable styles or create their own custom style sheets.

Method 2: Using the WAVE Toolbar in Firefox, select the Disable Styles button.

15. If timed content is present, can users pause it or request more time?

Check the web page timed content. Examples include headlines or features that change every few seconds. If users are unable to pause these feature, they may change before users are finished reading them.

Another example is a page that times out after a period of inactivity. Users should be prompted first and asked if they need more time, rather than timing them out.

16. Does the page pass HTML validation?

Validate the page using The W3C Markup Validation Service. If there are errors, report the number of errors.