Watch the video playlist

Accessibility

The Open Web is an amazingly empowering platform for every human being. It’s our job as web developers to make it work for everyone.

It’s about everyone

Accessibility is about every human—not just extreme cases. Sometimes it’s easier to think in terms of extremes because it gives us a goal, but making our website work better for extremes also makes it work better for everybody else.

The great thing about the web and computers is that they empower everybody. It’s our goal to help every human accomplish what they want on our website, regardless of their physical, mental, or technological capabilities.

Impairments

Looking at specific impairments helps us narrow in on specific issues and fixing these issues helps our website work for everyone else.

There are lots of different impairments that can affect human beings. But it’s important thing to remember is that these impairments can be temporary—as an example: a broken arm.

Visual

Visual impairments are issues that affect eyes, e.g. blindness, partial or full; colour blindness; cataracts; glaucoma; age; etc.

Things we can do

  • Allow text to be resized
  • Have good contrast in colours
  • Test for colour blindness related issues
  • Make sure the website works well with screen readers
  • Use proper alt attributes
  • Don’t autoplay any sound

Mobility and dexterity

Mobility and dexterity impairments primarily affect people’s arms and hands, e.g. missing a hand, limited movement, difficulty with fine control, trouble holding a mouse, termors or shakes, etc.

Things we can do

  • Recognize and prepare for the fact that not everybody will use a mouse
  • Make the website keyboard accessible
  • Increase hit areas of links and buttons

Auditory

Impairments that affect a person’s ability to hear, e.g. deafness, partial deafness, etc.

Things we can do

  • Provide text captions and subtitles
  • Don’t rely on sound for indicators.
  • Don’t autoplay any sound

Cognitive

Generally considered something that affects a person’s brain, e.g. dyslexia, memory issues, problem solving issues, attention deficits, hyperactivity, reading abilities, etc.

Things we can do

  • Make it clear where in the website the user is
  • Organize your content correctly & use proper headings
  • Make the text easily scannable
  • Clearly mark links
  • Use lots of images and graphics
  • Don’t autoplay any sound

Tools

There are a few things that you should check on every website—at least—to help with accessibility.

The tools are still no replacement for proper user and accessibility testing.

  1. Bump the font-size up and down to make sure the layout doesn’t break: at least 2 sizes up and 2 sizes down; to make sure you site works with different default styles.
  2. Disabled images and see what happens to the layout without them.
  3. Disable the CSS to get an idea of what content is available to screen readers.
  4. Check the website with Sim Daltonism to look for colour blindness related issues.
  5. Run your website through one or all of the validators.
  6. Check all the pages with a screen reader like VoiceOver.

☛ Review the accessibility checklist for more.

Tools

Validators

Screen readers

Screen readers are accessibility tools to help users with poor vision or complete blindness get the content of a website read out to them.

They parse the content and understand the semantics and read the text out loud. The HTML semantics are interpreted and turned into understandable words.

Many screen readers also present lots of features to help users move around the screen with their keyboard.

Some popular screen readers:

VoiceOver

VoiceOver is the screen reader built into Apple’s operating systems, both desktop and mobile. It doesn’t require any installation, just needs to be turned on.

Here’s some shortcut keys for using VoiceOver:

  • Command + F5 — Turn VoiceOver on/off
  • Control — Pause VoiceOver
  • Control + Option + Right Arrow — Move to next item
  • Control + Option + Left Arrow — Move to previous item
  • Control + Option + U — Open the rotor (Use arrow keys to navigate)
  • Control + Option + Command + H — Next heading (+ Shift for previous)
  • Control + Option + Command + L — Next link
  • Control + Option + Command + G — Next graphic
  • Control + Option + Command + X — Next list

Links

Video list

  1. Accessibility: ARIA landmark roles
  2. Accessibility: labeling links
  3. Accessibility: extended descriptions for images
  4. Accessibility: focus styles
  5. Accessibility: skip links
  6. Accessibility: tools to help find issues
  7. Accessibility: validators
  8. Accessibility: VoiceOver

Articles

Videos

Books

Tools

Standards

Checklists

People