Accessibility
Accessibility is part of what a component is, not a later pass. Every Uxelith component is built to WCAG 2.2 level AA and checked automatically before it ships — and the parts only you can decide are listed below.
What every component does
- Real elements first. Buttons are
<button>, links are<a href>, inputs are native inputs with real<label>s. ARIA is added only where HTML has no equivalent. - Keyboard. Everything works without a mouse, with a visible focus ring. Composite widgets follow the WAI-ARIA Authoring Practices: one Tab stop, arrow keys inside, Escape to close.
- Screen readers. Names, states and changes are exposed: charts come with a data table, decorative motion is hidden, and changes such as a sortable list's moves or a form's save state are announced in live regions.
- Not colour alone. States are also shown by shape or text — a rating's unlit stars are outlines, unavailable dates are struck through.
- Reduced motion. All movement stops under
prefers-reduced-motion(see Motion).
Patterns used
| Component | Pattern |
|---|---|
| Accordion | Accordion: heading buttons with aria-expanded, labelled regions |
| Animated Tabs | Tabs with automatic activation and roving focus |
| Segmented Control | Radio group |
| Command Palette | Modal dialog with a combobox and listbox |
| Multi Select | Combobox with a multi-selectable listbox |
| Date Picker | Date picker dialog with a grid |
| Sheet | Native modal dialog |
| Switch | Switch |
| Tooltip | Tooltip (WCAG 1.4.13: dismissable, hoverable) |
| Sortable List | Keyboard reordering with live announcements |
Each component's page has an Accessibility section with its keyboard keys and what assistive technology hears.
How it's tested
- Unit tests render every component and run axe-core against WCAG 2.0, 2.1 and 2.2 A and AA rules, plus keyboard tests.
- Browser tests scan every component page with axe in both light and dark themes, and every Studio item after an edit.
- Automated checks catch many problems but not all; they don't replace testing with real assistive technology in your product.
What you still own
- Your theme's contrast. Components use your colours. Keep text at 4.5:1 (3:1 for large text and UI shapes) against its background.
- Names that make sense. Props like
labelbecome what screen readers say. "Billing period" beats "Tabs". - Heading levels. Blocks and sections take a
headingLevelso they fit your page outline — use one h1 per page. - Content. Alt text for your images, clear link text, and error messages that say how to fix the problem.