Manual Evaluation Checklist
Pages can pass W3C validation but still be inaccessible to users. This manual procedure is designed to compliment automated evaluation tools for website accessibility, emphasizing areas that can only be evaluated realistically by human judgment. This cheklist is based on the Manual Accessibility Evaluation by Tom Jewett. This checklist has been edited to follow California State University, Los Angeles (CSULA) requirements.
The necessary tools for this manual check (Firefox browser, Firefox Web Developer Toolbar, Accessibility Extension, and lowvis.css) can be downloaded from theTesting Tools page. Instructions for performing some of the manual checks have been provided in bold text.
VISUAL CHECK
- By visually looking at the web page:
- Do columns, page elements, or text lines overlap each other when enlarged? Text should "wrap" within column.
— if yes, it needs repair.
- Does the page contain moving elements such as blinking text or marquees?
— if yes, it needs repair. - Does the page require active content such as video, audio, applets, to load?
— if yes, it will need specialized evaluation. Go to http://www.calstatela.edu/accessibility/508.php for additional information. - Do all images have an equivalent alternative text? Decorative images should contain
a blank alternative text (alt="").
Web Developers Toolbar: Images » Display Alt Attributes
— if no, it needs repair.
Note: Repeat the steps to reset settings back to normal. - Are headings, paragraphs, hyperlinks, and lists obvious and sensible when the styles are on and off?
Web Developers Toolbar: CSS » Disable Styles » All Styles
— if no, it needs repair.
Note: Repeat the steps to reset settings back to normal. - Does the reading order of headings and page elements make sense when linearized?
Disable CSS and images.
Web Developers Toolbar: Miscellaneous » Linearize Page
— if no, it needs repair.
Note: Repeat the steps to reset settings back to normal. - Is the page still usable when javascript is turned off?
Web Developer Toolbar: Disable » Disable JavaScript » All JavaScript
— if no, it needs repair.
Note: Repeat the steps to reset settings back to normal.
- Do columns, page elements, or text lines overlap each other when enlarged? Text should "wrap" within column.
- When tabbing through all the links and form elements:
- Is there a logical progression between links and elements?
— if no, it needs repair. - Does the tab order between form elements make sense?
— if no, it needs repair. - Is there a way to skip links and go directly to the content?
— if no, it needs repair.
- Is there a logical progression between links and elements?
- Is there sufficient visual contrast ratio of at least 5:1 between text and background colors on each test?
A green check mark will confirm this.
Run Colour Contrast Analyzer:
Select foreground and background color using the color picker.
Select "Show contrast result for colour blindness".
See results on Result-Luminosity Panel.
- Normal
— if no, it needs repair. - Protanopia
— if no, it needs repair. - Deuteranopia
— if no, it needs repair. - Tritanopia
— if no, it needs repair.
- Normal
- By visually looking at the web page:
TECHNICAL
- Browser: View » Page Source
- Does each form input have an associated <label>
element or other appropriate grouping element?
— if no, it needs repair. - Does each data table column (and row, if
applicable) have a head element with the scope
attribute?
— if no, it needs repair. - Is a summary attribute provided for data tables?
— if no, it needs repair. - Are there deprecated "illegal" codes in use such as
<font><b><i>. For a complete list go to Illegal
Coding page.
— if yes, it needs repair. - Does the page use frames?
Page Source: Edit » Find (Ctrl + F).
Search by typing "frameset".
— if yes, each frame must be named using the name attribute (name=""). - Does the page use image maps?
Search for "map".
— if yes, provide text equivalents for hotspots.
- Does each form input have an associated <label>
element or other appropriate grouping element?
- Automated Validation
Note: Cannot be run locally, page must be online.- Does the HTML code pass the automated validation?
Web Developers Toolbar: Tools » Validate HTML
— if no, it needs repair. - Does the CSS code pass the automated validation?
Web Developers Toolbar: Tools » Validate CSS
— if no, it needs repair.
- Does the HTML code pass the automated validation?
- Headings
Web Developers Toolbar: Information » View Document Outline- Are headings organized according to the content presented?
— if no, it needs repair. - Are there any missing heading?
— if yes, it needs repair.
- Are headings organized according to the content presented?
- Link Details
Web Developers Toolbar: Information » Display Link Details
- Do all links look distinguishable from normal text?
— if no, it needs repair. - Do any links contain "href='javascript...'"?
— if yes, it needs repair. See Tutorials on JavaScript.
- Do all links look distinguishable from normal text?
USER TESTING
- Low vision user test: This style sheet an example of one user's individual settings.
We are testing to see if the user can personalize the page to their needs.
Apply lowvis.css and look for the following problems:
Web Developers Toolbar: CSS » Add User Style Sheet
- Does all text size increased dramatically?
— if no, it needs repair. - Does the background and text colors change to a brown hue?
— if no, it needs repair. - Do paragraphs have a surrounding border?
— if no, it needs repair.
- Does all text size increased dramatically?
- Voice reader user test: Run JAWS or Fangs.
For tutorials on JAWS go to http://atto.buffalo.edu/registered/Tutorials/jaws/index.php- Does it sound or appear like the text reader is dictating content in a logical manner?
— if no, it needs repair.
- Does it sound or appear like the text reader is dictating content in a logical manner?
Back to Top