Accessibility Essentials Guide
Vanduo's components ship with sensible roles, labels, focus styles, and motion guards. Accessibility is mostly about not undoing those defaults as you compose — and filling the gaps only you can: meaningful labels, alt text, and logical structure.
Keep focus visible
/* Vanduo ships visible focus rings — never remove them outright */
.vd-btn:focus-visible {
outline: 2px solid var(--vd-color-primary);
outline-offset: 2px;
}Name every control
<!-- Components expose the right roles/labels; keep them when you compose -->
<button class="vd-btn" aria-label="Close dialog">
<i class="ph ph-x" aria-hidden="true"></i>
</button>
<nav class="vd-pagination" aria-label="Pagination">…</nav>Respect reduced motion
The effects composables already guard this; do the same in custom CSS:
/* Effects (parallax, morph, glass) respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
.vd-parallax-layer { transform: none !important; }
}Accessibility checklist
| Check | What it means |
|---|---|
| Keyboard reachable | Every interactive control is focusable and operable with Tab/Enter/Space/arrows. |
| Visible focus | Keep the focus ring; use :focus-visible to scope it to keyboard users. |
| Semantic roles | Use real <button>/<a>/<nav>; components set role / aria-* for you. |
| Labels & names | Icon-only controls need aria-label; images need alt. |
| Colour contrast | Semantic tokens meet WCAG AA in both light and dark themes. |
| Reduced motion | Animated effects honour prefers-reduced-motion. |
| Live regions | Toasts and count changes use aria-live to announce updates. |
Every component page includes an Accessibility card documenting its specific roles and keyboard support.
Accessibility built into these components
Modal ComponentFocus trap, Esc to close, and aria-modal handled for you.Toast Componentaria-live regions announce updates to screen readers.Tabs ComponentRoving arrow-key navigation with the correct ARIA roles.Tooltip ComponentKeyboard- and focus-reachable, never hover-only.Pagination ComponentLabelled nav landmark with aria-current on the active page.