Left Arrow.Back
Left Arrow.Back

notes / web / accessibility

accessibility

The internationally recognized symbol for accessibility.

Accessibility

Last Tended

Status: seed

A11y (Web Accessibility) refers to best practices for keeping a website usable despite physical & technical restrictions. WCAG (Web Content Accessibility Guidelines) guidelines are categorized into 3 levels of conformance in order to meet the needs of different groups & 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.

A series of squares with their dimensions written next to them.

Click Target Size

The recommended minimums for clickabled targets (buttons, links, ..):

  • 44 x 44px for AAA rating.
  • 24 x 24px for AA rating.
  • 20 x 20px for AA rating only if:
    • the area is inline (such as a a link within a paragraph) or
    • there is is minimum 4px gap between adjacent clickable areas.
A series of squares with their dimensions written next to them.

Tap Target Size

Although the WCAG doesn't mention a difference between click & 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.

A screenshot of a desktop widget. It shows 2 colors with their contrast value displayed below them.

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 & background color. It will display what level (less than AA, AA or AAA) that combination has.

3 squares. 1 filled with stripe. The others fill with a solid color.

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 & CSS)
Hide element visually & 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>
The internationally recognized symbol for accessibility.

People to Follow

Where to Next?