Accessibility testing checks whether people with different abilities can understand and operate the product. Combine manual checks with automated tools.

On this cheat sheet
SemanticsKeyboardFormsVisualARIATools

Semantic HTML

  • Page has one clear main heading and a logical heading order.
  • Use real buttons for actions and links for navigation.
  • Landmarks such as header, nav, main and footer are meaningful.
  • Lists, tables and form controls use native HTML correctly.
  • Informative images have useful alternative text; decorative images are ignored.

Keyboard and focus

  1. Put the mouse aside.
  2. Use Tab and Shift + Tab through the page.
  3. Activate controls with Enter and Space as appropriate.
  4. Use arrow keys in menus, tabs, radio groups and similar widgets.
  5. Press Escape to close overlays where expected.
  • Every interactive control is reachable.
  • Focus order follows the visual and reading order.
  • Focus is clearly visible and never trapped.
  • A modal moves focus inside, contains it and restores it on close.
  • A skip link reaches main content.

Forms and names

  • Every field has a visible, programmatically associated label.
  • Required state and format instructions are announced.
  • Errors identify the field, explain the problem and suggest a fix.
  • Error summary links move focus to invalid fields.
  • Controls have correct accessible roles, names, values and states.

Visual checks

  • Text and meaningful UI components meet contrast requirements.
  • Information is not communicated by colour alone.
  • Content works at 200% browser zoom and with text enlarged.
  • No essential content is clipped or requires two-dimensional scrolling at narrow widths.
  • Touch targets are large enough and spaced safely.
  • Motion can be paused or reduced when necessary.

ARIA

First rule: use native HTML when possible. ARIA changes accessibility information; it does not add keyboard behaviour by itself.
  • Roles match the control behaviour.
  • aria-expanded, aria-selected and similar states update.
  • aria-describedby points to useful help or error text.
  • Live regions announce important asynchronous updates without excessive interruption.
  • Hidden content is not exposed unexpectedly.

Screen readers and tools

Test important flows with a screen reader: NVDA on Windows, VoiceOver on Apple platforms or TalkBack on Android. Listen for names, roles, states, errors and dynamic updates.

axe DevToolsAutomated rule checks in the browser.
LighthouseQuick automated audit in Chrome.
Accessibility InsightsAutomated and guided manual checks.
DevTools Accessibility treeInspect computed names, roles and states.
Automated scans are a starting point: they cannot judge every label, focus flow, instruction or screen reader experience.

Useful links