Knowledge Base / Cheat-sheets
WCAG 2.1 AA Accessibility Testing
All 50 Level A & AA success criteria, broken down by principle - Perceivable, Operable, Understandable, and Robust. Toggle each item off as you verify it; your progress is saved on this device.
What this checklist covers
Perceivable
Information and user-interface components must be presentable to users in ways they can perceive.
- Every image conveys its purpose via appropriate alt text (or alt="" if purely decorative).
- Icon-only buttons, links, and form controls have an accessible name (visually hidden text, aria-label, or title).
- Prerecorded audio-only content has a text transcript.
- Prerecorded video-only content has a text or audio alternative describing what's shown.
- All prerecorded video with audio has synchronized captions.
- Captions include speaker identification and relevant non-speech sounds.
- Prerecorded video has an audio description track, or a full text alternative covering visual-only information.
- Live audio/video content (webinars, livestreams, town halls) has synchronized live captions.
- Prerecorded video has an audio description track covering visual information not already conveyed in the main audio.
- Headings use real heading markup (h1-h6) instead of just bold or large text.
- Data tables use proper header cells (th, scope) tied to their data cells.
- The DOM/reading order matches the visual reading order of the page.
- Content still makes sense when read linearly with CSS disabled or by a screen reader.
- Instructions don't rely solely on shape, position, size, orientation, or sound (e.g. avoid "click the round button on the right").
- Content and functionality work in both portrait and landscape orientation, unless a specific orientation is essential.
- Common input fields (name, email, address, phone, etc.) use the correct HTML autocomplete attribute.
- Color is never the only way information, a state, or an action is conveyed (errors also use text/icon, not just red).
- Links within body text are distinguishable from surrounding text by more than color alone (underline, weight, icon).
- Any audio that plays automatically for more than 3 seconds has a visible control to pause, stop, or mute it.
- Normal body text has a contrast ratio of at least 4.5:1 against its background.
- Large-scale text (18pt+/14pt bold+) has a contrast ratio of at least 3:1.
- Text can be resized up to 200% via browser zoom without loss of content or functionality.
- Text is rendered as real, selectable text rather than an image of text, except for logos or where a specific presentation is essential.
- Content reflows to a single column at 320px width (equivalent to 400% zoom) without requiring horizontal scrolling.
- Exceptions (maps, data tables, complex diagrams that genuinely need 2D layout) are the only content that scrolls horizontally.
- UI component boundaries (input borders, button outlines, focus indicators) have at least 3:1 contrast against adjacent colors.
- Graphical objects required to understand content (icons, chart lines) also meet the 3:1 contrast minimum.
- Content remains fully readable and functional when line height, paragraph spacing, letter spacing, and word spacing are increased via user style overrides.
- Additional content shown on hover/focus (tooltips, custom dropdowns) can be dismissed without moving the pointer or focus.
- That additional content stays visible while the pointer is over it, and remains until dismissed or no longer relevant.
Operable
User-interface components and navigation must be operable by everyone, regardless of input method.
- All functionality is operable through a keyboard interface alone, with no interaction that requires a mouse or touch.
- Custom widgets (menus, sliders, modals, tabs) follow the keyboard interaction pattern expected for their ARIA role.
- Keyboard focus can always be moved away from any component, including modals and embedded widgets, using only the keyboard.
- Single-character keyboard shortcuts can be turned off, remapped, or are only active while a specific component has focus.
- Any time limit (session timeout, timed quiz) can be turned off, adjusted, or extended by the user before it expires.
- Moving, blinking, scrolling, or auto-updating content has a mechanism to pause, stop, or hide it.
- Nothing on the page flashes more than three times per second.
- A "skip to main content" link or landmark regions let keyboard users bypass repeated navigation blocks.
- Every page has a unique, descriptive page title that reflects its content or purpose.
- Tab order follows a logical sequence that matches the page's visual and reading order.
- Link text (or its immediate surrounding context) describes the link's purpose without relying on "click here" or "read more" alone.
- More than one way exists to locate a page within the site (nav menu plus search, sitemap, or related links), unless the page is a step in a process.
- Headings and form labels describe their topic or purpose clearly and specifically, not generically.
- Every interactive element shows a visible focus indicator when it receives keyboard focus - never suppressed with outline: none.
- Any multipoint or path-based gesture (pinch-to-zoom, swipe) has a single-pointer alternative such as a button.
- Pointer-triggered actions can be aborted (e.g. by moving off the target before releasing) or are triggered on up-event, not down-event.
- A control's visible text label is included in (or matches) its accessible name, so voice-control and switch-access users can reference it.
- Functions triggered by device motion (shaking, tilting) also have a standard UI control alternative, and motion triggers can be disabled.
Understandable
Information and the operation of the user interface must be understandable.
- The page's primary language is set via the html lang attribute.
- Passages written in a different language than the page's primary language have their own lang attribute.
- Moving keyboard focus to an element never triggers an unexpected change of context (new window, auto-submit, focus jump).
- Changing a form field's value never automatically triggers an unexpected change of context unless the user is warned in advance.
- Navigation menus and other repeated components appear in the same relative order across every page.
- Components with the same function (e.g. a "search" icon) are labeled and styled consistently across the site.
- Form validation errors are identified in text and programmatically associated with the field that's in error.
- Form fields have visible labels or instructions describing what input is expected, including any required format.
- When an input error is detected, a specific suggestion for fixing it is provided, unless that would compromise security or purpose.
- For legal, financial, or data-modifying submissions, users can review, confirm, or reverse the submission before it's finalized.
Robust
Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.
- Markup has no duplicate IDs, unclosed tags, or improperly nested elements that could confuse assistive technology.
- Every custom UI component exposes an accessible name, role, and state/value via native semantics or ARIA.
- State changes (expanded/collapsed, checked/unchecked, selected) are programmatically exposed and update in real time.
- Status messages (form success, search results count, loading states) are announced via ARIA live regions without requiring focus to move there.