WCAG 2.2 AA — EAA Compliant

A living library of ARIA-ready components that drop into any React, Vue, or Svelte codebase — WCAG 2.2 AA out of the box. No retrofitting. No audit panic.

3,200+
Engineers using Access
84
ARIA-ready components
100%
WCAG 2.2 AA pass rate
The Library

84 components. Every one AA.

From a single button to a full data table — every component ships with complete ARIA attributes, keyboard support, and screen reader announcements.

Atomic

Buttons, inputs, toggles — the six most common WCAG failure points, solved.

AA ✓ 100

Button

ReVuSv

Focus ring, contrast 7:1, keyboard Enter/Space

role="button"
$npm i @access/button
disabled
AA ✓ 100

Toggle Switch

ReVuSvHT

ARIA checked state, live region announcement

role="switch"
$npm i @access/toggle
AA ✓ 100

Text Input

ReVuSv

Required indicator, error states, label linking

aria-label + aria-describedby
$npm i @access/input
AA ✓ 100

Checkbox

ReVuSvHT

Indeterminate state, group labeling, keyboard

role="checkbox"
$npm i @access/checkbox
100
/100
AA ✓ 100

Select / Dropdown

ReVuSv

Arrow key navigation, type-ahead, ARIA expanded

role="listbox"
$npm i @access/select
100
/100
AA ✓ 100

Icon Button

ReVuSv

Visible label fallback, tooltip on focus

aria-label (required)
$npm i @access/icon-button

Molecular

Modals, date pickers, command palettes — complex interactions, zero ARIA debt.

100
/100
AA ✓ 100

Modal / Dialog

ReVuSv

Focus trap, Escape to close, scroll lock, return focus

role="dialog" aria-modal
$npm i @access/modal
100
/100
AA ✓ 100

Date Picker

ReVu

Full keyboard calendar navigation, screen reader dates

role="grid" + live region
$npm i @access/datepicker
100
/100
AA ✓ 100

Command Palette

ReVuSv

Live search results, aria-activedescendant

role="combobox" aria-haspopup
$npm i @access/command
100
/100
AA ✓ 100

Tooltip

ReVuSvHT

Hover + focus trigger, 1.5s delay, keyboard dismiss

role="tooltip" aria-describedby
$npm i @access/tooltip
AA ✓ 100

Tabs

ReVuSv

Arrow key switching, aria-selected, panel linking

role="tablist/tab/tabpanel"
$npm i @access/tabs

Patterns

Data tables, navigation drawers, full-page flows — enterprise-grade accessibility.

100
/100
AA ✓ 100

Data Table

ReVu

Sortable columns, row selection, sticky header

role="grid" + aria-sort
$npm i @access/table
100
/100
AA ✓ 100

Navigation Drawer

ReVuSv

Focus trap on open, landmark roles, skip links

role="navigation" aria-expanded
$npm i @access/nav-drawer
100
/100
AA ✓ 100

Notification Toast

ReVuSvHT

Auto-dismiss with pause on hover/focus, SR announce

role="alert" aria-live="polite"
$npm i @access/toast
The Stakes

Inaccessibility is now a liability.

The European Accessibility Act went into enforcement June 2025. ADA lawsuits hit 4,000+ in 2024. Federal procurement requires Section 508. The question isn't whether — it's when.

0+
ADA lawsuits in 2024
Driven by NY and CA courts. Average settlement: $25,000–$100,000.
0×
Remediation cost multiplier
Fixing inaccessible code post-launch costs 3–5× more than building it right.
0%
Errors from 6 failure types
Fix buttons, inputs, toggles, links, alt text, and contrast — done.

European Accessibility Act

Enforcement: June 28, 2025

Any digital service offered to EU consumers must prove WCAG 2.1 AA conformance or face six-figure fines and product withdrawal.

Section 508 / Federal Procurement

Required for all US federal ICT

The very first line in federal RFPs: "Attach your VPAT." No compliance means no contract — a multi-billion dollar market locked out.

ADA Digital Enforcement

4,000+ lawsuits in 2024

Courts consistently rule that websites and apps are places of public accommodation. Inaccessible = discriminatory.

Live Contrast Checker

Sample Text Preview
0:1
✗ Fail
AA Large
3:1
✗ Fail
AA Normal
4.5:1
✗ Fail
AAA
7:1
Works Everywhere

One API. Four frameworks.

Consistent component behavior and identical ARIA patterns across React, Vue, Svelte, and plain HTML.

Install
npm install @access/react
Usage
import { Toggle, Button, Modal } from '@access/react';

// Toggle with full ARIA support
function NotificationsToggle() {
  const [enabled, setEnabled] = useState(false);

  return (
    <Toggle
      checked={enabled}
      onChange={setEnabled}
      label="Email notifications"
      aria-describedby="notif-desc"
    />
  );
}

// Modal with focus trap + Escape
<Modal
  open={isOpen}
  onClose={() => setIsOpen(false)}
  title="Confirm action"
  aria-describedby="modal-desc"
>
  <p id="modal-desc">This cannot be undone.</p>
  <Button variant="danger">Delete</Button>
</Modal>

Design Tokens

--ac-focus-ring
Focus ring
0 0 0 3px #7B5EFF
--ac-color-primary
Primary action
#7B5EFF
--ac-contrast-min
AA ratio
4.5
--ac-touch-target
Min touch
44px
--ac-motion-duration
Animation
200ms
--ac-font-mono
Code font
JetBrains Mono

Built-in WCAG 2.2

Logical focus order
Color-contrast tokens
prefers-reduced-motion
Keyboard parity
24×24px touch targets
ARIA live regions
From the Trenches

Engineers who shipped on deadline.

Section 508
"Got a Section 508 compliance ticket on a Thursday. Had every component swapped and our VPAT drafted by Monday. Access saved a $2.4M federal contract."
Marcus Webb, Senior Front-End Engineer at Sentinel Systems
Marcus Webb
Senior Front-End Engineer · Sentinel Systems
Design System
"We were building our design system from scratch. Access gave us WCAG 2.2 tokens, focus ring specs, and 84 tested primitives on day one. Saved six months of audit work."
Priya Nair, Design System Lead at Meridian Health
Priya Nair
Design System Lead · Meridian Health
EAA Compliance
"Our SaaS was being evaluated by a German municipality. The procurement team asked for a VPAT on a Tuesday. Access components already had one. Contract signed Friday."
Thomas Richter, Product Manager at Workframe GmbH
Thomas Richter
Product Manager · Workframe GmbH
Screen Reader
"The screen reader transcripts in each component card sold our accessibility team in 10 minutes. Every component announces exactly what it should. No surprises."
Aaliya Osei, Accessibility Engineer at Finclusive
Aaliya Osei
Accessibility Engineer · Finclusive
Vue
"Dropped @access/modal into our Vue app in 15 minutes. Focus trap, Escape key, aria-modal, return focus — all just worked. Our axe audit went from 47 violations to 0."
Sam Kowalski, Full-Stack Engineer at Loomis.io
Sam Kowalski
Full-Stack Engineer · Loomis.io
Pricing

Copy a component. Then upgrade.

Immediate value before signup. Account creation feels like upgrading access — not gating it.

MonthlyAnnualSave 20%
Free
$0
forever
Start building tonight.
  • 20 ARIA-ready components
  • React + HTML support
  • WCAG 2.2 AA guaranteed
  • npm install access
  • Community Discord
  • Basic design tokens
Start Building Free
ProMost Popular
$29
per seat / month
For teams shipping under compliance deadlines.
  • All 84 components
  • React + Vue + Svelte + HTML
  • WCAG 2.2 AA + Section 508
  • Auto-generated VPAT
  • Priority Slack support
  • Full token system (120+)
  • Figma component library
  • CI/CD axe integration
Start 14-Day Trial
Enterprise
Custom
volume licensing
For orgs in federal procurement.
  • Everything in Pro
  • Custom VPAT generation
  • Legal review support
  • Dedicated CSM
  • SLA 99.9% uptime
  • Private npm registry
  • Audit trail & reporting
Contact Sales
✓ No credit card for Free tier✓ Cancel anytime✓ VPAT included on Pro+✓ MIT licensed components