Accessible Design, Development, and Content
Use these guidelines to facilitate conformity with Web Content Accessbility Guidelines (WCAG) 2.0 during design, development, and content phases of web projects.
- Text – Color contrast, font styles
- Do not convey information with color alone
- Usability – Text representation for graphic elements
- Accessibility review and testing should be completed for each major design revision
- Standards Compliance – Conform to W3C development specifications, and validate code in order to improve accessibility. For example, valid HTML will include alt tags for all images
- Test for compliance each time a new plugin or component is added
- Custom Template Development –
- Navigation – Use Skip Navigation links will all navigation. Skip navigation should not be used with persistent links, because these are considered key content
- Navigation – Use ARIA menus
- Define document language
- Content – Use ARIA tags to optimize content for accessibility. Especially applies to tabs, sliders, and other types of "show/hide" content. Use Open Ajax Examples
- Search (Form) – Use ARIA tags, and form labels. See Creating Accessible Forms
- Headings – Template heading usage should pass validation without content (placeholder or actual) to ensure proper use of heading levels regardless of the content structure on the pages using the template
- Reading Order – Content should be presented in the same order in which it is coded
- Testing Cycle –
- Conduct automated accessibility evaluation on template with completion of each major section or component
- Perform a visual accessibility check to ensure readability of text
- Hyperlink text – Avoid using generic or duplicate text for hyperlinks, especially "click here." Instead use text describing what the user will reach when accessing the link.
- Headings – Verify order and need for headings
- Forms – Use labels on forms. See Creating Accessible Forms
- Tables – Tables should have a summary, have properly labeled header cells, association between data cells and header cells. See Data Tables Accessibility
- Images – Images should have an appropriate alt tag. Any text contained in the image must be placed in the alt (but, image-based text should generally be avoided). Guideline: No more than 25% of the image should be text.
- Link Behavior – Links which open in a new window should warn the user of the behavior
- The title attribute can be used to warn the user of the link behavior
- Alternatively, when all links following open in a new window, then a warning in the content area like, "the following links open in a new window," may be preferred. This option is less cumbersome to non-sighted users when there are many or all links on a page opening in a new window.
- PDF Accessibility – Ensure text is accessible, and document is not a scanned image of text. (Not the only detail related to PDF accessibility, but probably the most important requirement).