Skip to content

Accessibility

Jump to bottom
Ryan Johnson edited this page Sep 10, 2019 · 22 revisions

Accessibility Guidelines

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

— Sir Tim Berners-Lee

Approximately 20% of the world's population has at least one disability; that's roughly 1.5 billion people! In 2017, 814 lawsuits were filed in the United States against companies that neglected to consider this population when developing their products. With stats like these, it's no wonder why accessibility is a hot topic.

The Three Tenets

When contributing to HelixUI, try to follow the three tenets.

  1. Make it accessible
  2. Make it pretty
  3. Make sure the pretty didn't break accessibility

Concepts

Disabilities

When web developers hear the term "accessibility", they might equate this to "I need to make sure that my products can be used by folks with disabilities." While this true, there's one assumption that needs to be clarified; not all disabilities are permanent. By building a web site in an accessible way, not only do you improve the usability, but you also provide alternatives for users with temporary disabilities to consume content.

Permanent Disabilities

There are many permanent disabilities to consider.

TODO: add details

Temporary Disabilities

Even able-bodied users with injuries or other temporary conditions can be classified as "disabled".

  • Broken limbs affect motor skills.
  • Pupil dilation (e.g. induced by an optometrist) affects the ability to focus.
  • "Swimmer's Ear" affects hearing.
  • A cold or the flu can affect vision, hearing, and attention.
  • Alcoholic inebriation can affect vision, motor control, attention, and cognition.
  • Sleep deprivation can affect vision, motor control, attention, and cognition.
  • etc.

Situational Impairments

Among temporary disabilities, there are also situational (a.k.a. "environmental") impairments. These impairments occur when the environment around the user is suboptimal. For instance:

  • Users with tight schedules have little time to read verbose instructions.
  • Feeding a baby may leave a parent with only one free hand to use their device.
  • Watching a video in a noisy environment requires subtitles or a transcription to consume content.
  • Parents require a quiet/muted UI to avoid waking children during naps.
  • Users with glossy screens may have trouble viewing the UI in bright environments.

Techniques

Language

The absolute first thing you should define is the lang HTML attribute on the <html> tag. This attribute provides configuration of screen readers to read content in the appropriate accent and pronunciation (aiding in accessibility).

Custom Keyboard Interaction

There are two pieces to keyboard interaction: Navigation and Activation.

Keyboard Navigation

Keyboard navigation is added via the tabindex HTML attribute or the tabIndex element property, if the element doesn't have native tab ordering (see Native Focusable Elements).

  • Keyboard navigation should never escape open dialog widgets (popovers, modals, etc.).
value result
-1 remove from tab order (still programmatically focusable)
0 add to tab order
1+ Avoid using these. Tab order may not be guaranteed.

The following CSS should be applied to prevent the visual focus outline for items that are programmatically focused.

[tabindex="-1"] {
  box-shadow: none;
  outline: none;
}

Keyboard Activation

For activation functionality (interacting with elements on the page), the "Enter" and "Spacebar" keys should trigger the same functionality as a mouse click. This applies to most interactions, but not all. Use your best judgement.

Screen Readers

The following attributes are necessary to add proper screen reader support.

property description
role Describes behavior of an element
aria-label Sets the text to be spoken by the screen reader.
aria-labeledby Points to one or more elements that describe the current element.

Native Focusable Elements

  • Buttons (<button>, <input type="button">, <input type="reset">)
  • Inputs (<input>, <textarea>, <select>)
  • Links (<a href="...">)
Link Anchor
<a href="#deep-link">Deep Link</a> <a id="deep-link"></a>
Receives focus in tab order. No focus given.

Resources

Clone this wiki locally