Accessibility

APEX Design System is built with accessibility as a core principle. All components follow WAI-ARIA best practices and are WCAG 2.1 AA compliant.

Keyboard navigation

All interactive components support full keyboard navigation:

  • Tab - Navigate between focusable elements
  • Enter/Space - Activate buttons and links
  • Arrow keys - Navigate menus, tabs, and selects
  • Escape - Close dialogs and dropdowns

Screen readers

Components include proper ARIA labels and descriptions:

tsx
<Button
  aria-label="Close dialog"
  aria-busy={isLoading}
>
  <X aria-hidden="true" />
</Button>

Color contrast

All text and interactive elements meet WCAG 2.1 AA standards with a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

Focus indicators

Visible focus indicators are provided for all interactive elements, respecting user preferences for reduced motion.