Accessibility

Built for Everyone

Accessibility (a11y) is not an afterthought in Viora UI - every interactive primitive and component is built from the ground up to follow the WAI-ARIA Authoring Practices Guide (APG).

Key Principles

1. Keyboard Navigation

Every interactive component is fully operable via keyboard:

• Tab & Shift + Tab: Navigate sequentially through interactive elements.
• Arrow Keys: Move between tabs, menu items, accordion sections, and segmented buttons.
• Enter & Space: Activate buttons, trigger dialogs, and toggle switches.
• Escape: Dismiss modals, floating tooltips, dropdowns, and drawers.

2. Focus Management & Visible Indicators

• Clean, high-contrast focus rings for keyboard users (focus-visible:ring-2).
• Focus trapping within active modals and drawers to prevent accidental background interaction.
• Automatic focus restoration to the trigger element when dialogs close.

3. Screen Reader Support

• Appropriate semantic HTML tags (<nav>, <article>, <main>, <dialog>).
• Dynamic aria-expanded, aria-selected, aria-hidden, and aria-live attributes to communicate real-time state changes to assistive technologies.

4. Reduced Motion (prefers-reduced-motion)

All animations respect user system preferences. When a user has enabled "Reduce Motion" on their OS, motion transforms automatically default to instantaneous or gentle opacity fades.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}