Evaluate HTML Accessibility Quick Guide

Firefox Web Developer Toolbar

Alt Text

• Click on Images then select Display Alt Attributes.
  Two quotes indicates a null tag, meaning the image is decorative. If there is no alt tag for an image, an alt tag needs to be added. If an alt tag displays, evaluate whether the description clearly describes the purpose of the image. Uncheck Display Alt Attributes when you are finished.
  
  Alt="" (the image is decorative)
  Alt="description of image" (the image has been described)

Headings

• Click on Outline and check Show Element Names When Outlining.
• Click on Outline then Outline Headings. Headings should be assigned with H1 as the first followed by H2 for the next level, H3 for the next level, etc.
  
  <h1> (the top level heading has been assigned)
  <h2> (the second level hading has been assigned) etc.

Lists

• Click on Outline and check Show Element Names When Outlining.
• Click on Outline then Outline Block Level Elements.
  
  <ol> (the list has been marked as an ordered--numbered--list)
  <ul> (the list has been marked as an unordered--bulleted--list)
  <p> (paragraph) or <li> (line) may display for each item.

Data Tables

• Click on Outline and check Show Element Names When Outlining.
• Click on Outline then Outline Tables then Outline Table Cells. This displays the th and td elements. To turn off the feature, follow the same clicks.
• Click on Information then Display Table Information. This displays the scope elements.
  
  <th> (the cells have been marked as table headers)
  <td> (the cells have been marked as data cells)
  <scope="col"> (the header cell identifies information in the column)
  <scope="row"> (the header cell identifies information in the row>
  

Layout Tables

• To locate tables used for layout, click on Outline then Outline Tables then Outline Tables. All tables will be outlined. If the outlined tables are not data tables, they should not be used for layout.
  
  Layout tables are used to structure page layout; for example, placing an image at the left side of a page and text on the right side.

Links

• Click on Outline and check Outline External Links. Check the links to ensure that descriptive words are linked (not URL references) and check for indicators that the links are external. The following link should include (new window).

Text Color

• Text color: Manually check to see that color alone is not used to convey meaning.
  • To capture color from the web page, first install the ColorZilla Color Picker:http://www.colorzilla.com/firefox/ (new window)
  • To obtain a rating on color combinations, click on a new tab and go to the WebAIM Color Contrast Checker: http://webaim.org/resources/contrastchecker/ (new window).
  • Click the tab to go to your D2L course. Click the ColorZilla icon at the upper right corner of the Firefox screen. Click on the arrow and choose Eyedropper – ensure that you see the "Saved to Clipboard" message.
  • Click on the tab where the Color Contrast Checker is open. Paste the code into the foreground color; repeat the process for the background color. The contract checker will display results. Our goal is to meet the WCAG 2.0 AA standard.
    
    The standard for medium text is 4.5:1.
    The standard for large (usually 14 points or larger) is 3:1.
    

Video and Audio

• If video is provided, ensure that the video is captioned and synchronized with the audio. If the video cannot be captioned, provide time-coded transcripts.
• If audio is provided, ensure that a transcript is available.