Skip to main content

Automatic Accessibility for React

Wrap your app in <A11yer> and accessibility is automatically handled. No hooks, no props to spread, no components to replace.

import { A11yer } from "a11yer";

function App() {
  return (
    <A11yer>
      <YourApp />
    </A11yer>
  );
}
bun add a11yer    # npm i a11yer / pnpm add a11yer / yarn add a11yer

What it does

Images

Alt text from filename (Title Case), decorative detection, SVG aria-hidden

Forms

aria-required, aria-invalid + error linking, input labels, autocomplete

Keyboard

Enter/Space on div[role=button], roving tabindex for tabs/menus/toolbars

Focus

Focus trap for modals, focus-visible CSS, focus restoration on close

Contrast

Auto-fix insufficient contrast via CSS override (hex/rgb/hsl/oklch)

Navigation

Skip link, SPA route announcements, document title from h1

Tables

scope=col/row on th elements

Motion

prefers-reduced-motion CSS injection

Live Demo

This page is wrapped in <A11yer>. The elements below have deliberate a11y issues that are automatically fixed.

Image without alt

a11yer derives alt from the filename: "Mountain Landscape"

Form: auto labels + autocomplete

Email
Name

Table: auto scope

FeatureStatus
Alt textAuto
Focus trapAuto

Keyboard: div[role=button]

a11yer adds tabindex=0 and Enter/Space handler.

Click or press Enter

Roving tabindex: tablist

Arrow keys navigate between tabs. Only the active tab is in the tab order. a11yer manages tabindex automatically.

a11yer wraps your React app and automatically patches accessibility issues in the DOM.

Configuration

<A11yer
  config={{
    a11y: {
      minContrastRatio: 7,        // WCAG AAA (default: 4.5)
      focusVisible: true,          // default: true
      reducedMotion: "auto",       // "auto" | "always" | "never"
      autoImgAlt: true,            // default: true
      announceSpaNavigation: true, // default: true
      autoContrastFix: true,       // default: true
    },
  }}
>
  <App />
</A11yer>

Plays nice with others

a11yer detects elements managed by existing libraries and skips them. No conflicts.

Radix UIreact-ariaHeadless UIMUIChakra UIMantineAnt Designshadcn/uiArk UINextUI

Disclaimer: a11yer automatically fixes many common accessibility issues, but does not guarantee full WCAG 2.2 compliance. Use it as a safety net alongside manual a11y audits and screen reader testing.