Complete WCAG 2.2 Checklist for 2026
A comprehensive checklist covering every WCAG 2.2 Level A and Level AA success criterion. For each criterion, learn what to check and how to fix issues to make your website fully accessible and legally compliant.
Why WCAG 2.2 Compliance Matters in 2026
Web accessibility is no longer just a best practice — it is a legal requirement in most jurisdictions. The European Accessibility Act (EAA) takes full effect in June 2025, requiring all digital products and services sold in the EU to meet WCAG 2.1 Level AA as a minimum. In the United States, the DOJ has affirmed that ADA applies to websites, with WCAG 2.2 as the benchmark standard. Lawsuits continue to increase year over year, with over 4,500 web accessibility cases filed in the US alone in 2025.
WCAG 2.2, released in October 2023, adds nine new success criteria focused on improving accessibility for users with cognitive and learning disabilities, users with low vision, and mobile device users. This checklist covers all Level A and Level AA criteria you need to meet.
Use the FixMyWeb accessibility scanner to automatically check your website against these criteria, or browse the accessibility guide for detailed implementation tutorials.
The Four Principles of WCAG
WCAG is organized around four core principles, known by the acronym POUR: Perceivable, Operable, Understandable, and Robust. Every success criterion falls under one of these principles. Understanding the principles helps you internalize the “why” behind each requirement.
Complete Checklist: All Level A & AA Criteria
Below is every WCAG 2.2 Level A and Level AA success criterion with practical guidance. Use this as your reference when auditing your website or building new features.
What to check: All images, icons, charts, and non-text content have meaningful alt text. Decorative images use empty alt attributes.
How to fix: Add descriptive alt text to informative images. Use alt="" and role="presentation" for decorative images. Ensure complex images like charts have long descriptions.
What to check: Pre-recorded audio has a text transcript. Pre-recorded video-only has a text or audio alternative.
How to fix: Provide transcripts for all audio content. Add audio descriptions or text alternatives for video-only content.
What to check: All pre-recorded video with audio has synchronized captions.
How to fix: Add closed captions using WebVTT or SRT files. Ensure captions are accurate, synchronized, and include speaker identification.
What to check: Pre-recorded video has audio descriptions or a full text alternative.
How to fix: Add an audio description track that narrates important visual content not conveyed through the main audio.
What to check: Audio description is provided for all pre-recorded video content.
How to fix: Create a separate audio track describing visual elements. Use the HTML5 track element with kind="descriptions".
What to check: Structure and relationships conveyed visually are also available programmatically. Headings, lists, tables, and form labels use correct HTML.
How to fix: Use semantic HTML: h1-h6 for headings, ul/ol for lists, table/th/td for data tables. Associate labels with form controls using for/id or wrapping.
What to check: The reading order in the DOM matches the visual presentation order.
How to fix: Ensure the HTML source order follows the logical reading sequence. Avoid using CSS to reorder content in ways that break the logical flow.
What to check: Instructions do not rely solely on shape, size, visual location, orientation, or sound.
How to fix: Supplement visual cues with text labels. Instead of "click the round button," use "click the Submit button (round icon on the right)."
What to check: Content is not restricted to a single display orientation (portrait or landscape).
How to fix: Remove CSS or JavaScript that locks the page to a specific orientation. Use responsive design that adapts to both orientations.
What to check: Form fields collecting personal data use the correct autocomplete attribute.
How to fix: Add autocomplete attributes to form fields: autocomplete="name", autocomplete="email", autocomplete="tel", etc.
What to check: Color is not the only visual means of conveying information, indicating an action, or distinguishing elements.
How to fix: Add text labels, patterns, or icons alongside color indicators. Error states should use both red color AND an error icon or text.
What to check: Audio that plays automatically for more than 3 seconds has controls to pause, stop, or adjust volume.
How to fix: Add visible play/pause controls. Better yet, do not autoplay audio. If autoplay is required, provide a prominent mute button.
What to check: Text has a contrast ratio of at least 4.5:1 against its background. Large text (18pt+ or 14pt+ bold) needs at least 3:1.
How to fix: Adjust text or background colors to meet minimum contrast ratios. Use a contrast checker tool to verify all color combinations.
What to check: Text can be resized up to 200% without loss of content or functionality.
How to fix: Use relative units (rem, em, %) instead of fixed pixels for font sizes. Test by zooming the browser to 200%.
What to check: Text is used instead of images of text, except for logos or essential artistic purposes.
How to fix: Replace images of text with actual styled text using CSS. Use web fonts for custom typography.
What to check: Content reflows at 320px wide (400% zoom on 1280px) without horizontal scrolling or loss of information.
How to fix: Use responsive design with flexbox or CSS grid. Avoid fixed-width containers. Test at 320px viewport width.
What to check: UI components and graphical objects have a contrast ratio of at least 3:1 against adjacent colors.
How to fix: Ensure form field borders, icons, chart elements, and interactive controls have sufficient contrast against their backgrounds.
What to check: Content adapts when users override text spacing (line height 1.5x, paragraph spacing 2x, letter spacing 0.12em, word spacing 0.16em).
How to fix: Avoid fixed-height containers for text content. Use flexible layouts that accommodate increased spacing without clipping or overlap.
What to check: Content that appears on hover or focus is dismissible, hoverable, and persistent.
How to fix: Tooltips and popups should be dismissible with Escape, the pointer should be able to hover over the new content, and it should remain visible until dismissed.
What to check: All functionality is operable through a keyboard interface without requiring specific timings.
How to fix: Ensure all interactive elements are focusable and operable with keyboard. Use button elements for actions, links for navigation.
What to check: Keyboard focus can be moved away from any component using standard navigation keys.
How to fix: Ensure modals and custom widgets allow Tab and Shift+Tab navigation out of the component. Implement proper focus trapping only for modal dialogs.
What to check: Single-character keyboard shortcuts can be turned off, remapped, or are only active when the component has focus.
How to fix: Avoid single-key shortcuts (like "s" for search). If used, allow users to remap or disable them in settings.
What to check: Time limits can be turned off, adjusted, or extended by the user.
How to fix: Allow users to extend session timeouts. Provide a warning at least 20 seconds before time expires with an option to extend.
What to check: Moving, blinking, or auto-updating content can be paused, stopped, or hidden.
How to fix: Add pause controls for carousels, animations, and auto-scrolling content. Respect prefers-reduced-motion media query.
What to check: No content flashes more than three times per second.
How to fix: Reduce flash frequency below 3 Hz. Limit the flashing area. Provide a warning before displaying potentially triggering content.
What to check: A mechanism exists to bypass blocks of content repeated across pages (skip navigation links).
How to fix: Add a "Skip to main content" link as the first focusable element on every page. Use landmark roles (main, nav, aside).
What to check: Web pages have descriptive, unique titles.
How to fix: Provide unique, descriptive title elements that identify the page purpose and site name.
What to check: Focusable components receive focus in a sequence that preserves meaning and operability.
How to fix: Ensure DOM order matches visual order. Avoid positive tabindex values. Manage focus programmatically for dynamic content.
What to check: The purpose of each link can be determined from the link text alone or with its surrounding context.
How to fix: Use descriptive link text instead of "click here" or "read more". Add aria-label if the visible text is insufficient.
What to check: More than one way is available to find a page (navigation, search, site map).
How to fix: Provide at least two navigation mechanisms: main navigation plus search, sitemap, or breadcrumbs.
What to check: Headings and labels describe the topic or purpose of the content.
How to fix: Write clear, descriptive headings. Form labels should clearly indicate what information is expected.
What to check: Keyboard focus indicator is visible on all interactive elements.
How to fix: Ensure focus styles are visible with sufficient contrast. Do not remove outline styles without providing an alternative focus indicator.
What to check: The focused element is not entirely hidden by other content (sticky headers, footers, modals).
How to fix: Use scroll-padding-top to account for sticky headers. Ensure modals do not obscure focused elements behind overlays.
What to check: Multipoint or path-based gestures have single-pointer alternatives.
How to fix: Provide button alternatives for pinch-to-zoom, swipe, and drag gestures. Map and slider components should have click/tap alternatives.
What to check: Actions triggered by pointer down events can be aborted or undone.
How to fix: Use click/mouseup events instead of mousedown. Allow users to move the pointer away before releasing to cancel the action.
What to check: The accessible name of UI components contains the visible text label.
How to fix: Ensure aria-label values include the visible text. The accessible name should match or contain the visible label.
What to check: Functionality triggered by device motion has UI alternatives and can be disabled.
How to fix: Provide on-screen controls for any motion-activated features (like shake to undo). Allow users to disable motion activation.
What to check: Drag-and-drop functionality has a single-pointer alternative that does not require dragging.
How to fix: Add click-to-select and click-to-place alternatives for drag operations. Provide arrow buttons or dropdown menus for reordering.
What to check: Interactive targets are at least 24x24 CSS pixels, or have sufficient spacing.
How to fix: Increase tap/click target sizes to at least 24x24px. Add padding if the visual element is smaller. Ensure adequate spacing between targets.
What to check: The default language of each page is programmatically determined.
How to fix: Add the lang attribute to the html element: <html lang="en">.
What to check: Language changes within content are programmatically identified.
How to fix: Add lang attributes to elements containing text in a different language: <span lang="fr">Bonjour</span>.
What to check: Receiving focus does not trigger an unexpected change of context.
How to fix: Do not auto-submit forms, open new windows, or redirect on focus. Changes should only happen on explicit user action.
What to check: Changing a form control does not automatically trigger an unexpected change of context.
How to fix: Do not auto-submit forms when a select option changes. Provide explicit submit buttons. If auto-submission is needed, warn users first.
What to check: Navigation mechanisms appear in the same relative order across pages.
How to fix: Keep navigation menus, search bars, and utility links in the same position on every page. Use consistent ordering.
What to check: Components with the same functionality are identified consistently across pages.
How to fix: Use the same labels, icons, and alt text for identical functions throughout the site. A search icon should always be labeled "Search."
What to check: Help mechanisms appear in the same relative location across pages.
How to fix: Place help links, contact information, or chat widgets in a consistent location (e.g., always in the footer or header).
What to check: Input errors are automatically detected and described to the user in text.
How to fix: Display clear error messages near the invalid field. Use aria-describedby to associate error messages with form controls.
What to check: Labels or instructions are provided when user input is required.
How to fix: Add visible labels to all form fields. Include format hints for date, phone, and other structured inputs.
What to check: When an input error is detected, suggestions for correction are provided (if known).
How to fix: Provide specific correction suggestions: "Email must include @" instead of just "Invalid email."
What to check: For pages with legal, financial, or data-altering submissions, actions are reversible, verified, or confirmed.
How to fix: Add confirmation dialogs before financial transactions. Allow users to review and edit submissions before final submission.
What to check: Information previously entered by the user is auto-populated or available to select in subsequent steps.
How to fix: Pre-fill form fields with previously entered data. Use autocomplete and store user inputs across multi-step forms.
What to check: Authentication does not require cognitive function tests (like CAPTCHA puzzles) unless alternatives are provided.
How to fix: Support password managers by not blocking paste. Offer authentication alternatives like magic links, passkeys, or OAuth.
What to check: All UI components have accessible names, roles, states, and properties programmatically set.
How to fix: Use semantic HTML elements (button, input, select). For custom components, add ARIA roles, states, and properties.
What to check: Status messages are programmatically announced to assistive technologies without receiving focus.
How to fix: Use aria-live="polite" for non-urgent status updates and aria-live="assertive" for critical alerts. Use role="alert" for error messages.
Automated vs. Manual Testing
Automated tools can catch roughly 30-40% of WCAG issues — primarily those related to missing alt text, color contrast, missing form labels, and invalid HTML structure. The remaining 60-70% require manual review, including keyboard navigation testing, screen reader testing, and cognitive assessment.
Start with an automated scan to identify the low-hanging fruit, then follow up with manual keyboard testing (Tab through your entire site) and screen reader testing (NVDA on Windows, VoiceOver on Mac).
Creating Your Accessibility Statement
An accessibility statement demonstrates your commitment to accessibility and is required under many regulations. It should describe your conformance level, known limitations, and how users can request assistance or report issues. Use the statement generator to create a legally compliant accessibility statement for your website.
Conclusion
WCAG 2.2 Level AA compliance is achievable for any website with systematic effort. Use this checklist as your roadmap: start with the automated checks, address the critical Level A criteria first, then work through Level AA requirements. Remember that accessibility is not a one-time project but an ongoing commitment. Regular testing, training, and monitoring are essential to maintaining compliance as your website evolves.
Ready to start? Scan your website now to get an instant accessibility report, explore the implementation guide for step-by-step tutorials, or generate a compliant accessibility statement for your organization.