Typescript

AccessKit is written in TypeScript and ships with type definitions. You do not need to install @types/accesskit — types are included in @accesskit/react. This page summarizes the main types and how to use them in a TypeScript (or JavaScript with JSDoc) project.

Types are included

The package exports both runtime values and types. Use the same import path; TypeScript will resolve types from the package's types field. If your IDE or build does not pick them up, ensure moduleResolution is set to "bundler" or "node16" (or higher) in your tsconfig.json.

Provider types

AccessKitProvider accepts optional props. You can type default settings and persistence options as follows.

import { AccessKitProvider } from "@accesskit/react"
import type { AccessKitSettings } from "@accesskit/react"

const defaultSettings: Partial<AccessKitSettings> = {
  reducedMotion: false,
  highContrast: true,
  fontSize: 100,
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <AccessKitProvider
      defaultSettings={defaultSettings}
      storageKey="myapp:accessibility"
      persist={true}
      focusColor="#0066cc"
      onPersistError={(error) => console.error("Failed to persist settings:", error)}
    >
      {children}
    </AccessKitProvider>
  )
}

AccessKitSettings includes: reducedMotion, highContrast, enhancedFocus, letterSpacing, wordSpacing, lineHeight, fontSize, dyslexiaFont, and colorVision. Use Partial<AccessKitSettings> when you only override some keys. The provider also accepts storageKey (string), persist (boolean), focusColor (an optional CSS color string for focus rings), and onPersistError (an optional (error: unknown) => void callback invoked when writing settings to localStorage fails, e.g. quota exceeded or private browsing).

Widget types

AccessibilityWidget accepts an optional style object and position/layout options. The style type is AccessibilityWidgetStyle: all properties are optional and map to CSS-compatible color strings.

import { AccessibilityWidget } from "@accesskit/react"
import type { AccessibilityWidgetStyle, AccessKitPosition } from "@accesskit/react"

const widgetStyle: AccessibilityWidgetStyle = {
  primary: "var(--primary)",
  tabBackground: "var(--primary)",
  tabIcon: "#fff",
  panelBackground: "var(--card)",
  panelText: "var(--foreground)",
  border: "var(--border)",
  mutedText: "var(--muted-foreground)",
  hoverText: "var(--foreground)",
}

export function App() {
  return (
    <AccessibilityWidget
      initialPosition={"center-right" as AccessKitPosition}
      style={widgetStyle}
      defaultOpen={false}
      zIndex={2147483643}
    />
  )
}

AccessKitPosition is a union of: "bottom-right", "center-right", "top-right", "bottom-left", "center-left", "top-left". You can pass a string literal or type a variable as AccessKitPosition for type safety.

Dev Tools types

AccessKitDevTools requires a routeKey string prop (the current pathname from your router) so it can reset findings on navigation. It also accepts optional props for position, z-index, default open state, and extra audit rules.

import { AccessKitDevTools } from "@accesskit/react"
// Next.js example, make use of the router provided by your framework
import { usePathname } from "next/navigation"
import type { AccessKitPosition, AccessKitAdditionalRuleTag } from "@accesskit/react"

const extraRules: AccessKitAdditionalRuleTag[] = ["best-practice", "section508"]

export function Layout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()

  return (
    <>
      {children}
      {process.env.NODE_ENV === "development" && (
        <AccessKitDevTools
          routeKey={pathname}
          defaultOpen={false}
          position={"bottom-right" as AccessKitPosition}
          zIndex={9999}
          additionalRules={extraRules}
        />
      )}
    </>
  )
}

AccessKitAdditionalRuleTag includes values such as "best-practice", "section508", "ACT", "EN-301-549", and various "cat.*" categories (e.g. "cat.color", "cat.forms"). The dev tools panel runs WCAG 2.0/2.1/2.2 Level A/AA/AAA by default; additionalRules adds these opt-in tags.

useAccessKit and context type

The useAccessKit hook returns the same object type that the provider supplies: AccessKitContextValue. It includes settings, updaters like setSetting and toggleSetting, and helpers such as setFontSize, setLetterSpacing, setWordSpacing, setLineHeight, and resetSettings.

import { useAccessKit } from "@accesskit/react"
import type { AccessKitSettingKey, AccessKitSettings } from "@accesskit/react"

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

  const handleToggle = (key: AccessKitSettingKey) => {
    toggleSetting(key)
  }

  const handleFontSize = (value: number) => {
    setSetting("fontSize", value)
  }

  return (
    <div>
      <p>Reduced motion: {String(settings.reducedMotion)}</p>
      <button onClick={() => handleToggle("reducedMotion")}>Toggle reduced motion</button>
      <button onClick={resetSettings}>Reset all</button>
    </div>
  )
}

AccessKitSettingKey is the union of keys of AccessKitSettings. Use it when you need to type a setting key (e.g. in a generic control or loop). setSetting accepts (key, value) where value is boolean | number | string depending on the setting.

Audit API types

If you run accessibility audits programmatically (e.g. in tests or scripts), use runAccessibilityAudit and formatAuditFindingsForConsole. Findings are typed as AccessKitAuditFinding[].

import { runAccessibilityAudit, formatAuditFindingsForConsole } from "@accesskit/react"
import type { AccessKitAuditFinding, RunAccessibilityAuditOptions } from "@accesskit/react"

const options: RunAccessibilityAuditOptions = {
  additionalTags: ["best-practice"],
  logToConsole: true,
}

const findings: AccessKitAuditFinding[] = await runAccessibilityAudit(
  document,
  options
)

console.log(formatAuditFindingsForConsole(findings))

AccessKitAuditFinding includes: id, ruleId, wcagLevel?, category?, severity, message, suggestion, helpUrl?, selector, and standards?.

Exported types reference

The following types are exported from @accesskit/react for use in your app or tests:

• AccessKitSettings – All accessibility settings (reducedMotion, highContrast, fontSize, etc.).
• AccessKitContextValue – Return type of useAccessKit() (settings + setSetting, toggleSetting, resetSettings, etc.).
• AccessKitSettingKey – Union of keys of AccessKitSettings.
• AccessKitPosition – Widget and Dev Tools position strings (e.g. "center-right", "bottom-left").
• AccessibilityWidgetStyle – Optional theme colors for the widget (primary, panelBackground, etc.).
• AccessKitSeverity – "error" | "warning" | "pass" for audit findings.
• AccessKitWcagLevel – "A" | "AA" | "AAA".
• AccessKitAdditionalRuleTag – Opt-in rule tags for the dev tools or runAccessibilityAudit.
• AccessKitAuditFinding – Single audit result (ruleId, message, selector, suggestion, standards, etc.).
• RunAccessibilityAuditOptions – Options for runAccessibilityAudit (additionalTags, logToConsole).
• AccessKitProviderProps – Props for AccessKitProvider (children, defaultSettings, storageKey, persist, focusColor, onPersistError).
• AccessKitDevToolsProps – Props for AccessKitDevTools (routeKey, defaultOpen, position, zIndex, additionalRules).
• AccessibilityWidgetProps – Props for AccessibilityWidget (initialPosition, style, defaultOpen, zIndex).

For runtime usage and setup, see Installation and Quick Start. For customizing the dev tools and widget, see Dev Tool and Widget in the sidebar.