Accessibility Resources

A curated list of reliable, practical resources to go deeper into accessibility.
These are the references we recommend for both design and development work.

Official Standards & Reference Material

• WAI-ARIA Authoring Practices (APG) - Canonical reference on how interactive components should behave: expected roles, keyboard interaction, states and markup.

• WCAG Guidelines (Beginner-Friendly Overview) - High-level accessibility standards. You don’t need to memorise them, but useful to understand the principles.

• MDN Accessibility - Clear explanations of semantics, focus management, roles, and browser behavior.

UI Libraries with Strong Accessibility

When choosing a UI library, prefer options that include correct keyboard behavior, ARIA patterns and predictable focus management out of the box.

• Radix UI – Headless, unstyled primitives with excellent accessibility

• React Aria (Adobe) – Hooks implementing correct ARIA and keyboard behavior

• Headless UI – Accessible primitives for React/Vue

• Chakra UI – Component library with accessible defaults

Accessibility Utility Libraries

Lightweight libraries to help implement specific accessibility patterns when building custom components.

• focus-trap / focus-trap-react – Trap focus inside modals, dropdowns, or any container. Essential for accessible dialogs.

• tabbable – Find all focusable (tabbable) elements within a container. Useful for focus management and keyboard navigation.

• react-focus-lock – React component that locks focus within its children. Simpler alternative to focus-trap for React apps.

• react-aria-live – React hooks for managing live regions (aria-live) to announce dynamic content changes to screen readers.

Pattern Libraries & Examples

Useful when building a component from scratch or validating a third-party design.

• Inclusive Components (Heydon Pickering) – Practical, detailed breakdowns of real UI patterns.

• A11y Project Patterns – Curated and approachable examples.

• GOV.UK Design System – Very robust, production-tested components.

• Carbon Design System (IBM) – Includes accessibility notes per component.

Testing Tools

• WAVE (Web Accessibility Evaluation Tool) – Browser extension for quick accessibility checks.

• Accessibility Insights – Free tool from Microsoft for testing web and Windows apps.

• Lighthouse Accessibility Audits (Chrome DevTools) – Built-in accessibility scoring and quick wins.

• NVDA / VoiceOver / TalkBack – Screen readers you can use to test critical flows.

• Color Contrast Checkers
  WebAIM / Contrast Ratio / Chrome DevTools: “Accessibility → Contrast”

Design Tools

Tools to help designers check accessibility during the design phase.

• Stark – Plugin for Figma, Sketch, and Adobe XD to check contrast, simulate color blindness, and test touch targets.

• Contrast – Mac app and Figma plugin for checking color contrast ratios.

• Color Oracle – Free color blindness simulator for Windows, Mac and Linux.

• Accessible Palette – Create color systems with consistent lightness and contrast using CIELAB/LCh instead of HSL. Generates color ranges that meet WCAG contrast requirements automatically, solving the problem of inconsistent perceived lightness in HSL-based color systems.

General Learning

• The A11y Project – Beginner-friendly accessibility tutorials and articles.

• WebAIM – Deep explanations on contrast, forms, ARIA, screen readers, etc.

• Smashing Magazine – Accessibility Articles

• CSS-Tricks – Accessibility Articles

• MarsBased CSS guidelines – How we organise styles: tokens, focus, motion and theming rules.