How to test
Accessibility testing cheat sheet
A 31-step manual pass you can work top-to-bottom — how to test each check, what a pass looks like, and the WCAG 2.2 success criteria it maps to.
Recommended order
- 1Scan first — run an automated tool to catch the obvious, low-effort failures.
- 2Check the structure — title, language, landmarks, headings, and alt text.
- 3Put the mouse away — tab through for keyboard operability, focus order, and a visible focus ring.
- 4Look closely — color contrast, use of color, zoom, reflow, and text spacing.
- 5Exercise the interactions — forms and errors, dialogs, media, and dynamic content.
- 6Listen — finish with a screen-reader pass to confirm it all makes sense.
| # | Test | How to test | Expected result | WCAG SC |
|---|---|---|---|---|
| 1 | Page Title | Right-click → Inspect → open <head> → check the <title>. | Title accurately describes the page, e.g. "How to Test | a11yman". | |
| 2 | Page Language | Inspect the <html> element. | A lang attribute is present and correct, e.g. lang="en". | |
| 3 | Image Alt Text | Inspect every <img>, or use an accessibility inspector. | Informative images have meaningful alt; decorative images use alt=""; alt is never missing. | |
| 4 | Skip Link | Reload the page and press Tab once. | A "Skip to main content" link appears and moves focus to the main content. | |
| 5 | Main Landmark | Inspect the page or use accessibility tools. | The page has exactly one <main> landmark. | |
| 6 | Headings | Inspect the DOM or use a heading-outline extension. | One H1 describes the page; heading levels are logical and don't skip. | |
| 7 | Landmark Structure | Check for header, nav, main, footer and aside landmarks. | Landmarks exist and help users navigate the page. | |
| 8 | Keyboard Navigation | Use only Tab, Shift+Tab, Enter, Space and the arrow keys. | Every interactive element can be reached and operated by keyboard alone. | |
| 9 | Keyboard Trap | Move through every interactive component. | Focus can always move away using standard keys. | |
| 10 | Focus Indicator | Tab through the page. | Focus is always visible, with ≥ 3:1 contrast against adjacent colors. | |
| 11 | Focus Order | Tab from top to bottom. | Focus follows the visual and reading order. | |
| 12 | Link Purpose | Read each link's text without surrounding context. | Link text describes its destination; avoid bare "Click here" / "Read more". | |
| 13 | Buttons | Inspect button labels or use a screen reader. | Buttons have accessible names describing their action. | |
| 14 | Form Labels | Inspect each input field. | Every control has an associated visible label or accessible name. | |
| 15 | Required Fields | Check required form fields. | Required state is programmatic, not conveyed by color or an asterisk alone. | |
| 16 | Error Messages | Submit the form with invalid or empty values. | Errors are descriptive, tied to the field, and announced to assistive tech. | |
| 17 | Color Contrast | Use a contrast checker. | Normal text ≥ 4.5:1, large text ≥ 3:1, UI & focus indicators ≥ 3:1. | |
| 18 | Color Alone | Disable CSS or inspect visual indicators. | Information is never conveyed by color alone. | |
| 19 | Zoom | Zoom the browser to 200% and 400%. | Content stays usable without horizontal scrolling (except where allowed). | |
| 20 | Reflow | Test at 320 CSS px width. | No loss of content or functionality. | |
| 21 | Text Spacing | Apply the WCAG text-spacing bookmarklet. | Content stays readable with no clipping or overlap. | |
| 22 | Tables | Inspect table markup. | Data tables use <th>, correct header scope, and a caption where needed. | |
| 23 | Lists | Inspect the HTML. | Lists use semantic <ul>, <ol> or <dl>. | |
| 24 | Dialogs | Open modal dialogs with the keyboard. | Focus enters the dialog, is trapped, and returns to the trigger on close. | |
| 25 | Dynamic Content | Trigger alerts, accordions, tabs and menus. | Changes are announced via appropriate ARIA roles or live regions. | |
| 26 | Autoplay & Media | Load the page and trigger any audio or video. | Nothing autoplays sound for more than 3s without a pause/stop; video has captions and a transcript. | |
| 27 | Target Size | Measure interactive controls — especially icon buttons and close (×) targets. | Targets are at least 24 × 24 CSS px, or have enough spacing around them. | |
| 28 | Motion & Animation | Enable "reduce motion" in the OS and check moving content. | Essential motion respects prefers-reduced-motion; anything moving over 5s can be paused. | |
| 29 | Pointer & Gestures | Try swipe, pinch and drag interactions using a single tap or click. | Path-based or multipoint gestures have a single-pointer alternative; dragging has a non-drag path. | |
| 30 | Screen Reader | Test with NVDA, VoiceOver or JAWS. | Structure, controls, labels and announcements are meaningful and usable. |
|
| 31 | Automated Scan | Run axe DevTools or Accessibility Insights. | Review automated issues and manually verify each finding. |
|