When you design with accessibility in mind, developers can focus on following the design specs and testers shift from discovering gaps to verifying successful implementation.
Accessibility checklist
Check that color contrast passes the minimum requirements for your content, font size and weight. We recommend using Contrast plugin in Figma or something similar rather than guessing the rating by eye.
Provide roles and informative labels to elements on the page so screen readers can announce them. Refer to official list of roles here.
Provide keyboard focus order for interactive elements on the screen. Proper order is key to make keyboard navigation smooth and intuitive.
Mark regions and landmarks, organizing content in logical blocks that users can understand. You can find the full list of regions here.
List headings according to the content logic. Larger style does not necessarily mean it’s bigger in hierarchy.
Add a “Skip to content” link when necessary. These can serve as solid points for users to jump from header section into content, speeding up many hits before landing on item selection.
Add alternative text to images and icons. They help describe the contents in case page doesn’t load properly or users have difficult time seeing what’s on the screen.
Show focus state of focusable elements. Currently selected interactive items need to be visually visible and different from page content.
Additional information
- ✅ Point out information related to interactive elements.
- ✅ List labels, buttons, and links.