All cheat sheets

Web

Accessibility cheat sheet

Accessibility essentials: ARIA attributes that carry real meaning, focus and keyboard requirements, and the WCAG numbers to design against.

Naming

State

Live

Focus

WCAG

Things worth remembering

  • A native <button> beats div role="button" every time. Reach for ARIA only when no element fits.
  • Never remove focus outlines without replacing them. Style :focus-visible instead.
  • aria-hidden on a focusable element creates a trap for screen reader users.

More Web sheets