Articles, resources, checklists, tools, plugins and books to design accessible products
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: October 18, 2023.
Please note that while I update this article regularly, some of the resources linked here might not have been updated to WCAG 2.2 yet. BUT, I won’t promote any overlay solutions.
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.
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:
Empathy Reifies Disability Stigmas a great video talk by Liz Jackson. So many things to unpack about empathy and how much damage it can actually do, how we turn disabled people into “design problems we can fix”. We need to stop.
Overlay Fact Sheet explains what overlays solution are, and why they are not a good idea. Because, nope, overlays won’t magically solve the accessibility issues.
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
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?
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)
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.
First, note that this is inspiration to get an idea of how components are supposed to work, when it comes to keyboard standards. Please make sure you don’t just copy and paste that code, but test the components with assisting technologies to make sure it works. Also, once your components are standards, you can run usability with disabled people, to make sure your design system is usable and works as expected.
The ARIA Patterns: example of complex accessible components using ARIA, created and maintained by the w3.org community, including some description on how it’s supposed to work according to standards.
Inclusive Components: a blog and a pattern library. All about designing inclusive web interfaces, piece by piece. There is also the book Inclusive Components
Gov.uk design system: the UK government design system has accessible components, with online demos to test keyboard navigation, screen reader and more. Also, don’t forget to check the Patterns page. They have guidance on how to ask users for things (name, email, etc.), how to help users with things (error prevention, cookies, etc.), in an accessible and user-friendly way.
USWDS: the U.S. Web Design System has lots of components you can play with online, including some complex tables featuring some sorting with keyboard navigation.
React Aria Components: Adobe’s new React framework promises components with built-in top-tier accessibility, and internationalization out of the box. Examples are nice for desi
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 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:
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:
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:
Stay informed when I publish new articles and save some precious time on content curation. Join a select group of developers, designers, UX researchers and agencies who also get exclusive resources and discounts along the year.
(If you didn’t get a confirmation email, check your spam box.)