Designing accessibly means taking into account a lot of different aspects of design and thinking about how each of them affects our users. We must consider each of the types of disabilities that our users experience, as well as the information architecture, visual design, and interaction design of our work.
When we design for the web, we design for all of our users.
Topic Guides
General
- General accessibility design guidelines
- Annotating designs for accessibility
- Design heuristics affecting accessibility
- Using color
Page layout and Navigation
- Consistent Navigation
- Difference between reading order and focus order
- Reading order
- Focus order
- Links
- Links vs Buttons
- Skipping repetitive content such as the global navigation
- Landmarks and regions
- Forms
- Page Titles
- Page Headings
Icons and imagery
- Identifying image types
- Providing a location for a long description
- Avoid text in images
- Designing charts and complex images with SVGs
- Using <canvas> accessibly
- Avoid causing seizures
Audio and video
Error messaging patterns
Documenting accessibility
This is one of those topics where everyone seems to have their own solution, probably because how you document, what you document, and who’s involved varies widely from one location to the next. Here are some resources:
- A Designer’s Guide to Documenting Accessibility & User Interactions by Stephanie Walter
- Accessibility Annotation Kit (Figma library) by Indeed and Stephanie Hagadorn
- Fluent Accessibility Notation (Figma library) by Microsoft
- Accessibility Annotation Library by Twitter
Additional Resources
- 14 Easy Ways to Make Your Website More Accessible by Carl Cahill and Joss Cook on Creative Bloq
- Optimizing keyboard navigation using tabindex and ARIA by Sara Soueidan on her website.
- Become an accessibility champion by using mockup annotations by Dan Bivins, Jeana Clark, Natalie Hill, and Mean Sripal on Ad Hoc
- Where to Put Focus When Deleting a Thing by Adrian Roselli