DesignSystems.One LogoDesignSystems.One

Accessibility Foundations

Design system is built with accessibility at its core, ensuring products are usable by everyone. We follow the Web Content Accessibility Guidelines (WCAG) to create inclusive experiences.

Core Accessibility Principles (POUR)

These four principles are the foundation of WCAG and guide all design and development decisions for accessibility.

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

A quick reference for essential checks. Ensure these are covered for every component and page.

Key Areas to Verify
This checklist helps ensure your designs and implementations are accessible.

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 WCAG Checklist

Testing Tools & Resources

A combination of automated, manual, and user testing is crucial for comprehensive accessibility.

Automated Testing
  • WAVE

    Web accessibility evaluation tool

  • axe DevTools

    Browser extension for accessibility testing

  • Lighthouse

    Automated auditing in Chrome DevTools

Manual Testing
User Testing