Accessibility
Stellix UI Material is built to WCAG 2.1 AA standards. Every component ships with correct ARIA attributes, full keyboard navigation, focus-visible rings, and reduced-motion support out of the box.
WCAG 2.1 AA Compliance
4.5:1 for normal text, 3:1 for large text in both light and dark themes.
All text remains readable at 200% zoom without horizontal scrolling.
UI components and focus indicators meet 3:1 contrast ratio.
All functionality is operable from a keyboard without requiring specific timings.
Focus ring is clearly visible on all interactive elements via focus-visible.
All components expose name, role, and value to assistive technologies via ARIA.
Semantic HTML elements and ARIA roles communicate structure to screen readers.
Tab order follows the visual reading order within all components.
Tooltip content persists when the pointer moves to it and is dismissible via Escape.
ARIA Attributes Reference
All ARIA attributes are applied automatically by the component. You do not need to add them manually.
| Attribute / Role | Used in | Purpose |
|---|---|---|
| aria-label | Button, Avatar, Spinner, Toggle, Switch, Input, Textarea, Select, Checkbox, Radio | Provides an accessible name when visible text is absent. |
| aria-labelledby | Modal, Drawer, Alert, Toast | Associates a heading element as the accessible name of the region. |
| aria-describedby | Input, Textarea, Select, Checkbox, Radio | Points to helper text or error messages that describe the field. |
| aria-live | Toast, Alert, LoadingState, NumberTicker | Announces dynamic content changes to screen readers. |
| aria-expanded | Accordion, Dropdown, Drawer, Sidebar | Indicates whether a collapsible region is open or closed. |
| aria-haspopup | Dropdown, Tooltip, Modal | Signals that activating the element opens a popup layer. |
| aria-selected | Tabs, Select, Radio | Marks the currently selected item in a set of options. |
| aria-checked | Checkbox, Switch, Toggle, Radio | Reports the checked state of form controls. |
| aria-disabled | Button, Input, Select, Toggle | Communicates that an element is present but not interactive. |
| aria-busy | Spinner, ProgressBar, LoadingState | Tells assistive technology that content is still loading. |
| aria-valuenow | ProgressBar, ProgressRing, Slider | Gives the current numeric value of a range widget. |
| aria-valuemin | ProgressBar, ProgressRing, Slider | Sets the minimum allowed value for a range widget. |
| aria-valuemax | ProgressBar, ProgressRing, Slider | Sets the maximum allowed value for a range widget. |
| aria-modal | Modal, Drawer | Restricts screen reader navigation to the modal region while open. |
| aria-current | Breadcrumb, Pagination, SidebarNav | Identifies the active item in a navigation sequence. |
| role="status" | Spinner, Toast (info/success) | Live region that announces non-critical updates politely. |
| role="alert" | Toast (error/warning), Alert | Live region that announces critical updates immediately. |
| role="dialog" | Modal, Drawer | Marks the container as a dialog requiring user interaction. |
| role="progressbar" | ProgressBar, ProgressRing | Exposes progress to assistive technology with ARIA value attributes. |
| role="tab" | Tabs | Marks a tab button within a tablist. |
Keyboard Navigation
Every interactive component is fully navigable using the standard keyboard conventions below.
| Key | Action |
|---|---|
| Tab | Move focus forward through interactive elements |
| Shift + Tab | Move focus backward through interactive elements |
| Enter | Activate buttons, links, and selected option in dropdowns |
| Space | Toggle checkboxes, switches, and radio buttons; open dropdowns |
| Escape | Close modals, drawers, dropdowns, tooltips, and toasts |
| Arrow Up / Down | Navigate options in dropdowns, selects, and accordion items |
| Arrow Left / Right | Switch between tabs; navigate pagination |
| Home | Move to the first item in a list or select |
| End | Move to the last item in a list or select |
| Page Up / Down | Scroll long lists or modal content by large steps |
Reduced Motion Support
All animated components in Stellix UI Material respect the operating system preference for reduced motion. When a user enables the Reduce Motion setting (on macOS, Windows, iOS, or Android), all transitions and keyframe animations are automatically disabled or reduced to simple opacity fades.
This is implemented via the @media (prefers-reduced-motion: reduce) CSS media query applied globally in the Tailwind theme configuration and in individual component animation keyframes. Components affected include: GlimmEffect, GlidingHighlight, MorphTransition, ConfettiEffect, TypewriterEffect, NumberTicker, ProgressRing, RippleEffect, ShakeAnimation, SlideReveal, Spinner, ProgressBar (indeterminate), SkeletonBlock, and LoadingState.
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Focus-Visible Ring Demo
Tab into the buttons below to see the focus ring in action. The ring only appears for keyboard navigation and is suppressed for mouse/touch interactions using the :focus-visible CSS pseudo-class.
Click anywhere to dismiss focus, then press Tab to cycle through the controls above. Focus rings use a 2px solid accent-colour ring with a 2px transparent offset for clarity.