Reach Ui

title: "Reach UI Accessibility" weight: 21 description: "Learn how Reach UI provides accessible React components: dialog, menu, tabs, tooltip, slider, and listbox with built-in keyboard navigation, focus management, and ARIA attributes." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, react]

Reach UI is a React component library focused on accessibility, providing components like Dialog, MenuButton, Tabs, Tooltip, and Listbox with built-in keyboard navigation, focus management, ARIA attributes, and screen reader support.

## What You'll Learn

You will install and use Reach UI components, understand their accessibility features, customize styling, and compare Reach UI with React Aria.

## Why It Matters

Reach UI was designed from the ground up with accessibility as the primary goal. Its components implement ARIA patterns correctly and are tested with screen readers. Using Reach UI reduces the accessibility effort significantly.

## Real-World Use

A React app needs an accessible menu button. Reach UI's MenuButton component provides full keyboard navigation (arrow keys, Enter, Escape), correct ARIA attributes (aria-expanded, role="menu", role="menuitem"), and focus management automatically.

## Reach UI Components

```mermaid
flowchart TD
  A[Reach UI] --> B[Dialog]
  A --> C[MenuButton]
  A --> D[Tabs]
  A --> E[Tooltip]
  A --> F[Listbox]
  A --> G[Slider]

Using Reach UI

Install the package and import specific components.

npm install @reach/dialog @reach/menu-button @reach/tabs @reach/tooltip @reach/listbox @reach/slider

import { Dialog } from '@reach/dialog';
import '@reach/dialog/styles.css';

function ConfirmDialog({ isOpen, onClose, onConfirm, message }) {
  return (
    <Dialog isOpen={isOpen} onDismiss={onClose} aria-label="Confirm action">
      <p>{message}</p>
      <button onClick={onConfirm}>Confirm</button>
      <button onClick={onClose}>Cancel</button>
    </Dialog>
  );
}

import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import '@reach/menu-button/styles.css';

function ActionsMenu() {
  return (
    <Menu>
      <MenuButton>
        Actions <span aria-hidden="true">v</span>
      </MenuButton>
      <MenuList>
        <MenuItem onSelect={() => console.log('Edit')}>Edit</MenuItem>
        <MenuItem onSelect={() => console.log('Delete')}>Delete</MenuItem>
        <MenuItem onSelect={() => console.log('Share')}>Share</MenuItem>
      </MenuList>
    </Menu>
  );
}

import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@reach/tabs';
import '@reach/tabs/styles.css';

function AccessibleTabs() {
  return (
    <Tabs>
      <TabList>
        <Tab>Details</Tab>
        <Tab>Shipping</Tab>
        <Tab>Reviews</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>Product details content</TabPanel>
        <TabPanel>Shipping information</TabPanel>
        <TabPanel>Customer reviews</TabPanel>
      </TabPanels>
    </Tabs>
  );
}

Common Mistakes

• Not importing the styles (components have minimal default styles)
• Using Reach UI for simple elements where semantic HTML works
• Not customizing the styles to match the design system
• Mixing Reach UI with other component libraries without testing conflicts
• Assuming Reach UI solves all accessibility needs
• Not testing Reach UI components with screen readers
• Forgetting that Reach UI requires specific versions of React

Practice and Challenge

Practice 1: Install and render a Dialog component. Practice 2: Build a menu button with Reach UI. Practice 3: Create accessible tabs with keyboard navigation. Practice 4: Add a tooltip to a button. Practice 5: Build a listbox with search filtering.

Challenge: Build a complete UI using Reach UI components: a page with navigation tabs, a settings panel with listbox and slider, a menu button for actions, a tooltip for help text, and a dialog for confirmations. Style all components consistently and test with keyboard navigation and screen reader.

FAQ

Mini Project

Create a product detail page using Reach UI components. Include: Dialog for size guide, MenuButton for actions (add to wishlist, share, print), Tabs for product info, Tooltip for size help, Listbox for quantity selection, and Slider for price filter. Test the page with keyboard-only navigation and a screen reader.

What's Next

Testing Library and jest-axe covers testing React component accessibility with jest-axe.