Skip to main content

Accessibility

Maps 69 components to WCAG 2.2 AA with automated audits and WAI-ARIA guidance.

WCAG 2.2 AABuilt to WCAG 2.2 AA, with tracked contrast-remediation waivers
Automated axe checks and interaction tests run beside each component. Known contrast and upstream ARIA exceptions remain tracked as explicit waivers.

What we test

Keyboard Navigation
Tab, Enter, Space, Arrow keys, and Escape. All interactive components are fully navigable without a mouse.
Screen Readers
WAI-ARIA attributes, live regions, and semantic HTML ensure screen readers announce content correctly.
Reduced Motion
Animations are automatically disabled or minimized when prefers-reduced-motion is enabled.
High Contrast
Enhanced borders and focus rings activate when prefers-contrast: more is detected.
Focus Management
Dialogs trap focus, menus restore it, and focus rings are always visible during keyboard navigation.
Automated Testing
vitest-axe checks and interaction-focused component tests catch accessibility regressions close to the source.

Keyboard shortcuts

All interactive components follow WAI-ARIA keyboard interaction patterns.

TabMove to next interactive element
Shift + TabMove to previous interactive element
Enter / SpaceActivate buttons, open menus
Arrow KeysNavigate within menus, tabs, radio groups
EscapeClose dialogs, menus, and popovers
Home / EndJump to first/last item in a list

Customize keyboard shortcuts

Global shortcuts automatically yield to editable areas.

For example, Ctrl+B bolds text inside an Editor instead of toggling the sidebar.

Remap or disable any shortcut at the app level.

import { configureShortcuts } from '@usefragments/ui';

// Remap sidebar toggle to Ctrl+\
configureShortcuts({
  SIDEBAR_TOGGLE: { key: '\\', meta: true, label: 'Ctrl+\\' },
});

// Or disable it entirely
configureShortcuts({ SIDEBAR_TOGGLE: null });

Use useKeyboardShortcut to register handlers that respect overrides and skip editable elements.

Try it

Tab through the interactive elements below to experience keyboard navigation first-hand.

Interactive Playground
Button
Menu
Tabs
Overview content - Use arrow keys to navigate tabs
Input

Standards references

Next steps

  • ComponentsUsage guidance and accessibility notes on component pages.
  • Getting StartedInstall the library and render your first component.