Free Interactive WCAG 2.2 Checklist

All non-text content has a text alternative that serves the equivalent purpose.

Use alt text on images, labels on form controls, text alternatives for media.

Alternatives provided for prerecorded audio-only and video-only content.

Provide transcripts for audio, text descriptions for video.

Captions provided for all prerecorded audio content in synchronized media.

Add closed captions or subtitles to videos.

An alternative for time-based media or audio description provided for prerecorded video.

Provide audio descriptions or a full text transcript.

Captions provided for all live audio content in synchronized media.

Use real-time captioning services for live events.

Audio description is provided for all prerecorded video content.

Add audio description track describing visual content.

Information and relationships conveyed through presentation are programmatically determinable.

Use semantic HTML (headings, lists, tables, landmarks).

The reading order is correct and meaningful when CSS is disabled.

Ensure DOM order matches visual order.

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

Use text labels alongside icons, color, or position.

Content does not restrict viewing to a single display orientation unless essential.

Ensure content works in both portrait and landscape.

The purpose of input fields collecting user information can be programmatically determined.

Use autocomplete attributes on form fields.

Color is not used as the only visual means of conveying information.

Combine color with text labels, patterns, or icons.

If audio plays for more than 3 seconds, there is a mechanism to pause/stop/control volume.

Add pause/mute controls. Never autoplay audio.

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

Use a contrast checker to verify foreground/background pairs.

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

Use relative units (rem, em, %). Avoid fixed pixel sizes for text.

Text is used to convey information rather than images of text (unless customizable or essential).

Use CSS and web fonts instead of text in images.

Content reflows at 320px width (400%) without horizontal scrolling.

Use responsive design. Avoid fixed-width containers.

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

Ensure borders, icons, and focus indicators meet 3:1.

Content adapts when text spacing is adjusted (line height, paragraph, letter, word spacing).

Avoid fixed heights on text containers. Use flexible layouts.

Hover/focus-triggered content is dismissible, hoverable, and persistent.

Make tooltips dismissible (Esc), hoverable, and not timeout-based.

All functionality is operable through a keyboard interface.

Ensure all interactive elements are keyboard accessible.

Keyboard focus can be moved away from any component using standard keys.

Ensure focus is never trapped. Provide escape mechanisms for modals.

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

Require modifier keys or allow users to disable shortcuts.

Users can turn off, adjust, or extend time limits.

Warn before timeout. Allow extension or turn-off.

Moving, blinking, or auto-updating content can be paused, stopped, or hidden.

Add pause controls. Respect prefers-reduced-motion.

Nothing flashes more than three times per second.

Avoid flashing content. Check animation rates.

A mechanism is available to bypass blocks of repeated content.

Add skip-to-content links. Use landmark regions.

Web pages have descriptive, informative titles.

Use unique, descriptive <title> elements.

Focusable components receive focus in a meaningful order.

Ensure tab order follows visual/logical flow.

The purpose of each link can be determined from the link text or context.

Use descriptive link text. Avoid "click here" or "read more" alone.

More than one way is available to locate a page (sitemap, search, nav).

Provide site search, sitemap, and consistent navigation.

Headings and labels describe topic or purpose.

Write clear, descriptive headings and form labels.

Any keyboard operable UI has a visible focus indicator.

Ensure focus outlines are visible. Never hide focus styles globally.

Focused element is not entirely hidden by other content.

Manage z-index and scroll to keep focused elements visible.

Multipoint or path-based gestures have single-pointer alternatives.

Provide button alternatives for swipe, pinch, and drag gestures.

Functions triggered on pointer down can be aborted or undone.

Use click (up) events, not mousedown. Allow drag cancellation.

Accessible name contains the visible label text.

Ensure aria-label includes the visible text of the element.

Functionality triggered by motion can also be operated by UI components and can be disabled.

Provide button alternatives for shake or tilt actions.

Functionality requiring dragging has a single-pointer alternative.

Provide click-based alternatives for drag-and-drop.

Touch/click targets are at least 24x24 CSS pixels (with exceptions).

Make buttons and links at least 24x24px or add spacing.

The default human language of each page is programmatically determinable.

Set lang attribute on the <html> element.

Language of each passage or phrase can be programmatically determined.

Use lang attribute on elements with different language content.

Receiving focus does not initiate a change of context.

Never auto-submit forms or navigate on focus.

Changing a UI component does not automatically cause a change of context unless user is advised beforehand.

Use submit buttons. Warn before auto-redirects.

Navigation mechanisms occurring repeatedly are in the same relative order.

Keep nav menus in the same position across pages.

Components with the same functionality are identified consistently.

Use the same labels/icons for the same actions site-wide.

Help mechanisms are in a consistent location across pages.

Place help links or chat in the same position on every page.

Input errors are detected and described to the user in text.

Show inline error messages next to the field.

Labels or instructions are provided when content requires user input.

Use visible <label> elements for all form fields.

If an input error is detected, suggestions for correction are provided (unless security risk).

Show specific fix suggestions (e.g., "Email must include @").

Submissions that cause legal or financial commitments are reversible, verified, or confirmed.

Add confirmation step before checkout or data deletion.

Information previously entered by the user is auto-populated or selectable unless essential to re-enter.

Pre-fill shipping from billing. Use autocomplete attributes.

Authentication does not require cognitive function tests (unless alternative provided).

Support copy-paste in password fields. Allow password managers.

All UI components have accessible names, roles, and states that are programmatically determinable.

Use native HTML elements. Add ARIA attributes when needed.

Status messages can be programmatically determined without receiving focus.

Use role="status" or aria-live="polite" for dynamic updates.