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.

Design Phase

  • 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

Development Phase

  • 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

Content Phase

  • 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).