Web Accessibility Toolkit for Designers (checklist + A4 poster + Figma/Sketch/Penpot annotation kit)

Save time when designing, auditing mockups and documenting accessibility!

Many accessibility issues can be caught and avoided in the design phase. And, I want to help you with that. Great documentation helps teams implement accessibility and interaction requirements the right way.  To help you, I've built a couple of resources.

What will you get?

1. A4 poster "Minimum Baseline Checklist" (PDF / docx) 

A small 27 points checklist as a foundation guide. I listed the most important elements designers should check and document, to build more accessible products and services. While it doesn't cover everything, it provides a solid starting point for identifying common issues early on. While these alone won't guarantee full accessibility for a website. It’s a baseline, for when you don’t have time and still want to do the right thing. It’s the bare minimum to make impactful decisions, even when time and resources are limited. 

2. A full "Web Accessibility for Designers Checklist" (PDF / docx)

I've selected WCAG 2.2 criteria designers can have an impact on, and explained them. This is a full comprehensive 16 pages checklists, with criteria and explanations on what to do, check, and document for each. It's based on my own work, talk (a Designer’s Guide to Documenting Accessibility & User Interactions), and workshops. It helps your design teams check and not forget different aspects of accessibility that can be included (and mistakes that can be avoided) in the design phase. Updated with WCAG 2.2!

3. Design Annotation Kits for accessibility and interactions (Figma, Sketch, Penpot)

Design documentation helps avoid accessibility issues further down in the project, but also helps developers understand what is expected in terms of implementation. I've created some design tool components libraries you can drag and drop directly on your mockups to save time when documenting. You will get components for comments, annotations, arrows and flows, areas to annotation alt text and landmarks, and some interaction components for keyboard and mouse navigation, target area size checkers and more. The package contains those 3 formats:

• Annotation Kit Figma file (.fig)
• Annotation Kit Penpot file (.penpot)
• Annotation Kit Sketch file (.sketch)

You can see some of those components in action in my talk How to check and document design accessibility in your mockups

4. Accessibility For Designers -- Resources (PDF/ docx)

A curated list of resources to help you dig further in each topic of the checklists. I'm regularly updating them, so, expect an update once in a while.

This kit is also available in French.

Importing into Figma

Depending on your system, you can't just double click on the Figma files to import them. You need to go to your Figma, find the "import button". Check my small video if you need help with this.

License for the content

What you can do:

• Use this content for your daily professional work or at school if you are a student.
• Run a workshop with your colleagues at work internally.
• Credit me as the author: “Created by Stephanie Walter — stephaniewalter.design”. Do not credit me in any way that suggests I endorse you or your use of this material.

What you can’t do:

• You are not allowed to resell this content, or derivative products that directly copy this content (for example you can’t sell physical copies of the content, or copy it and sell it on your blog or shop)
• You can’t sell resell a workshop, using this content (fully or partially), as stand-alone training, present it at a conference*.
• You can’t copy this content or reproduce it in any way.
• You are also not allowed to redistribute it on your own site, or any other site.
• You can’t delete the copyright or other proprietary rights notice from any content.