Accessibility
Accessible documentation for all users
fromsrc components follow WCAG 2.1 guidelines.
ARIA attributes
All interactive components include appropriate ARIA attributes:
| component | attributes |
|---|---|
| search | role="combobox", aria-expanded, aria-controls, aria-activedescendant |
| dropdown | role="menu", aria-haspopup, aria-expanded |
| accordion | aria-expanded, aria-controls |
| modal | role="dialog", aria-modal |
| tooltip | role="tooltip" |
| progress | role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax |
| alert | role="alert" |
| tabs | role="tablist", role="tab", aria-selected |
Decorative icons use aria-hidden="true" to be ignored by screen readers.
Keyboard navigation
Interactive components support full keyboard control:
| key | action |
|---|---|
| Tab | move focus between elements |
| Enter/Space | activate buttons, select items |
| Arrow Up/Down | navigate lists, menus, search results |
| Escape | close modals, dropdowns, search |
| Cmd/Ctrl+K | open search |
Focus management
Focus is managed automatically:
- Modals trap focus within the dialog
- Dropdowns return focus to trigger on close
- Search input receives focus when opened
- Skip links allow jumping to main content
All focusable elements have visible focus indicators using the outline style.
Screen readers
Components announce state changes:
aria-expandedindicates open/closed statearia-selectedindicates current selectionaria-currentmarks active navigation itemsaria-labelprovides accessible names for icon buttons
Color contrast
The default theme meets WCAG AA standards:
| pair | contrast ratio |
|---|---|
| fg on bg | 19.6:1 |
| muted on bg | 5.8:1 |
| accent on bg | 5.3:1 |
Testing contrast
Use browser devtools or online tools to verify:
Best practices
- Use descriptive link text (not "click here")
- Provide alt text for meaningful images
- Maintain heading hierarchy (h1, h2, h3)
- Ensure form inputs have labels
- Avoid motion for users with vestibular disorders