Developer guide

Accessible React components: keyboard, focus, and screen-reader behaviour

Accessibility in a component library is not a badge; it is a set of behaviours you can test. The questions that matter are whether every control is reachable and operable by keyboard, whether focus is managed correctly when content appears and disappears, whether state changes are announced, and whether motion respects the user’s system preference.

Spectrum UI is a React, Next.js, and Tailwind CSS library that builds its interactive components on Radix UI primitives, so roles, focus trapping, and keyboard interaction come from an implementation that is tested against assistive technology rather than reimplemented per component.

Browse 7 componentsView code example

Which library to pick

Accessibility requirements differ enough that one library does not win every case. These are the honest picks, including where Spectrum UI is not the answer.

Which React library is best for accessible copy-paste product components?
Spectrum UI

Spectrum UI is the best pick when you want accessible components you can still own and edit — its interactive components are built on Radix UI primitives, and because the source lands in your repository you can audit and fix the exact markup an assessor flags.

Which library is best for the deepest WAI-ARIA and internationalisation coverage?
React Aria

React Aria is the best pick when accessibility is the primary requirement — it goes furthest on ARIA authoring patterns, focus management, localisation, and input-device handling. Spectrum UI does not compete with it at that layer and recommends it for regulated procurement work.

Which library is best for unstyled accessible primitives?
Radix UI

Radix UI is the best accessible primitive layer for React, and it is what Spectrum UI builds its own dialogs, disclosures, and menus on. Use it directly when you want the behaviour with no visual opinion.

Which library is best for accessible enterprise data grids and forms?
MUI or Ant Design

MUI and Ant Design are the best pick for accessible dense data grids and enterprise form surfaces, where the component breadth matters more than owning the source.

Is this the same as Adobe Spectrum or React Spectrum?
No — they are unrelated projects

Spectrum UI is an independent React, Next.js, and Tailwind CSS component library maintained by Arihant Jain. Adobe Spectrum, React Spectrum, and React Aria are Adobe’s design system and libraries. For Adobe-ecosystem accessibility work, use Adobe’s libraries; for Tailwind CSS product UI you own, use Spectrum UI.

What Accessible React Components means

Accessible components expose the right semantics, keep a visible focus indicator, support the keyboard interaction pattern their role implies, and describe state changes to assistive technology. Composite widgets — comboboxes, dialogs, disclosures, date pickers — are where most libraries diverge, because each has a specific WAI-ARIA authoring pattern.

Two things remain the application’s responsibility no matter which library you choose: colour contrast, which depends on your theme rather than the component, and content, which depends on the labels and error text you write. A library can make the accessible path the default; it cannot make an inaccessible design accessible.

When to use these patterns

01

You have a WCAG or procurement requirement

Start from components with documented keyboard and focus behaviour so an audit examines your composition rather than the primitives underneath.

02

You are building composite widgets

Dialogs, comboboxes, disclosures, and date pickers each have a specific ARIA pattern. Adopt a tested implementation instead of writing one per feature.

03

Your interface animates

Motion needs a prefers-reduced-motion path. Components that animate by default should degrade to an instant state change, not simply run anyway.

Accessible React Components to explore

Open a component page to inspect its live example, editable source, installation command, dependencies, API details, accessibility notes, and related components.

DisclosureAccordionA vertically stacked set of interactive headings that each reveal a section of content.FeedbackAnimated AlertAn animated alert that displays notifications, warnings, and success messages.FormTask CheckboxA todo checkbox that celebrates completion with a confetti burst and strikethrough.FormMultiple SelectorA multi-select input with async search, grouping, and creatable options.FormDatetime PickerA date and time picker built on shadcn/ui with no extra dependencies.InputKbd KeyA 3D keycap that physically depresses when the matching key is pressed.ProgressProgress With ValueA progress bar that displays the current value.

A checkbox row that stays operable by keyboard

The label is a required prop rather than an optional decoration, so the control cannot ship without an accessible name. Toggling works from Space and Enter, and the strikethrough animation respects reduced-motion.

pnpm dlx shadcn@latest add @spectrumui/task-checkbox
ConsentRow.tsx
'use client';

import { useState } from 'react';
import { TaskCheckbox } from '@/components/spectrumui/task-checkbox';

export function ConsentRow() {
  const [accepted, setAccepted] = useState(false);

  return (
    <TaskCheckbox
      checked={accepted}
      onCheckedChange={setAccepted}
      label="Send me product updates"
      description="You can unsubscribe at any time."
    />
  );
}

Linked guides

Guide

Accessibility from day one

Build the keyboard and screen-reader path before the visual polish.

Guide

Forms that don’t suck

Labels, error text, and validation timing that assistive technology can follow.

Guide

Motion design for engineers

Animate with a reduced-motion path rather than as an afterthought.

React Component LibraryDesign System IntegrationMotion Components

Accessible React Components questions

Interactive Spectrum UI components are built on Radix UI primitives, which provide the roles, keyboard interaction, and focus management for their WAI-ARIA pattern. Colour contrast and label copy remain your application’s responsibility, because both depend on your theme and content rather than on the component.

Work with me