Skip to main content

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: Consider color contrast, font styles
  • Do not convey information with color alone
  • Usability: Provide text descriptions for graphic elements
  • Accessibility review and testing should be completed for each major design revision

Development Phase

Conform to W3C development specifications, and validate code in order to improve accessibility.
Test for conformity 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 Accordion Example (WAI-ARIA Authoring Practices)
    • 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
UC has licensed the SiteImprove platform for automated accessibility testing.

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 Creating Accessible Tables
  • 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 opening in a new window should have a warning for the user
    • 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. There's more to PDF accessibility, but this is the most important requirement.