React EN 301 549 Checker

EN 301 549 for React Sites

EN 301 549 is the European standard for accessible information and communication technology. For websites, its clause 9 reuses WCAG: version 3.2.1 uses WCAG 2.1 Level AA, and version 4.1.1, published in September 2026 for the European Accessibility Act, uses WCAG 2.2 Level AA.

The European Accessibility Act has applied to e-commerce and other consumer services since June 28, 2025, wherever the business is based. This checker runs the scan with the EN 301 549 preset, which tests the WCAG 2.1 AA web requirements. Run the React WCAG 2.2 checker as well to cover version 4.1.1.

For React apps serving EU users, EN 301 549 also has clauses for software. Scan the rendered pages here and add accessibility tests to your components and release process.

Who Should Run the React EN 301 549 Checker

• React businesses that sell products or services to consumers in the EU.
• Public sector bodies in the EU running a site on React.
• Vendors selling software or services to EU public bodies.
• Non-EU companies with EU customers, since the EAA follows the customer.

EN 301 549 Requirements to Check on React

• 1.4.10 Reflow

  Pages must reflow on a narrow screen without scrolling in two directions.

• 1.4.11 Non-text Contrast

  Controls, icons and focus indicators need 3:1 contrast.

• 3.1.1 Language of Page

  Each page must declare its language, which matters on multilingual EU sites.

• 3.3.2 Labels or Instructions

  Form fields, including checkout and consent forms, need visible labels or instructions.

• 4.1.2 Name, Role, Value

  Custom controls such as cookie consent switches need a name, role and state.

• 4.1.3 Status Messages

  Status messages, such as cart updates and form errors, must be announced.

Where React Sites Usually Fail EN 301 549

These problems come up again and again on React sites, and each one fails EN 301 549. 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, EN 301 549 failures. Check these yourself after the scan:

1. Check every language version, including the page language setting (3.1.1).
2. Test the cookie consent banner with a keyboard and screen reader.
3. Publish accessibility information for your service, as the EAA requires.
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

• EN 301 549 CheckerThe EN 301 549 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 EN 301 549 Checker: Frequently Asked Questions