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

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

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

WAI-ARIA roles & properties

The Accessible Rich Internet Application specification defines whole bunch of roles and attributes that can be assigned to HTML elements to help them be understood.

We may make tabs in HTML with lists and divs, and they may look like tabs, but to accessibility tools like screen readers they’re just lists and divs. ARIA allows us to turn them into functional and understandable tabs with a few extra properties & some JavaScript.

Landmark roles

Adding ARIA landmark roles to your website is a great way to provide navigational landmarks for people using accessibility tools like screen readers. With roles people using screen readers can jump directly to specific locations on the website.

The major landmark roles for websites are:

  • banner — for defining an element as the masthead, added to the primary <header>.
  • navigation — for defining an element as the primary navigation, added the the top <nav>.
  • search — for defining an element as being the search field, usually added to a <div> surround your search <form>.
  • main — for defining an element as being the main content of the page, same as the <main> element, and added to the <main>.
  • complementary — for defining an element as being content related to the primary content, usually added to an <aside>.
  • contentinfo — for defining an element as information about the content: e.g. copyright, terms, privacy policy, usually added to a <footer>.

Here’s an example of adding the landmark role to the masthead:

<header role="banner">
  <strong>Accessible Website</strong>
</header>

Properties

You can use the ARIA properties to help define extra information about your content so that accessibility tools can more fully understand it.

Here’s an example: you have a list of blog posts on your page and they all have a “Read more” link. Since all the links say the same thing they aren’t good for accessibility because, by themselves, they don’t mean anything.

Ideally you could change the link to say something else, by adding the title of the blog post in, like “Read more about of Extinct Animals”. This can become a little visually cumbersome on the page, so we can use ARIA to provide that information without it being visual.

Add the aria-label attribute to the item to give it a non-visual label that can be used by accessibility tools, like screen readers that will announce the information.

<ul>
  <li>
    <h2>…</h2>
    <p>…</p>
    <a href="…" aria-label="Read more about of Extinct Animals">Read more</a>
  </li>
  ⋮
</ul>

Extended descriptions for images

Often there’s complex graphics on your page that need accessible descriptions. The alt doesn’t provide a place for complex descriptions, only short overviews.

As an example, say you have an infographic on your website. First, if it can be done in HTML & CSS with real text do that. If it must be a raster image, then use aria-details to write HTML describing the content of the image.

<img aria-details="#infographic-desc" src="big-complex-infographic.jpg" alt="">

<div id="infographic-desc">
  <h2>All about dinosaurs</h2>
  <h3>Meat eaters</h3>
  <ul>
    <li>…</li>
    ⋮
</div>

The aria-details attribute can point to a location on the current page or a location on another page.

It is best to keep that information visible on the screen, but if you must hide it the hidden attribute should work okay.

There’s a similar ARIA property: aria-describedby—the difference is that aria-details allows multiple HTML elements that are navigable where describedby will mash all the elements into a single sentence stream.

☛ Check out the tutorial on JavaScript for more ARIA examples.

Links


Keyboard focus styles

Not everybody is capable of using a mouse, or even chooses not to use a mouse. But they still need to be able to navigate your website—and keep their position.

Focus styles highlight the currently selected element on screen so it’s recognizable as keyboard focused control.

It’s important to not remove the keyboard focus rectangle from links, but it can be styled for better contrast or to match your website.

a:focus {
  outline: 3px solid #000;
}

But don’t ever write outline: none; on the :focus state—it’s an extremely important feature for keyboard users.


It’s a good idea to add skip links to a website for jumping over the navigation to the main content. Or adding a skip link to jump from the bottom to the top of the website.

Skip links are just standard internal links that jump down to a specific point of a page.

<a href="#main">Jump to main content</a>

⋮

<main role="main" id="main">

Most often designers like to hide them but they must be hidden in an accessible manner. Hidden by default but when focused, shown again.

.skip-links a {
  position: absolute;
  top: -3em;
}

.skip-links a:focus {
  top: 0;
}

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