Accessibility widget for React

A React single-page app renders most of its UI in the browser, so accessibility controls need to be present no matter which route the user lands on. ClearPath loads once at the document level and stays available as your components mount and unmount.

You do not wire it into your component tree or manage it in state. You add one script tag to the HTML shell that hosts your app, and ClearPath attaches itself, giving visitors 8 disability profiles and 25 tools across the whole experience.

How to add ClearPath to React

  1. Open the HTML shell for your app: public/index.html in a Create React App project, or index.html at the project root in a Vite project.
  2. Paste the ClearPath snippet just before the closing body tag, after the div where React mounts, so it loads on every route.
  3. Rebuild the app with your production build command, such as npm run build.
  4. Deploy the updated build to your host and confirm the widget appears after client-side navigation between routes.

Where React apps usually run into accessibility trouble

  • Custom components built with div and span elements often skip the ARIA roles and keyboard handlers that native HTML elements get for free, so a button built from a styled div may not respond to Enter or Space at all.
  • Client-side routing with React Router swaps out page content without moving focus or announcing the change, so screen reader users stay parked on the old heading while the new route has already loaded.
  • State-driven modals and dropdowns built with conditional rendering frequently mount without trapping focus, letting keyboard users tab straight through to content hidden behind the overlay.
  • Form libraries like Formik or React Hook Form validate on state changes but often update error text visually without pushing it into an aria-live region, so screen reader users submit the form again without ever hearing what went wrong.

Why React sites choose ClearPath

  • One tag in the HTML shell covers every route, so you never add it inside individual components.
  • ClearPath runs outside React's render cycle, so route changes and re-renders do not remove it.
  • The defer attribute keeps the script from blocking your JavaScript bundle from loading.
  • Per-site analytics show which tools your users open, without you adding any tracking code of your own.

Questions

Why the HTML shell and not a component?

Putting the tag in public/index.html or the Vite index.html means it loads once for the whole app and is not tied to any route or component lifecycle, so it stays available everywhere.

Will it still work when users navigate client-side?

Yes. Because the script loads at the document level and not per route, it persists through client-side navigation. There is no full page reload, so the widget stays mounted.

Does adding the widget make my React app compliant?

No. ClearPath gives visitors 25 adjustment tools, 8 disability profiles, support for 14 languages, and generates an accessibility statement from a live scan of your app. What it does not do is rewrite the JSX in your components, add missing ARIA attributes to your custom elements, or fix focus handling in your routes and modals. Those live in your component code and only your team can change them. No widget, on React or any other platform, makes a site compliant by itself.