ACCESSIBILITY

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-primary against brand color backgrounds
Brand colors in dark mode are lightened to ensure readability

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 solid outline 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 alt text
Decorative icons use aria-hidden="true"
State changes are announced via aria-live regions
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