Skip to content
Brett's Notes

Accessibility

ARIA

Fills in the accessibility gaps in native HTML by modifying the semantics or context of elements.

5 Rules of Aria

  1. Always use native HTML elements/attributes over ARIA where possible
  2. Never change native semantics unless you have no other choice
  3. All interactive ARIA controls must be usable with a keyboard
  4. Never use role="presentation" or aria-hidden="true" on focusable elements
  5. All interactive elements must have an accessible name

The Accessibility Tree

Based on the DOM, but contains only the information used by assistive technologies. ARIA works by modifying the properties of the elements making up this tree. Includes various attributes such as:

Name
What assistive technologies announce to the user and use to differentiate between elements of the same type. Can be set natively in HTML, for example by the text contents of an element, its alt text or its label
Description
What the element is/does, announced along with the name

ARIA Labels

It’s possible to label an element which can’t usually be labelled using ARIA, by passing the id of the element to aria-labelled-by or aria-described-by for example.

aria-described-by
  • Overrides any native label and replaces the name attribute in the accessibility tree.
  • You pass a string as the value, which becomes the element's accessible name.
  • Cannot be used on div or span elements.
Do not use it to change the phonetic pronunciation of words, can mess with stuff like a braille reader.
aria-labelled-by
  • Overrides both native labels and the aria-label attribute.
  • Sets the label to a concatenated string of the text contents or alt attributes of the elements whose ids you pass
  • Any number of elements can be passed, including the element itself
  • Will still be labelled even if the element giving the label is hidden, useful for when you don't want sighted users to see the label
  • Unlike a native label element, does not auto-focus the thing it labels when the 'label' is clicked
aria-describedby
Similar to aria-labelled-by, but for the ARIA description attribute
aria-hidden
Hides elements from the accessibility tree. However be careful as hiding an element also hides all its children, which can't be overridden bt setting aria-hidden=false on the child elements. Also don't apply it to focusable elements, nothing will be announced when they gain focus.

Axe DevTools

Chrome extension for accessibility testing.

Firefox Accessibility Inspector

Can scan a page for accessibility issues, and shows the accessibility tree like the DOM.

Lighthouse

General performance testing, which also covers accessibility.

Screen Reader Outputs

A collection of screen reader outputs so you know what you’re making stuff accessible for.