Accessibility (a11y) ensures that all users — including those using assistive technologies — can effectively use the product.
Core Principles
WCAG 2.1 AA Compliance
The design system targets WCAG 2.1 AA compliance:
- Perceivable — Information and UI components can be perceived by users
- Operable — UI components and navigation can be operated
- Understandable — Information and operation are understandable
- Robust — Content can be reliably interpreted by a wide variety of user agents
Color Contrast
| Context | Minimum Ratio | Notes |
|---|---|---|
| Body text | 4.5:1 | --ds-color-text-primary against background |
| Large text (≥18px bold / ≥24px) | 3:1 | Headings, button labels |
| Non-text elements | 3:1 | Icons, borders, focus indicators |
| Decorative elements | None | Pure decoration, conveys no information |
Brand Color Considerations
- ELFBAR brand pink (
accent1) may have insufficient contrast against white backgrounds in light mode — use with caution for text - Important action text should always use
--ds-color-text-white-primaryagainst brand color backgrounds - Brand colors in dark mode are lightened to ensure readability
Keyboard Navigation
All interactive components must support keyboard operation:
| Key | Behavior |
|---|---|
Tab | Move forward through focusable elements |
Shift + Tab | Move backward through focusable elements |
Enter / Space | Activate buttons, links |
Escape | Close dialogs, menus, popovers |
Arrow Keys | Move within option groups (Radio, Menu, Tabs) |
Home / End | Jump to first/last option |
Focus Management
- Focus indicators use a
2px solidoutline with color--ds-color-brand-accent1-default - Focus must not be trapped inside components (focus trapping is only used for modal dialogs)
- When a dialog opens, focus moves into it; when closed, focus returns to the trigger element
ARIA Attributes
Common Component ARIA Patterns
| Component | Required Attributes |
|---|---|
| Button | role="button", aria-disabled, aria-pressed (toggle) |
| Checkbox | role="checkbox", aria-checked (supports mixed) |
| Radio | role="radio", aria-checked, role="radiogroup" wrapper |
| Dialog | role="dialog", aria-modal="true", aria-labelledby |
| Tabs | role="tablist", role="tab", role="tabpanel", aria-selected |
| Menu | role="menu", role="menuitem", aria-expanded |
| Search | role="search", aria-label |
| Badge | aria-label describing the count meaning |
| Alert | role="alert", aria-live="assertive" |
Screen Readers
- All images have meaningful
alttext - Decorative icons use
aria-hidden="true" - State changes are announced via
aria-liveregions - Form errors are associated with their input (
aria-describedby)
Testing Checklist
- Complete all operations using keyboard only
- Test flows with a screen reader (VoiceOver / NVDA)
- Check all text color contrast ≥ 4.5:1
- Verify focus indicators are visible on all components
- Verify color contrast in dark mode