Web Accessibility Guidelines & Best Practices

Most studies find that about one fifth (20%) of the population has some kind of disability.

The major categories of disability types

  • Visual
    • Blindness, low vision, color-blindness
  • Hearing
    • Deafness and hard-of-hearing
  • Motor
    • Inability to use a mouse, slow response time, limited fine motor control
  • Cognitive
    • Learning disabilities, distractibility, inability to remember or focus on large amounts of information

Source: Rosenfeld: Personas for Accessible UX

Web Content Accessibility Guidelines (WCAG)

Accessible design improves overall user experience and satisfaction, especially in a variety of situations, across different devices, and for older users. We follow WCAG 2.0 AA standards.

Content

Images

  • Determine if your images need alt text.
  • Place your hand over the image on the screen. Does your content lose meaning? If the answer is yes, you need to include alt text to describe the image.

Links

  • Use meaningful text for links, describing where the links take the user.
  • Example: More information about meaningful link text.

Readability

  • Use headings to create page structure.
  • Use numbered and bulleted lists for structure.
  • Use simple language and formatting.
  • Format and use simple tables with column and row headers. Split nested tables up into simple tables.

Video / Audio Captions

  • Video and multimedia should have captions or a transcript available on the website for users.
  • Resources:  Rev, Amara

User Experience

Keyboard Interaction / Tab Order

Try using your keyboard to tab through the website. You should be able to do all the same things with your keyboard that you can do with your mouse/trackpad.

  • Can you play/pause videos?
  • Does your keyboard get stuck anywhere on the page?

Focus

Use your keyboard to tab navigate to a link on the page.

  • Can you tell it’s a  link?

Screen Reader

Test out your website with screen reader tools.

Visual Design

Color & Contrast

  • Text and images should be easy to read against the background.
  • Color contrast ratio for minimum compliance is 4.5:1.
  • Try it out with accessible colors checker.

Typography

  • Use real text instead of text within images whenever possible
  • User fonts that are easy to read

Forms

Resources & Tools

Resources & Guides

Tools

Screen Reader Applications

Video / Audio Captions

Writing Content 

WP Accessibility Resources

WP CAMPUS Accessibility Resources

Accessibility Audit WP Campus on Gutenberg

Executive Summary

Some specific limitations in the visual interface also make it difficult for certain kinds of content to be fully accessible, because it doesn’t provide the tools to define all necessary semantics and metadata. The Video Block interface, for example, doesn’t provide a way to associate a caption file with the video; the Table Block interface doesn’t allow users to define a caption, header rows, header cells, or scopes. Gutenberg users can only add this information by using the HTML editor, but this of course requires them to have sufficient HTML knowledge.