AccessKit

Core Concepts

Context & Hooks

How AccessKit exposes state via React context and the useAccessKit hook for reading and updating accessibility settings in your components.

3 min read

AccessKit keeps user preferences (reduced motion, high contrast, focus indicators, text spacing, font size, color vision mode, and more) in a single React context. The provider supplies that context; any component inside it can read or update settings with the useAccessKit hook. This page explains the context, the hook, and typical usage.


The AccessKit context

AccessKitProvider wraps your app and creates a context whose value includes the current settings and functions to change them. The provider also applies those settings to the document (e.g. `data-accesskit-*` attributes and CSS custom properties on `<html>`), so the whole app responds to user choices. Only components rendered inside AccessKitProvider can access this context.


useAccessKit

useAccessKit() is the only public hook. It returns the same object the context provides: current settings plus updater functions. You must call it from a component that is a descendant of AccessKitProvider; otherwise, it throws an error.


The return value includes:

  • settings – Current values for all preferences (e.g. `reducedMotion`, `highContrast`, `enhancedFocus`, `letterSpacing`, `wordSpacing`, `lineHeight`, `fontSize`, `dyslexiaFont`, `colorVision`).
  • setSetting(key, value) – Set a single setting by key; `value` is a boolean, number, or string depending on the setting.
  • toggleSetting(key) – Toggle a boolean setting (e.g. `reducedMotion`, `highContrast`).
  • setFontSize(value) – Set font size (percentage, typically 80–200).
  • setLetterSpacing(value) – Set letter spacing (0–100).
  • setWordSpacing(value) – Set word spacing (0–100).
  • setLineHeight(value) – Set line height (0–100).
  • resetSettings() – Restore all settings to their defaults.

Reading settings in your UI

Use the hook when you need to adapt your UI to the current preferences. For example, you might hide or simplify animations when settings.reducedMotion is true, or show a “High contrast” label when settings.highContrast is true.


tsx
import { useAccessKit } from "@accesskit/react"

function AnnouncementBanner() {
  const { settings } = useAccessKit()

  if (settings.reducedMotion) {
    return <StaticMessage />
  }

  return <AnimatedMessage />
}


Updating settings programmatically

You can build your own controls (e.g. a settings page or toolbar) by calling the updaters from event handlers. The provider persists changes when persistence is enabled, and the document updates immediately. if localStorage is unavailable (e.g. quota exceeded or private browsing), settings still work for the current session; see onPersistError in the AccessKitProvider docs for details.

tsx
import { useAccessKit } from "@accesskit/react"

function CustomAccessibilityPanel() {
  const {
    settings,
    setSetting,
    toggleSetting,
    setFontSize,
    resetSettings,
  } = useAccessKit()

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={settings.reducedMotion}
          onChange={() => toggleSetting("reducedMotion")}
        />
        Reduced motion
      </label>
      <label>
        Font size: {settings.fontSize}%
        <input
          type="range"
          min={80}
          max={200}
          value={settings.fontSize}
          onChange={(e) => setFontSize(Number(e.target.value))}
        />
      </label>
      <button type="button" onClick={resetSettings}>
        Reset to defaults
      </button>
    </div>
  )
}


Spacing and font helpers

For text spacing and font size, the context exposes dedicated setters (setLetterSpacing, setWordSpacing, setLineHeight, setFontSize) so you can wire sliders or inputs without dealing with raw keys. Values are clamped to valid ranges (e.g. font size 80–200, spacing 0–100). You can still use setSetting("fontSize", value) if you prefer.


For full type definitions (e.g. AccessKitContextValue, AccessKitSettings, AccessKitSettingKey), see the TypeScript page. For provider setup and options, see Installation and Quick Start.

Back to documentation