How SpaceZero components meet accessibility standards including keyboard navigation, screen readers, and touch targets.
SpaceZero components are designed for WCAG 2.1 AA compliance.
Generous padding on interactive elements via scaling tokens:
// Button
px-3 py-2
// Input
px-3 py-2
// Select trigger / option
px-3 py-2
// Textarea
px-3 py-3 (min-h-16)
// Modal close
p-2
Focus is indicated by a border color change (no ring utilities):
focus:border-regular focus-visible:outline-none
Logical tab order through semantic HTML and tabIndex.
Modals are closed via the ModalClose button — there is no global Escape handler in the template. Add a keydown listener in your app shell if you need Escape-to-close.
// Select
role="combobox"
aria-expanded={open}
aria-selected={isSelected}
// Accordion
aria-expanded={isOpen}
// Tabs
role="tab"
aria-selected={isActive}
aria-controls={panelId}
Toasts use a polite live region:
<div role="status" aria-live="polite">
All inputs have associated labels:
<label htmlFor="email">Email</label>
<Input id="email" ... />
Design tokens ensure 4.5:1 contrast ratio:
--regular: #ffffff; /* on --surface: #121212 */
--muted: #a4a4a4; /* on --surface: #121212 */
--action: #006198; /* on --surface: #121212 */
<Input
aria-invalid={!!error}
aria-describedby={error ? 'email-error' : undefined}
/>
{error && <span id="email-error" role="alert">{error}</span>}
The template does not ship a prefers-reduced-motion block. If you add animations, include:
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; }
}
| Component | Keyboard | ARIA | Focus | Contrast |
|---|---|---|---|---|
| Button | ||||
| Input | ||||
| Select | ||||
| Modal | ||||
| Accordion | ||||
| Tabs | ||||
| Toast | ||||
| Toggle |