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.
Last updated