React WCAG 2.2 Checker

WCAG 2.2 for React Sites

WCAG 2.2 became a W3C Recommendation in October 2023. It keeps every WCAG 2.1 requirement except 4.1.1 Parsing and adds six success criteria at Level A and AA, mostly about people with low vision, motor disabilities and cognitive disabilities. A React site that meets WCAG 2.2 AA also meets 2.1 AA and 2.0 AA.

This checker runs the same free scan as the React accessibility checker with the WCAG 2.2 AA preset, so the results include the 2.2 rules that automated testing can check.

In React apps, WCAG 2.2 issues usually live in custom components: drag-and-drop interfaces without a button alternative, compact icon buttons, and authentication flows that block paste or use puzzles. Add the 2.2 rules to your component tests.

Who Should Run the React WCAG 2.2 Checker

• React site owners who want the most current, future-proof target.
• Teams redesigning a React site, where adopting the latest version costs little extra.
• Organizations selling into the EU, where EN 301 549 V4.1.1 now uses WCAG 2.2.
• Anyone preparing for new rules, which tend to adopt the latest WCAG version.

The New WCAG 2.2 Criteria to Check on React

• 2.4.11 Focus Not Obscured (Minimum)

  Sticky headers, cookie banners and chat widgets must not completely hide the element that has keyboard focus.

• 2.5.7 Dragging Movements

  Anything that works by dragging, such as sliders, carousels and sortable lists, needs a single-pointer alternative.

• 2.5.8 Target Size (Minimum)

  Buttons and links need a target of at least 24 by 24 CSS pixels, or enough space around them. Icon buttons and pagination links often fail.

• 3.2.6 Consistent Help

  Help such as a contact link or chat must appear in the same place on every page that has it.

• 3.3.7 Redundant Entry

  Do not ask for the same information twice in one process, such as shipping and billing addresses, without offering to fill it in.

• 3.3.8 Accessible Authentication (Minimum)

  Sign-in must not depend on a cognitive test, such as remembering a password without paste support or solving a puzzle.

Where React Sites Usually Fail WCAG 2.2

These problems come up again and again on React sites, and each one fails WCAG 2.2. The React accessibility checker explains how to fix them in React.

• Clickable divs and spans. Elements with an onClick handler but no button or link semantics cannot be reached with Tab or activated with Enter and Space, and are not announced as controls.
• Inputs without labels. Fields that use placeholder text, or a label that is not connected with htmlFor, have no reliable accessible name.
• Focus after updates. When a route changes, a modal opens or an item is deleted, focus stays on an element that no longer exists unless the app moves it deliberately.
• Silent updates. Results lists, toasts, form errors and loading indicators change on screen without a live region or other announcement.
• Wrapper divs breaking structure. Extra wrapper elements around list items, table rows and definition lists, added to satisfy JSX, break the semantics. Fragments avoid them.

Worried about ADA claims as well? The React ADA compliance checker covers the React risks behind most complaints.

What to Test by Hand on React

Automated testing finds many, but not all, WCAG 2.2 failures. Check these yourself after the scan:

1. Tab through each page and check the focused element is never fully covered by sticky content (2.4.11).
2. Try every drag interaction with a single click or tap instead (2.5.7).
3. Sign in with a password manager and check paste works (3.3.8).
4. Rescan after each fix. Continuous monitoring rescans up to 500 URLs per domain daily and keeps a dated record in the Compliance Vault.

Start 3-day free trial

Related Guides

• WCAG 2.2 AA CheckerThe WCAG 2.2 standard in full, for any website.
• WCAG 4.1.2 Name, Role, Value Explained in Plain EnglishWCAG 4.1.2 Name, Role, Value explained simply: give every control a name, role and state with native HTML and ARIA, with code examples and how to test.
• WCAG 3.3.2 Labels or Instructions Explained in Plain EnglishWCAG 3.3.2 Labels or Instructions explained simply: visible labels, format hints, grouped fields and required markers, with code examples and a test routine.
• Automated vs Manual Accessibility Testing: Where Each FitsWhat automated accessibility testing catches, what needs a human, and how to combine both into a repeatable process for finding and fixing WCAG issues.
• WCAG Success Criteria LibraryLook up any criterion the scan flags, in plain language.

React WCAG 2.2 Checker: Frequently Asked Questions