Accessibility for designer: where do I start?

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: July 2024

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.

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”:

Example of 2 pages of the checklist and of the Figma and Sketch file

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 article series on accessibility topics

  • Accessibility foundations if you are new to accessibility and you don’t know where to start, Tetralogical built this foundation series of articles that provide you overviews on core considerations.
  • Learn About Accessibility a collection of articles on different topics around accessibility, from page structure to colors, font choice keyboard navigation, focus, images, forms, data viz and more, by ta11y

Free videos on accessibility

Paid Training

For more freehand paid training you can check Digital Accessibility Training Courses Roundup and the Course List on the W3C site

Books

Help to design accessible components

Inspiration for accessible components

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

Articles on building accessible components

Some tools and plugins to help you design accessible products

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:

Other articles you might enjoy:

Published on 31 March 2023

in Accessibility

By Stéphanie Walter