DesignSystems.One LogoDesignSystems.One

Accessibility

Our design system is built with accessibility at its core, ensuring our products are usable by everyone.

Accessibility Principles

Core guidelines that inform all our design decisions

Perceivable

Information and UI components must be presentable to users in ways they can perceive.

  • Provide text alternatives for non-text content
  • Create content that can be presented in different ways
  • Make it easier for users to see and hear content

Operable

UI components and navigation must be operable by all users.

  • Make all functionality available from a keyboard
  • Give users enough time to read and use content
  • Do not use content that causes seizures or physical reactions

Understandable

Information and operation of the UI must be understandable.

  • Make text readable and understandable
  • Make content appear and operate in predictable ways
  • Help users avoid and correct mistakes

Robust

Content must be robust enough to be interpreted by a wide variety of user agents.

  • Maximize compatibility with current and future tools
  • Use semantic HTML elements
  • Ensure proper ARIA implementation when needed

Accessibility Checklist

Essential checks for every component and page

Color & Contrast

  • Text meets WCAG AA contrast (4.5:1 for normal, 3:1 for large text)
  • Information is not conveyed by color alone
  • UI elements have sufficient contrast with surroundings

Keyboard Navigation

  • All interactive elements are keyboard accessible
  • Focus states are clearly visible
  • Logical tab order follows visual layout

Screen Readers

  • Semantic HTML is used appropriately
  • Images have alt text (or are marked decorative)
  • ARIA attributes are used correctly when needed
  • Dynamic content changes are announced

Forms & Inputs

  • All form controls have associated labels
  • Error messages are clear and accessible
  • Required fields are clearly indicated

Content & Text

  • Headings follow proper hierarchy (h1-h6)
  • Text can be resized up to 200% without loss of content
  • Link text is descriptive (no "click here")
Download Full Checklist

Testing Tools & Resources

Recommended tools and methods for accessibility testing

Automated Testing

  • WAVE

    Web accessibility evaluation tool

  • axe DevTools

    Browser extension for accessibility testing

  • Lighthouse

    Automated auditing in Chrome DevTools

Manual Testing

User Testing