Premium Workshop: Accessibility for designers – from mockups to documentation

Accessibility is often put on the plate of developers. But, a lot of accessibility issues can be caught and avoided in the mockups and design phase, by following best practices such as WCAG guidelines. If you’ve never heard of it, you are in the right place! 

In this workshop, we’ll explore how to identify and address design issues early on, ensuring accessibility from the start. Things like: are we achieving the right contrast ratio, and are colours being used effectively? But colours are just the tip of the iceberg!  What about typography, is this text easy to read? Forms are also a crucial aspect of accessibility: I’ll teach you how to make them more inclusive, from error prevention to recovery and beyond. We’ll focus (haha pun intended) on essential elements like keyboard navigation, gesture controls, and drag-and-drop functionality—key factors in designing and documenting complex components for users with diverse disabilities. We’ll check screen reader usage and how to build and document a strong information architecture using headings, titles, and identifying landmarks. We’ll cover alternatives to images, what designers can do about that, and multimedia, audio, video content, to charts and graphs. 

The goal of this 1 day workshop is to equip you with the theory, but also the tools to help you audit, design, and document accessible mockups for your products and services. And to communicate it better with your development teams.

This is a hands-on workshop, we will work in Figma, in small groups, with different plugins, tools, and checklists. At the end of the workshop, you will get access to my slides, but also to checklists, cheat sheets and design tools to apply to your own designs.

What will attendees learn?

• How to prevent fundamental accessibility issues in 4 areas: Visual design, interactions, navigation, and content availability.
• How to design mockups of components and pages that take accessibility guidelines into account.
• Understand what (future) accessibility issues designers can already preemptively fix in mockups.
• Develop new skills for reviewing designs, identifying accessibility problems in existing design mockups, and resolving them.
• Understand how to foster better team communication about accessibility by using design documentation.

Who is the workshop for?

• Designers who want to learn more about accessibility and how to improve it.
• Designers who need to communicate accessibility best practices to their development teams.
• Coders who work with designers and want better communication around the topic of accessibility requirements.
• Project people (POs, PMs) who want to push accessibility on a project and need to have designers and developers collaborate on accessibility and interactions and need tools.

What are the attendee requirements?

• You don’t need any specific accessibility knowledge to attend, but you will need to be familiar with using a design tool for the workshop. We will use Figma for the exercises.
• You’ll also need a computer (Mac or Windows) with the following app installed: tpgi.com/color-contrast-checker.