Accessibility
Tended:
Status: decay
A11y (Web Accessibility) refers to best practices for keeping a website usable despite physical and technical restrictions. WCAG (Web Content Accessibility Guidelines) guidelines are categorized into 3 levels of conformance in order to meet the needs of different groups and different situations:
- ▪ AAA - most accessible
- ▪ AA
- ▪ A - least accessible
WCAG does not recommend aiming for AAA for entire sites because it is not possible for some content. In general, AA is aimed for.
Click Target Size
The recommended minimums for clickabled targets (buttons, links, ..):
- ▪
44 x 44pxfor AAA rating. - ▪
24 x 24pxfor AA rating. - ▪
20 x 20pxfor AA rating only if:- ▫ the area is inline (such as a a link within a paragraph) or
- ▫ there is is minimum
4pxgap between adjacent clickable areas.
Tap Target Size
Although the WCAG doesn't mention a difference between click and tap targets (a target for a mouse pointer vs a target on a touchscreen):
- ▪ Apple's Human Interface Guidelines recommends a minimum of
44 x 44dp(density-independent pixels). - ▪ Google's Material Design suggests a minimum of
48 x 48dp. This will also be recommended in a Chrome Lighthouse test.
An element's click / tap target size can be increased without increasing how much space it takes up in the DOM.
Color
When it comes to colors, accessibility is based on contrast. For example, how different is the text color compared to the background color. The higher the contrast, the more accessible. Pika is an open-source colour app. Using a color picker, select a foreground and background color. It will display what level (less than AA, AA or AAA) that combination has.
Hiding Content
Browsers convert markup into an internal representation called the DOM tree. An accessibility tree is also created based on the DOM tree. This tree is used by assistive tools, like screen-readers, to communicate what is on a web page in different ways other than the default. Sometimes you need to hide elements in the DOM tree but show them in the accessibility tree (or vice-versa). For example, an image used as a background texture. This may look nice but not unnecessary for a screen-reader to identify this element to a blind user. The below table lists how to hide elements in both trees.
| Scenario | How | Example (HTML and CSS) |
|---|---|---|
| Hide element visually and from the accessibility tree | Use CSS display property | .hide {
display: none;
}
<div class="hide">
...
</div> |
| Hide element from the accessibility tree | If the element is an img, you can set alt="". For all other elements, use the aria-hidden attribute. | <div aria-hidden="true">
...
</div>
<img
alt=""
src=".."
/> |
| Hide element visually | Use a collection of CSS settings (see example) that visually hides an element while keeping it in the accessibility tree (visible to screen-readers). To avoid unwanted behaviour, such as scrolling to an invisible element, no focusable element should be within an element with this class. | .screenReaderOnly {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
margin: -1px;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
<div class="screenReaderOnly">
...
</div> |
