Interactive WCAG 2.2 Checklist

All non-text content (images, icons, charts) has a text alternative that conveys the same purpose.

Quick test: For every <img>, check that alt text describes the meaning, not the appearance. Decorative images use alt="".

Provide a transcript for audio-only content and a description for video-only content.

Quick test: Audio file? Provide a text transcript. Silent video? Provide a text description.

Captions are provided for all prerecorded video with audio.

Quick test: Every prerecorded video with sound has a .vtt or .srt caption track.

Provide audio description or a full text alternative for prerecorded video.

Quick test: Either an audio description track or a transcript that describes visuals.

Live audio content has captions (e.g., live streaming).

Quick test: Live streams have real-time captions enabled.

Audio description is provided for all prerecorded video content.

Quick test: A separate audio track describes important visual information.

Information and relationships conveyed visually are also available programmatically.

Quick test: Use semantic HTML: headings as <h1>-<h6>, lists as <ul>/<ol>, tables with <th>, forms with <label>.

Reading order in the DOM matches the visual reading order.

Quick test: Disable CSS — content should still make sense top-to-bottom.

Instructions do not rely solely on shape, color, size, location, or sound.

Quick test: Avoid "click the green button" — say "click the Submit button" instead.

Content is not locked to portrait or landscape unless essential.

Quick test: Rotate your device — the page should rotate with it.

Common form inputs use autocomplete attributes (name, email, address, etc.).

Quick test: Email inputs have autocomplete="email". Address fields have autocomplete="street-address", etc.

Color is not the only way to convey information.

Quick test: Required fields use a label or icon, not just a red border. Status uses text + color, not just color.

Audio that plays for more than 3 seconds can be paused or muted.

Quick test: Background audio has a stop/pause control.

Text has a contrast ratio of at least 4.5:1 (3:1 for large text).

Quick test: Use the thefrontkit color contrast checker on every text/background combo.

Text can be resized up to 200% without loss of content or functionality.

Quick test: Browser zoom to 200% — nothing should overflow or break.

Use real text instead of images of text whenever possible.

Quick test: No PNG/JPG buttons with text baked in.

Content reflows at 320 CSS pixels wide without horizontal scrolling.

Quick test: Resize browser to 320px wide — no horizontal scroll, no clipped content.

UI components and graphical objects have a contrast ratio of at least 3:1.

Quick test: Buttons, form borders, focus indicators, icons all have 3:1 against background.

Users can override line-height, paragraph spacing, letter spacing, and word spacing.

Quick test: Apply the WCAG text spacing bookmarklet — content should still be usable.

Hover/focus tooltips are dismissible, hoverable, and persistent.

Quick test: Hover triggers a tooltip — you can move your mouse onto it without it disappearing.

All functionality is available via keyboard.

Quick test: Unplug your mouse. Can you complete every task with Tab, Enter, Space, and arrow keys?

Keyboard focus can always be moved away from any component.

Quick test: Tab through every modal, dropdown, and widget. You should always be able to Tab/Esc out.

Single-key shortcuts can be turned off, remapped, or only active on focus.

Quick test: Single-letter shortcuts (e.g., "j" for next) only fire when an interactive element has focus.

Time limits can be turned off, adjusted, or extended.

Quick test: Session timeouts have a warning and a way to extend.

Moving, blinking, or scrolling content that lasts more than 5 seconds can be paused.

Quick test: Carousels, marquees, and animations have a pause button.

Nothing flashes more than 3 times per second.

Quick test: No strobe effects, rapid color changes, or flashing GIFs.

A skip link or landmark structure lets users skip repeated content.

Quick test: Tab from the top — first tab stop should be a "Skip to content" link.

Every page has a unique, descriptive <title>.

Quick test: Each page has a different <title> that describes its content.

Tab order matches the logical reading order.

Quick test: Tab through the page — focus should move predictably, not jump around.

Link text describes where the link goes (no "click here" or "read more" alone).

Quick test: Read every link out of context — does it still describe the destination?

There are multiple ways to find a page (nav menu, search, sitemap, etc.).

Quick test: Site has at least 2 of: navigation menu, search, sitemap, breadcrumbs, related links.

Headings and labels describe the topic or purpose.

Quick test: Read just the headings — does the page outline make sense?

Keyboard focus is visible.

Quick test: Tab through the page — every focused element has a visible outline or ring.

When an element receives focus, it is not entirely hidden by sticky headers, footers, or overlays.

Quick test: Tab through a long form — focused inputs should never be hidden behind a sticky bottom CTA.

Multi-point or path-based gestures have a single-pointer alternative.

Quick test: Pinch-to-zoom or swipe gestures have button alternatives.

Click actions fire on pointer up, not pointer down, so users can abort.

Quick test: Press and hold on a button, drag away, release — action should not fire.

The accessible name of a control includes its visible text.

Quick test: A button labeled "Save" has aria-label="Save" or accessible name "Save", not "Submit form".

Functions triggered by device motion (shake, tilt) have a UI alternative.

Quick test: Shake-to-undo also has an Undo button.

Drag-and-drop has a single-pointer alternative (e.g., click-to-select-then-click-to-place).

Quick test: Kanban boards, sortable lists, sliders all work without dragging.

Touch targets are at least 24x24 CSS pixels (with exceptions for inline links and equivalent options).

Quick test: Buttons, icon buttons, and tap targets are at least 24x24px (44x44px is the strong recommendation).

The page language is set via the lang attribute on <html>.

Quick test: <html lang="en"> (or appropriate language code).

Inline content in a different language is marked with lang on a parent element.

Quick test: A French quote in an English page is wrapped in <span lang="fr">...</span>.

Focusing an element does not trigger an unexpected context change (page change, popup, form submit).

Quick test: Tab through the page — nothing should auto-submit or auto-navigate just from focus.

Changing a form value does not trigger a context change unless the user is warned.

Quick test: Selecting a dropdown option should not auto-submit the form.

Navigation that appears on multiple pages is in the same place and order.

Quick test: Header nav links are in the same order on every page.

Components with the same function are labeled the same way.

Quick test: A "Search" icon is labeled "Search" everywhere, not "Find" on one page and "Lookup" on another.

Help mechanisms (chat, contact, FAQ) appear in the same relative order on every page where they exist.

Quick test: Help/Contact link is in the same place on every page.

Form errors are clearly identified and described in text.

Quick test: Submit an invalid form — errors are shown as text, not just red borders.

Form fields have visible labels or instructions.

Quick test: Every input has a <label>. Placeholders are not the only label.

When form errors occur, suggestions for fixing them are provided.

Quick test: Error messages say what to fix, not just that something is wrong.

Submissions that have legal or financial consequences can be reviewed, corrected, or reversed.

Quick test: Checkout has a review step. Account deletion has a confirmation.

Information previously entered in the same process is auto-filled or available to select.

Quick test: Multi-step checkout: shipping address auto-fills the billing address (or offers a "same as" checkbox).

Login does not require a cognitive function test (memorizing complex passwords, solving puzzles).

Quick test: Login supports password manager, copy/paste, and offers an alternative to CAPTCHAs.

Custom UI components expose name, role, and value to assistive technologies.

Quick test: Custom dropdowns, modals, and tabs have correct ARIA roles and states.

Status messages (success, errors, loading) are announced by screen readers without taking focus.

Quick test: Toast notifications use role="status" or aria-live="polite".