Skip to main content

Accessibility in the Design System

Ensuring accessibility is a core principle of our design system. This page outlines how to implement WCAG 2.1 Level AA guidelines in our components.

Why Accessibility Matters​

  • Legal Compliance: Meets global standards like EU Accessibility Act (2025) and ADA (US).
  • Better Usability: Enhances UX for all users.
  • SEO & Performance: Improves visibility in search engines.
  • Wider Audience: Supports users with disabilities.

Implementing WCAG 2.1 AA​

Accessibility-First Design System​

Document accessibility rules for all components

  • Each UI component must include accessibility guidelines (focus styles, semantic HTML, ARIA support).
  • Ensure sufficient contrast ratios (4.5:1 for text, 3:1 for UI elements).

Define Accessible Design Tokens

  • Ensure color contrast meets WCAG requirements.
  • Provide visible focus indicators (e.g., focus:ring-2).
  • Ensure clickable areas are at least 48x48px.

Accessible Component Standards​

Buttons​

  • Must be focusable and keyboard-accessible.
  • Avoid <div> buttons; use <button> elements.
  • Use aria-label="Close" for icon-only buttons.
  • Add focus:ring-2 focus:ring-brand-500 for visible focus.

Form Inputs​

  • Labels must be explicitly linked to inputs (<label for="id">).
  • Error messages should use aria-live="assertive".
  • Maintain a logical tab order.

Modals​

  • Use role="dialog" and aria-labelledby="modal-title".
  • Ensure focus trapping inside the modal.
  • Enable closing via Escape (esc) key.

Tables​

  • Use semantic <table> structure with <th>, <td>, and <caption>.
  • Sortable columns should include aria-sort="ascending" or "descending".

Keyboard & ARIA Best Practices​

Ensure all interactive elements are keyboard-accessible (tabindex="0").
Use correct role attributes (role="button", role="alert").
Live updates should be screen reader friendly (aria-live="polite").

Testing & Tools​

Use the following tools to validate accessibility:

  • Axe DevTools (Chrome/Firefox extension)
  • Lighthouse (Google Chrome Audits)
  • NVDA / VoiceOver Screen Readers
  • Keyboard Navigation Testing

By implementing these practices, our design system ensures an inclusive and accessible experience for all users.