Accessibility Plugin

The TanStack Devtools Accessibility (A11y) Plugin provides real-time accessibility auditing for your web applications, powered by axe-core. It helps you identify and fix accessibility issues during development.

Features#

• Full Page Scanning - Audit your entire page for accessibility violations
• Component-Level Scanning - Scope audits to specific components using React hooks
• Visual Overlays - Highlight problematic elements with severity-based colors
• Click-to-Navigate - Click on an issue to automatically scroll to and highlight the element
• Dark Mode Support - Automatically adapts to the devtools theme
• Devtools-Aware - Automatically excludes devtools panels from scanning
• Configurable Rule Sets - Support for WCAG 2.0/2.1/2.2 (A/AA/AAA), Section 508, and best practices
• Export Reports - Download results as JSON or CSV
• Persistent Settings - Configuration saved to localStorage

Installation#

npm install @tanstack/devtools-a11y
# or
pnpm add @tanstack/devtools-a11y
# or
yarn add @tanstack/devtools-a11y

Quick Start (React)#

import { createRoot } from 'react-dom/client'
import { TanStackDevtools } from '@tanstack/react-devtools'
import { a11yDevtoolsPlugin } from '@tanstack/devtools-a11y/react'

createRoot(document.getElementById('root')!).render(
  <>
    <App />
    <TanStackDevtools plugins={[a11yDevtoolsPlugin()]} />
  </>,
)

Quick Start (Solid)#

import { render } from 'solid-js/web'
import { TanStackDevtools } from '@tanstack/solid-devtools'
import { a11yDevtoolsPlugin } from '@tanstack/devtools-a11y/solid'

render(
  () => (
    <>
      <App />
      <TanStackDevtools plugins={[a11yDevtoolsPlugin()]} />
    </>
  ),
  document.getElementById('root')!,
)

Quick Start (Angular)#

import { Component, signal } from '@angular/core'
import { TanStackDevtools } from '@tanstack/angular-devtools'
import { a11yDevtoolsPlugin } from '@tanstack/devtools-a11y/angular'
import type { TanStackDevtoolsAngularPlugin } from '@tanstack/angular-devtools'

@Component({
  selector: 'app-root',
  imports: [TanStackDevtools],
  template: `<tanstack-devtools [plugins]="plugins()" />`,
})
export class App {
  readonly plugins = signal<Array<TanStackDevtoolsAngularPlugin>>([
    a11yDevtoolsPlugin(),
  ])
}

Click-to-Navigate#

When you click on an issue in the panel, the plugin will:

1. Scroll the problematic element into view (centered in the viewport)
2. Highlight the element with a pulsing overlay matching its severity color
3. Show a tooltip with the rule ID and impact level

This makes it easy to locate and inspect issues directly on the page.

Panel Configuration#

Configure the plugin in the Settings view of the panel:

• Severity Threshold: the minimum impact level to show
• Rule Set: the rule preset (WCAG 2.0 A, WCAG 2.0 AA, WCAG 2.1 AA, WCAG 2.2 AA, Section 508, Best Practice, or All Rules)
• Rules: turn off single rules by category or by search

The panel saves these settings to localStorage under the key tanstack-devtools-a11y-config. The plugin helpers do not take initial settings.

Severity Levels#

Issues are categorized by impact level with corresponding overlay colors:

Framework Support#

The panel UI is implemented in Solid and wrapped for React, Solid, and Angular using @tanstack/devtools-utils. Each framework has its own entry point: @tanstack/devtools-a11y/react, @tanstack/devtools-a11y/solid, and @tanstack/devtools-a11y/angular.

Export Formats#

After an audit, click Export JSON or Export CSV in the panel to download the results.

Supported Standards#

The plugin supports the following accessibility standards:

• WCAG 2.0 Level A, AA, AAA
• WCAG 2.1 Level A, AA, AAA
• WCAG 2.2 Level AA
• Section 508
• Best Practices (non-standard recommendations)

Troubleshooting#

Issues not appearing#

1. Check that the element is visible in the viewport
2. Make sure that the rule is not turned off in the panel settings
3. Make sure that the selected rule set includes the rule

Overlays not showing#

1. Confirm overlays are enabled in the panel settings
2. Check for CSS conflicts with z-index or pointer-events
3. Ensure the container element exists in the DOM

Example#

See the full working example at: examples/react/a11y-devtools/

Run it with:

cd examples/react/a11y-devtools
pnpm dev