Accessibility Aria Patterns

"a11y" is a numeronym for "accessibility" — 'a' + 11 letters + 'y'.

Accessibility means people with disabilities can perceive, understand, navigate, and interact with the web. Usability is the broader quality of a design being easy to use for everyone, including those without disabilities.

Visual, auditory, physical/motor, and cognitive/neurological disabilities.

A (lowest), AA (mid), and AAA (highest).

4.5:1.

3:1.

7:1.

Perceivable, Operable, Understandable, and Robust.

It defines roles, states, and properties that can be added to HTML so web content and applications are more accessible to assistive technology users.

If you can use a native HTML element or attribute that has the semantics and behavior you need, use that — do not add ARIA roles, states, or properties.

All interactive ARIA controls must be usable with the keyboard.

Do not use role="presentation" or aria-hidden="true" on a focusable element or on an element that has focusable descendants.