Accessibility

Building inclusive interfaces with uicomponents.dev

Every component in uicomponents.dev is built with accessibility in mind. We follow the Web Content Accessibility Guidelines (WCAG) 2.1 AA and the WAI-ARIA Authoring Practices Guide.

All interactive components are fully operable via keyboard:

Tab / Shift+Tab — move focus between interactive elements
Enter / Space — activate buttons and links
Arrow keys — navigate within composite widgets (menus, tabs, select)
Escape — close dialogs, dropdowns, and popovers
Home / End — jump to first or last item in a list

Screen Readers

Components include appropriate ARIA roles, labels, and live regions so screen reader users receive the same information as sighted users.

tsx

// Always provide accessible names for icon-only buttons
<Button aria-label=class="text-green-500">"Close dialog">
  <X className=class="text-green-500">"h-4 w-4" />
</Button>

// Use aria-describedby to associate help text with inputs
<Input
  id=class="text-green-500">"email"
  aria-describedby=class="text-green-500">"email-hint"
/>
<p id=class="text-green-500">"email-hint">We'll never share your email.</p>

Focus Management

Dialogs and modals trap focus while open and return it to the trigger element when closed. This prevents keyboard users from losing their position on the page.

Tip

Use Radix UI primitives (already used by our overlay components) for robust focus trapping without reinventing the wheel.

Color Contrast

All default color combinations meet the WCAG AA contrast ratio of 4.5:1 for normal text and 3:1 for large text. When customizing colors, verify contrast with a tool like the WebAIM Contrast Checker.

Reduced Motion

Animations respect the prefers-reduced-motion media query. All CSS transitions are disabled when a user has requested reduced motion in their OS settings.

css

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Testing Accessibility

We recommend the following tools to audit your implementation:

axe DevTools — automated browser extension
WAVE — visual accessibility evaluation
VoiceOver (macOS / iOS) or NVDA (Windows) — manual screen reader testing
html-validate — static HTML analysis in CI

Note

Automated tools catch ~30% of accessibility issues. Always complement them with manual keyboard and screen reader testing.

Documentation