Evaluate HTML
Back to Accessibility
HTML Files
One suggested method for evaluating an HTML file is to display the HTML file inside D2L and use the Firefox Browser with the Web Developer Toolbar (new window) add-on. See instructions to download and install the
add-on. Detailed instructions for evaluating web pages are available at W3C Web Accessibility Preliminary Strategies (new window).
-
To check alternative text descriptions for images, click on Images then select Display Alt Attributes. View each image to determine if the appropriate alt tags display. 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.
![Image alt text identified](/lyle_l/Accessibility/images/EvalHTMLimages.jpg)
- To check document structure for,
- 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.
![Headers identified](/lyle_l/Accessibility/images/EvalHTMLheadings.jpg)
-
Lists (Enumerations and Bullets)
- Click on Outline and check Show Element Names When Outlining.
- Click on Outline then Outline Block Level Elements
Look for <ol> for ordered (numbered) lists; look for <ul> for unordered (bulleted) lists. The list items themselves may show <p> paragraph tags or <li> indicating line. Either is okay.
![List code identified](/lyle_l/Accessibility/images/EvalHTMLlists.jpg)
-
3. To check 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 (for table header) and td (for table data) elements.
To turn off the feature, follow the same clicks.
- Click on Information then Display Table Information. This displays the scope elements.
When checking scope if the column header applies to the items listed vertially, it should show a "col" score. If the table header is at the left side of the table and applies to horizontal item, it should show a "row" scope.
![Table headers and scope identified.](/lyle_l/Accessibility/images/EvalHTMLtables.jpg)
- 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.
-
To locate 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).
- Scan the document and manually check to see that all links use meaningful terms. The "Outline External Links" option on the toolbar does not outline https or mailto links.
![External link outlined](images/EvalHTMLexternallinks.jpg)
-
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.
WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text.
- 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.