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
  • Visit the UC San Diego Brand website for the brand web color accessibility chart.
• 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

• 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

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.