Eddie's approach to accessible web components.

Philosophy

Accessibility is built into Eddie at the component level — not as an afterthought. Every component meets or exceeds WCAG 2.2 AA standards.

Built-in Accessibility

Semantic HTML First

Eddie components render proper semantic HTML. The ed-button component renders a native <button> or <a> element. The ed-heading component renders the correct heading level (h1–h6).

Form Internals

Form components (EdFormElement) implement the ElementInternals API for native form participation:

  • Screen readers announce labels, descriptions, and error states
  • Native form validation works without JavaScript
  • Components respond to form reset and submit events

ARIA When Needed

Components add ARIA attributes automatically where native semantics aren't sufficient:

  • ed-accordion manages aria-expanded and aria-controls
  • ed-modal uses role="dialog" and manages focus trapping
  • ed-tabs implements the WAI-ARIA tabs pattern

Keyboard Navigation

All interactive components support full keyboard navigation:

  • Tab/Shift+Tab for focus movement
  • Enter/Space for activation
  • Arrow keys for selection within groups (tabs, radio buttons)
  • Escape to dismiss overlays

Color Contrast

Eddie's accent color token system ensures proper contrast:

  • accent-N tokens are designed for text ON default backgrounds
  • on-accent-N tokens ensure readable text ON accent-colored backgrounds

Always use the appropriate token pair for your context.

Testing

Eddie uses @storybook/addon-a11y for automated accessibility audits on every component story. Run Storybook locally to see audit results:

npm start

Resources