When talking about accessibility, especially to designers, I’m often asked “where should I start if I am interested in the topic and want to learn more?”. If you know my content, you know I’m hoarding many resources. So, here we are: I put together (and will update) this list of resources, articles, blog posts, and checklists to help you, designers, get started on your “building more accessible products” journey.
Last update: July 15, 2023
Here’s the outline to jump to a section:
About what went on that list, why, what did not, and what language I use
A lot of accessibility issues can be prevented in the design phase. So, this list focuses mostly on designers. I won’t go into details on accessibility for developers, it would deserve its own list one day. I also do not recommend things I haven’t read or watched. And I do not recommend things I haven’t used and or tested. I value quality over quantity. So, this list is, of course, non-exhaustive. There are tons of content out there on the topic. Some aren’t here because I read or tried them and didn’t think they brought enough value to me, my work, and my readers as well. Some are not here because I don’t know about them. If you have a tool or resource that you think is missing, reach out by email and I will check! Also, inclusive design resources and PDF (or general document accessibility) are beyond the scope of this article too, but I’ll put a list at the bottom to dig into those topics.
Also, I will use “disabled people” in this article to refer to anyone with a disability, visible or invisible. For more detail as to why, Kitty Giraudel explained it better than I could.
Understand how disabled people use the web
A first step in your journey towards accessibility and designing for accessibility is to understand how people with different disabilities use the web. Here you go:
Making the case for accessibility
You will need to convince people to give you time, and budget to train yourself and your team for accessibility. Here are some resources that should help convince people that products and services need to be accessible:
Getting started – the bare minimum you can do (and not do)
A few articles on the basics, aka, the minimum things you can do
Design accessibility checklists and cheatsheets
People love checklists: they help process a lot of information in an easier way. It’s also a good way to get, an introduction to a topic. Then you learn where you need to dig further. So, to get you started, here are some accessibility checklists
So, if you want something like “checklists” maybe (sounds like a memory refresher)
- Access Guide this checklist presents accessibility guidelines in the form of small cards. And, I like small cards because they are easier to process
- Dos and don’ts on designing for accessibility some posters with guidelines for different types of disabilities
- Accessibility for Teams, a ‘quick-start’ guide for embedding accessibility into your team’s workflow. The guidelines are ordered into 5 categories: product, content, UX, visual design, front-end
- Accessibility for teams, another site (yes with the same name as the previous one) that offers starter guides to deliver accessible products for team members: a checklist for teams, and specific guides for product managers, content designers (coming soon), UX and UI designers (and soon front-end devs and testing). Because, at the end of the day, everyone has a role to play when it comes to delivering accessible products and services.
- WCAG for designers WCAG for designers as well
- Accessibility Not-Checklist, a checklist that guides you to make your you haven’t missed anything regarding the accessibility of a site. I like that you can filter by role, for example, what should designers pay attention to?
- How Inclusive Are Your Designs? Use This Audit to Find Out a PDF checklist you can download with items about accessibility, inclusive design, etc.
- Web Writing Checklist, not 100% accessibility, but a checklist to help you write better (which will impact different types of users with different disabilities)
- Reviewing a design for accessibility: this checklist is written as an article to help you understand what to be careful about when designing for accessibility (sadly this is a non-accessible PDF with no text version though)
A couple of “checklist articles”:
If you need help with accessibility documentation, I have my own A4 “Checklist – Accessibility & Interactions Documentation for Designers” that comes with some Figma and Sketch annotation kits, to help you document accessibility in the design phase.
Get the Checklist and Annotation kit
More “technical” checklists: WCAG and ARIA checklists
Accessibility training, videos, and books
Free Accessibility Training
Free videos on accessibility
For more freehand paid training you can check Digital Accessibility Training Courses Roundup and the Course List on the W3C site
Help to design accessible components
Let’s start with the basics: if you want to learn what designers can need to be careful about with accessibility, check my full article on the topic: A Designer’s Guide to Documenting Accessibility & User Interactions. And, there are tools that can help us design and document accessibility:
- I have a whole specific list of tools to test contrast ratio and colors
- Color ratio Matrix tool: a matrix tool I really like that helps with a color contrast ratio
- A11y – Focus Orderer a Figma plugin to document focus order
- A few Figma/ Sketch accessibility annotation plugins:
- Fluent Accessibility Notation
- Accessibility annotation Figma template
- A11y Annotation Kit — Figma
- Accessibility bluelines — Figma
- Accessibility Bluelines (Sketch, Adobe XD, Invision Studio)
- Include – Accessibility Annotations: a useful Figma plugin to help you annotate landmarks, focus groups (native), headings, reading order, alternative text (for images, it’s missing icons for now), check touch target, color contrast, create de 200% version of your page, document complex gestures (native) and more.
- Text Resizer: a Figma plugin to help you preview your content zoomed at 200% and more
- Material Design has awesome tools to help you build accessible palettes for native apps. You then get fully customized components, with colors already calculated to have a sufficient contrast ratio:
Testing accessibility: automated, manual, and testing with disabled users
The accessibility of your site, product, a mobile app can be tested, from automated tests to usability tests with disabled users.
Automated Accessibility audit tools
Let’s start with automated testing. Keep in mind that automated tests is never enough. They will miss some issues (and might bring issues that are not real ones). So, don’t just stop at automated tests, always have humans test it too. Here are a couple of tools you could use to do a first automated accessibility test:
How to test your websites yourself
Speaking of human testing things, here are some resources to help you test sites yourself:
How to test your website with disabled people (usability testing)
I highly encourage you to test your sites with disabled users. This will bring you a lot of information on issues they might have and that you need to correct. Here are some guidelines and places to help get started:
More places to find content about accessibility
- The A11Y Project will always be my go-to to find information, resources, and tools for accessibility
- Stark Accessibility Library: Stark collects quite a big list of tools, and books to help you keep learning
- Accessibility Weekly is a weekly newsletter that brings accessibility news directly to your mailbox
- Accessible-social.com: Alexa (Alex) Heinrich curates resources and guidebooks on the accessibility of social media platforms
Resources on Native Apps Accessibility
Some people often look for accessibility best practices for native apps. First, WCAG is device agnostic. So, WCAG criteria apply. But there are a few extra specific guidelines for native apps. Here are a few places to get you started:
Resources on Inclusive design
While accessibility focuses on users with specific disabilities, inclusive design has a bigger scope. It’s a set of methods and tools designed for everyone, taking into account disabilities, environment, socio-economical background situation, race, gender, and anything that might influence how and why they use a product or a service and how. Here are a couple of resources to help you start digging into this, very big topic:
- Inclusive Design Toolkit, a toolkit by the University of Cambridge
- Microsoft Inclusive Design, yeah, Microsoft has its own toolkit with a lot of documentation, activities, little illustrations, etc.
- Inclusive Design Principles, a collaborative resource by Henny Swan, Ian Pouncey, Heydon Pickering, Léonie Watson to build more inclusive products
- Ethical Design Guide: great content on inclusive design and accessibility as well
- If you want to make your event accessible, you can check An Accessibility & Inclusion Checklist for Virtual Events