Web Accessibility

About Web Accessibility

The web should be accessible to everyone, regardless of abilities, location, hardware, etc. 

According to the World Wide Web Consortium (W3C):

Web accessibility encompasses all disabilities that affect access to the Web, including auditory, cognitive, neurological, physical, speech, and visual.

Web accessibility also benefits people without disabilities, for example:

• People using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.

• Older people with changing abilities due to ageing

• People with “temporary disabilities” such as a broken arm or lost glasses

• People with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio

• People using a slow Internet connection, or who have limited or expensive bandwidth 

Some Best Practices

Here are some high-level best practices that should always be implemented. However, it's recommended to work with experts in accessibility to ensure complete compliance. 

These are from W3C and the University of Washington:

Provide sufficient color contrast

• • There should be sufficient contrast between background colors and text, interactive elements (such as hyperlinks and buttons), and informational graphics (such as graphs and charts). 

  • Low contrast could exclude those with low vision.

  • See Color Contrast section below for a list of accessible color combinations.

Don’t use color alone to convey information

• • Relying on color alone could exclude those with visual impairments such as color blindness. 

  • Use a second indicator that isn't color. For example: make hyperlinks blue AND underlined.

Use Headings

• Use headings to group information and make pages easy to scan.

• Headings should be clear and concise.

Add proper alt text to images

• Alt text is the description of an image. These are useful for those with visual impairments and rely on assistive technologies, such as screen readers or Braille displays. Alt text is also displayed when an image fails to load.

• Decorative images don't require alt text.

Use text, not pictures of text

• Text embedded in pictures don't resize well, sometimes making the text unreadable at big and/or small sizes. Consider how the text will appear on mobile devices as well.

• Text also loads faster than images.

Provide text-based alternatives for videos

• Text-based alternatives include captions and transcripts.

Color Contrast

The colors below meet WCAG's Level AA accessibility requirements for text and graphics according to WebAIM Contrast Checker. If a color is not listed then it does not meet the requirements.

Color Blindness

Whenever possible, design for those with color blindness in mind. Color blindness affects 1 in 12 men and 1 in 200 women. The most common form of color blindness is red-green color blindness (Protanopia or Deuteranopia). Color blindness simulators can assist with determining whether an image or graphic will be accessible for those with color blindness.

Color Blindness Simulators

• Colblindor Coblis: https://www.color-blindness.com/coblis-color-blindness-simulator/ 

• DaltonLens: https://daltonlens.org/colorblindness-simulator

Resources

Background on Accessibility

• Introduction to Accessibility: https://www.w3.org/WAI/fundamentals/accessibility-intro

• Web Content Accessibility Guidelines (WCAG) 2.1: https://www.w3.org/TR/WCAG21

Accessibility Checkers

• Color Contrast Checker: https://webaim.org/resources/contrastchecker

• Check Accessibility in PowerPoint: https://support.microsoft.com/en-us/office/improve-accessibility-with-the-accessibility-checker-a16f6de0-2f39-4a2b-8bd8-5ad801426c7f#PickTab=Windows

  • • Note: the PowerPoint program on Macs is unable to export accessible PDFs.

• Check and Verify PDFs in Adobe Acrobat: https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html#check_accessibility_of_PDFs

Tips and Best Practices

• Checklist: https://www.washington.edu/accessibility/checklist/

• Tips for Writing: https://www.w3.org/WAI/tips/writing

• Tips for Designing: https://www.w3.org/WAI/tips/designing

• Tips for Developing: https://www.w3.org/WAI/tips/developing

• Making Audio and Video Media Accessible: https://www.w3.org/WAI/media/av

Courses

• • Deque University Accessibility Courses: https://dequeuniversity.com