Accessibility
| Audience |
|---|
| Contributors |
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
— Sir Tim Berners-Lee
When web developers hear the term "accessibility", they might equate this to "I need to make sure that my sites 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.
There are many permanent disabilities to consider.
TODO: add details
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.
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.
- Make it accessible
- Make it pretty
- Make sure the pretty didn't break accessibility
- WAI-ARIA Authoring Practices (W3C)
- ARIA Techniques (MDN)
- Web Component Checklist (The Paciello Group)
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).
There are two pieces to keyboard interaction: Navigation and Activation.
Keyboard navigation is added via the tabindex HTML attribute, if the element doesn't have native tab ordering (see Native Focusable Elements).
| value | result |
|---|---|
| -1 | remove from tab order (still programmatically focusable) |
| 0 | add to tab order |
The following CSS should be applied to prevent the visual focus outline for items that are programmatically focused.
[tabindex="-1"] {
outline: none;
}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.
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-labeled-by |
Points to one or more elements that describe the current element. |
- Buttons (
<button>,<input type="button">) - Inputs (
<input>,<textarea>) - Links (
<a href="...">)- Must have
[href]to be a link - Without
[href]it's an anchor and does not received focus in tab order.
- Must have
| Link | Anchor |
|---|---|
<a href="#deep-link">Deep Link</a> |
<a id="deep-link"></a> |
| Receives focus in tab order. | No focus given. |
Certain browsers use the Mac system settings to apply keyboard navigation accessibility. To enable full keyboard navigation, enable the Keyboard setting shown in the image below.
