Documentation

Everything you need to ship accessible apps.

Guides, API references, and examples for AccessKit's provider, dev tool, and accessibility widget.

Start with a guide

Introduction

Understand how AccessKit's three layers fit together and when to use each one.

Installation

Install the package and configure it for Next.js, Remix, Vite, or any React project.

Dev Tool

Add the floating devtools panel for real-time accessibility auditing in development.

Widget

Drop in the accessibility widget so your site users can control their experience.

Quick Start

Get from zero to a fully integrated AccessKit setup in four steps.

bash

npm install @access-kit/react

API Reference

AccessKitProvider

Root context provider. Wraps your entire application.

defaultSettings?storageKey?persist?focusColor?onPersistError?children

AccessKitDevTools

Floating devtools panel for accessibility audits.

routeKeydefaultOpen?position?additionalRules?zIndex?

AccessibilityWidget

End-user floating accessibility control panel.

initialPosition?style?defaultOpen?zIndex?

Hook to access and update accessibility settings from any component.

settingssetSettingtoggleSettingsetFontSizesetLetterSpacingsetWordSpacingsetLineHeightresetSettings

Code examples

Auditing in CI

Run headless accessibility audits in GitHub Actions or any CI pipeline so regressions block merges.

Programmatic Audits

Call runAccessibilityAudit from tests or scripts without the DevTools UI.

Custom Reporting

Format findings with formatAuditFindingsForConsole or build your own reports from AccessKitAuditFinding.

WCAG Coverage

AccessKit audits against WCAG 2.0, 2.1, and 2.2 success criteria at Levels A, AA, and AAA by default. Below is a small summary of commonly flagged rules.

1.1.1

Non-text Content

Level A

All images must have alt text.

1.4.3

Contrast (Minimum)

Level AA

Text contrast ratio must meet 4.5:1.

2.1.1

Keyboard

Level A

All functionality accessible via keyboard.

2.4.7

Focus Visible

Level AA

Keyboard focus indicators must be visible.

3.1.1

Language of Page

Level A

lang attribute must be set on the html element.

4.1.2

Name, Role, Value

Level A

All interactive elements must have accessible names.