Web accessibility made simple: WCAG 2.0 AA explained, part 4

Guideline 1.4: Distinguishable

Make it easier for users to see and hear content including separating foreground from background

What does this mean?

Points in this guideline account for variations in visual and audio perception. For example, avoiding colour reliance not only supports those using screen readers (which won’t pick up on the colour of text), but also people with colour blindness.

Many requirements of this guideline are covered by default settings in the WMS. However, being acquainted with them will give you a better understanding of best practices for website, document, and graphic design.

What to do

• Avoid colour reliance: ensure that colour is not the only indicator you use.
  1. For example, don't use a green arrow to indicate where to start and a red arrow to indicate where to stop (these two arrows will look identical to some users)
  2. Instead, you could use a green arrow to indicate "start" and a red X to indicate "stop" (the different symbols will be distinguishable even if the colour difference isn't)
• Audio control: users should be able to pause or stop any web page audio, as well as adjust the audio settings independent of the device’s settings
  1. If you’re embedding a YouTube or Microsoft Stream video, this functionality is built into the media player
• Meet minimum contrast requirements between text and background colour
  1. The WMS template complies with contrast ratio requirements, but you still need to check contrast levels for documents or graphics you include on your webpage.
  2. Logotypes and incidental text are exempt from this requirement
• Use built-in heading styles
  1. See our previous article for more information on how screen readers interpret text styling
• Avoid justified text (right or left-aligned instead)
  1. Justified text can be harder to read and scan than centred, left- or right-aligned text
• 1.5 line spacing, with paragraph spacing 2x the line spacing
  1. The WMS approximates this by default, but you'll need to specify this in other document types
• When creating videos with speech (not music videos):
  1. Eliminate all background noise
  2. Ensure that background sounds are at least 20 decibels lower than main sound, or allow the user to turn off background noise

Accessibility Advisor’s Suggested Resources

I have recommend a few technical resources that can help you brush up your skills in this areas related to these guidelines:

• Color contrast checker by WebAIM: a useful tool that tells you whether the text to background colour ration meets the 4.5:1 (AA) or 7:1 (AAA) minimum ratio for accessibility
• 6 Suprising Bad Practices that Hurt Dyslexic Users

Rachel Desjourdy is the Accessibility Advisor in the Office of the Provost and Vice-Principal (Academic). She is available to support the McGill community in becoming more inclusive and accessible, and welcomes questions and feedback at rachel.desjourdy [at] mcgill.ca.