Use this page as a quick reference guide to help you fix the most common accessibility issues. Although automated accessibility testing can find many issues, a manual review by a human is necessary to find some types of issues.
If you prefer guidance that allows you to save your findings, use:
- Manual accessibility testing template (for web editors)
- Manual accessibility testing template (for developers)
Note: To access the templates, you must be logged into CalNet (Berkeley staff/students); you will automatically be prompted to create your own copy.
Color
For more information, read about the accessible use of color.
- Use sufficient color contrast for text and important graphics. Use a color contrast checker.
- Don't use color alone to convey information. About 1 in 12 men are colorblind and may not be able to use color-coded information.
Links
For more information, review Links.
- Links should consist of meaningful text, not URLs, and not "click here."
- Links should be underlined. (Text that isn't a link should not be.) It is possible to differentiate links from surrounding text using color, but you must have a color contrast ratio of 3:1 with surrounding text and 4.5:1 with the background.
Text
- Use plain language. Use the Hemingway Editor to check reading levels and help you simplify content.
- Use headings in order. Each web page or document should have a single Heading 1 (or H1) applied to the title. Use Heading 2 for sub-headings, then Heading 3. [insert link to Headings page]
- Use correct styles. All text should be identified as a heading level, paragraph text, list, etc. Use built-in list formatting for lists, not dashes.
- Keep text formatting simple:
- Use simple sans serif fonts.
- Avoid using ALL CAPS.
- Minimize use of italics.
- Do not use underlined text unless it's an active hyperlink.
- Use left-justified (not centered) text in paragraphs. (Centered titles and headings are okay.)
- Text should be resizable to at least 200% and reflow. You can check for this using Ctrl (+) and Ctrl (-). If you reduce the size of your window or view the page on a smaller device, does the text adapt to the width? Users should not have to scroll horizontally and vertically to read content.
- Make sure the reading order is correct and logical. This is more likely to be an issue in complex documents with 2-3 columns or in PDF forms. To check, tab or arrow through content. Make sure:
- When text reflows, it's in the correct order.
- A screen reader reads the text in the correct order.
Images and graphics
For more information, read about image accessibility.
- Avoid text in images. If images contain text, the same information should also be provided in the alternative text or body text.
- Use alternative text (alt text) for all images and graphics. The only exception is for images or graphics that are purely decorative, which should use null alternative text when possible (in html: alt="").
Forms
- Required fields should be identified. An asterisk is acceptable.
- Webform fields must have (non-visible) labels in the code that are associated with the field.
- Error messages must tell users where the error is and how to fix it. Error messages must be recognized by screen reader software.
- PDF forms must have editable fields, tags, and tooltips. To create an accessible PDF form, you will need to remediate it.
- Alternatives to handwritten signatures should be available.
- Consider the submission process. When we require users to print, complete by hand, and mail forms, this results in barriers, both the person submitting the form and the person processing it.
Tables
For more information, review Tables.
- Consider presenting the information without a table. If the same information can presented simply using headings and lists, this is preferable.
- Designate row headers and column headers (when possible).
- Avoid empty cells. Use "no data", "no value", "blank", "none", or "not applicable."
- Avoid merged cells.
- Keep tables simple. Two simple tables is better than one complex table.
- Never use tables for layout.
Other features
- Ensure there are no keyboard traps. You should be able to Tab into all interactive elements using the keyboard and not get stuck anywhere.
- No flashing content.
- Don't use animated content that can't be turned off.
- Video recordings must have accurate captions.
- Audio recordings (podcasts) must have transcripts.