Command Palette
Search for a command to run...
Inclusive Components: Accessible design patterns
Inclusive Components by Heydon Pickering provides detailed, practical examples of how to build common UI components with accessibility built-in from the start. Each post breaks down the design and development considerations needed to create truly inclusive interfaces, making complex accessibility concepts approachable and actionable.
More Tools(4)
A11y Annotation Kit: Figma accessibility annotations
The A11y Annotation Kit is a comprehensive Figma library that provides standardized accessibility annotation components for design handoffs. It helps designers communicate accessibility requirements to developers through clear, consistent annotations that cover focus states, screen reader labels, keyboard navigation, and more.
A11y Project: Community-driven accessibility resource
The A11y Project is a community-driven effort to make digital accessibility easier through practical, digestible resources and guides. It provides straightforward explanations of accessibility concepts, code examples, and actionable advice that helps designers and developers understand and implement accessibility best practices in their work.
Able: Figma accessibility plugin
Able is a Figma plugin that helps designers check color contrast ratios, simulate different types of color blindness, and ensure their designs meet WCAG accessibility standards. It integrates seamlessly into the design workflow, allowing real-time accessibility checking without leaving the design environment.
Accessibility Tools for Designers
Free browser toolkit for checking design screenshots with contrast analysis, vision simulation, attention heat maps, and alt text support. Includes research-based guidance and a design checklist.