Accessibility

Check the whole chapter at once with axe-core on every page type. Test the WCAG 2.0, 2.1 and 2.2 A and AA rules plus best practices. Run it at phone and desktop width, in light and dark mode. Automated tools find only part of the problems. Finish with a keyboard and a screen reader.

Required

• Make text easy to read

  Required

  Give text at least 4.5:1 contrast against its background, and 3:1 for large text and controls, in light and dark mode.

• Describe images in words

  Required

  Give every <img> an alt attribute. Say what it shows if it carries meaning, or leave it empty if it is decoration.

• Label every form field

  Required

  Give every form field a visible label tied to it with <label for>. A placeholder is not a label.

• Make everything work by keyboard

  Required

  Every link, button and control must work with just a keyboard. Tab moves in reading order, and focus never gets stuck.

• Always show where focus is

  Required

  Show a clear, high-contrast focus ring on every control when someone reaches it with the keyboard.

• Never hide the focused element

  Required

  Make sure a sticky header, banner or chat widget never hides the element that has keyboard focus. This is WCAG 2.2 criterion 2.4.11 (AA).

• Let people skip to the content

  Required

  Make a "Skip to main content" link the first thing that takes focus on every page.

• Use the right element for the job

  Required

  Use landmark elements (header, nav, main, footer) and the right element for each job, with one main per page.

• Say where each link goes

  Required

  Write link text that says where the link goes. Never write "click here" or "read more".

• Never use colour as the only signal

  Required

  Never show meaning by colour alone, such as red for an error or a coloured line in a chart. Add text, an icon, a pattern or an underline. This is WCAG criterion 1.4.1 (A).

• Name every link and button

  Required

  Never ship a link or button without a name a screen reader can read. Give icon-only controls an aria-label.

• Explain form errors next to the field

  Required

  Show form errors as text next to the field, tie them to it with aria-describedby, and say how to fix them.

• Make signing in easy for everyone

  Required

  Never make signing in depend only on remembering, copying out or solving puzzles. Allow paste and password managers. This is WCAG 2.2 criterion 3.3.8 (AA).

• Never ask for the same thing twice

  Required

  Never ask people for the same information twice in one process. Fill it in for them or let them pick it. This is WCAG 2.2 criterion 3.3.7 (A).

• Keep help in the same place

  Required

  Put help and contact links in the same place on every page. This is WCAG 2.2 criterion 3.2.6 (A).

• Respect people who turn motion off

  Required

  Honour prefers-reduced-motion and stop or reduce animation, parallax and smooth scrolling. Never start motion by itself.

• Give people enough time

  Required

  Warn people before a time limit runs out, and let them extend it with one simple action. Never move or update content by itself for more than five seconds without a way to pause it. These are WCAG criteria 2.2.1 and 2.2.2 (A).

• Caption video, transcribe audio

  Required

  Caption every video and give a transcript for audio.

• Give tables headers

  Required

  Mark up data tables with th, scope and a caption or label. Use tables only for data, never for layout.

• Never make people scroll sideways

  Required

  Never let a page or a component scroll sideways with a visible scrollbar, at any width from 320 px up.

• Let text grow without breaking the page

  Required

  Keep all content readable at 200% text zoom and with wider letter, word and line spacing. Never block pinch zoom. These are WCAG criteria 1.4.4 and 1.4.12 (AA).

• Make tap targets big enough

  Required

  Make every touch target at least 24 by 24 CSS pixels (WCAG AA), and 44 by 44 for main controls (WCAG AAA).

• Offer a way that needs no dragging

  Required

  Give every drag a single-pointer alternative, such as buttons. This is WCAG 2.2 criterion 2.5.7 (AA).

Recommended

• Work in high-contrast mode

  Recommended

  Test the site in forced-colours mode, a high-contrast setting in Windows. Repair what it flattens under forced-colors: active.

• Lock the page behind open menus

  Recommended

  Make everything behind an open menu or dialog unreachable with the inert attribute.

• Reach for HTML before ARIA

  Recommended

  Use native HTML elements first. Add ARIA, extra attributes for screen readers, only for what no native element can say.

• Make links look like links

  Recommended

  Underline every text link in content with one subtle, consistent style. Leave it off only in navigation bars and on links styled as buttons, where the shape already says "link".

• Announce changes without moving focus

  Recommended

  Announce changes such as "Copied" through a live region (role="status") that is already in the page, without moving focus.

• Know which accessibility law applies

  Recommended

  Find out which accessibility laws cover the site. Meet WCAG 2.2 AA, which includes the WCAG 2.1 AA level most laws point to.

• Let find-in-page open hidden text

  Recommended

  Hide folded content in a way find-in-page can still reach, such as <details> or hidden="until-found".

• Show the right keyboard on phones

  Recommended

  Give inputs the right type, inputmode and autocomplete, and never block zoom on phones.

• Build with native controls

  Recommended

  Build controls from native elements (button, a, details, dialog, popover) instead of scripted divs.

• Style from the state

  Recommended

  Style interface state from the state itself with selectors like :has(), :popover-open and [aria-expanded], not from toggled classes.

Optional

• Let the browser pick readable text colour

  Optional

  Let the browser pick readable black or white text on brand colours with contrast-color(), after a fallback you have checked.

Avoid

• Fix the site instead of adding overlays

  Avoid

  Never install an accessibility overlay widget. Fix the site itself.