Image descriptions (alt text)

Help people understand an image

❌ Problem: Long or inappropriate alt text.

✅ Fix: Replace the text with a brief, neutral description. Reminder: Most photos and images on websites are decorative and shouldn’t have alt text. None of the photos on this page on this page do!

❌ Problem: Missing alt text. (Screen readers can’t describe images that don’t have alt text.)

✅ Fix: Add alt text that describes what an image shows. Example: Instead of: "IMG_1234.jpg," use "Graph shows program applications have grown 30 percent over 3 years." 

Poor keyboard navigation

Make it easy to tab through your content

❌ Problem: Users can’t move through a website or web page using only their keyboard.

✅ Fix: Ensure all links, buttons, and forms can be accessed with the Tab key. Also make sure the items follow a logical order as people tab from one item to the next. 

Low-contrast text

Have text that’s easy to see

❌ Problem: The color of your text is too similar in color to the background, making it hard to read.

✅ Fix: Use strong color contrast. Examples: 

  • ✅ Good: Black text on a white background.
  • ❌ Bad: Light gray text on a white background. 

Confusing forms

Make each form easy to use

❌ Problem: The form doesn’t have clear labels or instructions.

✅ Fixes:

  • Add labels for each input field
  • Use error messages that explain what went wrong
  • Don’t rely only on color to show errors

Video or audio plays automatically

Dont distract site visitors

❌ Problem: Some users are distracted by video or audio that plays automatically.

✅ Fixes:

  • Only use auto-play if it’s truly needed
  • Give users a way to pause, stop, or mute the content

Missing video captions

Use open or closed captions

❌ Problem: The video doesn’t have captions for people who can’t hear

✅ Fix: Make sure that you have captions loaded (with any misspelling issues corrected!) and enabled for videos.

  • Captions show a synchronized transcript of the dialogue and may also note other important sounds.
  • Definitions: Open captions always show. Closed captions can be turned on and off by users.

Test your changes

Do “regression testing” to make sure the changes you made:

  • Meet accessibility standards and guidelines
  • Don’t cause unintended problems such as broken links or navigation issues

WCAG success criteria and techniques for developers

Use the World Wide Web Consortium’s quick reference guide to meet WCAG 2 requirements. You can use its filter tab in the left-hand menu to customize:

  • Tags: Show only success criteria associated with the selected tags
  • Levels: Show only success criteria for the selected levels
  • Technologies: Show only techniques for the selected technologies
  • Techniques: Show only the types of techniques and/or failures selected