Web Designer Accessibility Checklist
In order to help web designers, whether on campus or outside vendors, build and maintain accessible web sites for the University of Illinois, the following checklist (based largely upon the Illinois Center for Information Accessibility Best Practices) is provided here. Any questions regarding these recommendations should be addressed to Tim Offenstein. This checklist is also available in Acrobat format.
(182K)
Accessibility
Navigation & Orientation
- Each page should have one title element. The recommended page title order is: page content description / college or unit name / University of Illinois.
- Each page should utilize header tags for structure. The h1 element is reserved to reflect the page content and should be identical to the page content description in the page title element. Two h1 elements are permissible as long as they are both included in the page title.
- Header mark up should be hierarchical and not skip over header elements. (h1, h2, h3 and so forth is fine, h1, h3, h4, h6 is not acceptable.)
- All unordered/ordered lists which contain links should be immediately preceded by a descriptive header tag. This header markup can be hidden using CSS markup if it is disruptive to the layout design. (Text should be hidden via positioning rather than using "hidden" or "none" as display values. These values remove associated text from screen readers therefore they should not be used.)
- If image maps are used, all links within the image map (area element) must have a redundant text link on the same page. This text link must be an identical match to the link within the image map.
- Each form control (for instance, input field) should also have a "label" element associated with it.
- Tables should not be used for layout structure. If tables are used, they should make use of Table Headers (TH) and they should not be nested within other tables.
Text Equivalents
- All images should have brief, relevant ALT text.
- All ALT values within an image element must have text, no blank ALT tags.
- All EMBED elements should be using the SWFObject method. At a minimum, EMBED elements need to have ALT text provided.
Scripting
- Onmouseover and onmouseout attributes need to be accompanied respectively by onfocus and onblur attributes so that users can navigate without a mouse.
Styling
TOP- Avoid the use of deprecated stylistic tagging such as <b>, <i>, <font>, <u>, <center>, <font-color>, etc. Instead use <em>, <strong> and CSS.
- Avoid the use of tables for positioning. Use CSS instead.
- When using Tables for data display, be sure to use Table Headers <th> to denote column heads.
- Avoid using images for stylistic purposes, such as separator bars or list bullets. This type of treatment should be handled through CSS.
- All Image elements in the HTML should include Alternative (ALT) text. ALT text should be brief and descriptive. Do not use empty ALT tags.
- Avoid the use of link text that does not retain its meaning when removed from its context such as, "More…", "Read more…", "Click here", etc.
- Avoid use of duplicate link text that points to different destinations.
- Do not denote meaning through the use of color. Color can be used for stylistic purposes but the meaning of the page or navigation cannot change if color is removed.
HTML Standards
- Each page should incorporate a DOCTYPE statement. XHTML Transitional 1.0 is recommended.
- Each page should specify the default language using the lang and/or xml:lang attribute.
- Each page should specify the character encoding. Typically this is either utf-8 or iso-8859-1 however utf-8 is recommended. This element should be incorporated as per the following: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />. The character set needs to be in agreement with the HTTP header.
Code Compliance
- All sites should be validated against the W3C Validator. Each page should conform to the requirements of the DTD associated with the page. (XHTML Transitional 1.0 is recommended.)
Best Practices
- Use unordered lists preceded by header markup wherever possible.
- Avoid "show" and "hide" for Javascript functionality.
- All <script> elements need to include "type" (such as: <script type="text/javascript">).
- Use "ems" and "%" for font sizing, do not use pixels, points or keywords.
- Recommend underlining links, particularly in content areas. This is particularly important in the context of styled text that may be confused with a hyperlink.
- Static text should never be underlined. There are other ways to denote emphasis (such as bold or italicizing).
- Recommend a "freshness date", usually in the footer to indicate that the information is current.
- A "Contact Webmaster" link is always helpful for reporting typographical errors or broken links. This typically will go in the footer.
- On sites of much complexity or depth, a Site Map is very helpful.
- Font sizing below 70% is not recommended. TOP