Web Development

Accessibility Best Practices

The following best practices can help you to create more accessible digital and web content.

Accessibility Cheat Sheet (PDF) – Check out our one-page cheat sheet for a quick reference to the most common accessibility best practices you can apply to your web content.

  1. Headings should be used in a logical order (h1,h2, h3...).
  2. Avoid skipping heading levels.

HTML headings

  1. Describe the content and its function concisely and accurately.
  2. Skip phrases like 'image of', 'graphic of', or ‘logo of.’ Describe what image is or its purpose.
  3. Use empty alt text for decorative images.
horse statue at CPP
Example alt text: The Bronco horse statue at Cal Poly Pomona

  1. Accurately describe a Link’s purpose or destination.
  2. Avoid non-descriptive instructions like “click here”, “read more”, etc.
  3. Keep link text short but clear.
  4. Use text for links, not raw URLs.

Ensure every table has a header:
Use <th> for header cells, <td> for data cells.

Use the appropriate scope attribute for a table header:
<th scope=”row”>header</th>

  1. Use the row scope if header identifies row.
  2. Use the col scope if header identifies column.
  3. Use rowgroup/colgroup if header identifies a group of rows or columns.
Table with column headings
First Name Last Name Course
John Smith 101 Biology
Eve Jackson 130 Chemistry

  1. Choose contrasting colors to ensure visibility, avoiding similar hues, brightness, or saturation.
  2. Contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
  3. Use web extensions to check the contrast:
    WebAim Color Contrast, Eye Dropper extension, Color Contrast Analyzer

White on a blue background is GOOD.

Red on a blue background is BAD.

  1. Ensure all media published has captions.
  2. Ensure that captions are accurate and synchronized.
  3. Use Cascade for embedding YouTube videos with default captions.
Request MediaVision's Captioning service for video captions if there are no captions.

  1. Always include a title in the title attribute of an iframe, especially in YouTube videos.
  2. Ensure it is meaningful and descriptive, describing the iframe’s purpose and function.

  1. Apply predefined heading styles for organization.
  2. Follow Image Alternative Text Standards
  3. Follow Link Text Standards
  4. Use tables with headers for data display.
  5. Use bullet points/numbered lists for items.
  6. Use Word's "Check Accessibility" for error detection.