---

Through examples of real-world interfaces, Stéphanie will cover the fundamental accessibility issues that designers prevent in 4 areas: Visual Design, Interactions, Navigation, and Content Availability. We’ll explore detailed topics, such as efficient color application, keyboard navigation and interaction states, layout structure, navigation strategies, titles, links, and more.

The aim is not solely to help prevent design mishaps, but also to prepare designers to assess designs for accessibility problems and rectify them during the early stages. In addition to preventing mistakes, we will discuss accessibility features that designers can propose for the product roadmap. Lastly, we will explore how to document accessibility and user interaction requirements in a way that supports developers in their implementation.

You will be introduced to design tools and templates to help you audit and document the accessibility of their designs. Additionally, you’ll get access to Stéphanie’s Web Accessibility for Designers Kit (Checklist + Sketch / Figma Accessibility & Interactions Documentation Annotation Kit).

You’ll learn

• How to prevent fundamental accessibility issues in 4 areas: Visual Design, Interactions, Navigation, and Content Availability.
• Learn how to design mockups of components and pages and pages that take accessibility guidelines into account
• Understand what (future) accessibility issues designers can preemptively fix already in the mockups
• Develop skills to review designs to identify and rectify accessibility problems in already designed mockups
• Understand how to foster better team communication about accessibility, by using design documentation.

What you won’t learn

• This is a hands-on workshop, not a strategic one. I won’t have the time to cover in details how to push accessibility in organizations or all the legal ramifications of inaccessible products
• I won’t teach you all the WCAG guidelines from front to back, we will focus on what parts concern designers

Prerequisites

• You don’t need any specific accessibility knowledge to attend;
• You need to know how to use a design tool for the exercises. We will use Figma (download at figma.com/downloads)
• You will need a computer and Figma installed.
• You’ll also need this app installed (Mac or Windows): tpgi.com/color-contrast-checker

About Stéphanie Walter

Stéphanie is a User Researcher and Inclusive Designer who focuses on building user-centered, inclusive and accessible products and services. She spent the last 12+ years helping her clients deliver successful projects in different industries (banking, financial, automotive, healthcare, press, travel, etc.)

She likes to share her passion for her UX work all around the world. She has taken this beyond her successful blog, conferences and workshops. She discusses a wide range of topics, including mobile UX, enterprise UX, cognitive biases, inclusive design, design process and designer — developer relationship. You can follow her on social media for qualitative curated UX design content.

Time & Schedule

This workshop is split over four days. Our virtual doors open at 9:45, we start at 10 AM PT.

The workshop sessions will run on the following days:

• Mon, June 3, 9:30 – 12:00 PM PT (18:30 – 21:00 CET)
• Wed, June 5, 9:30 – 12:00 PM PT (18:30 – 21:00 CET)
• Mon, June 10, 9:30 – 12:00 PM PT (18:30 – 21:00 CET)
• Wed, June 12, 9:30 – 12:00 PM PT (18:30 – 21:00 CET)

Schedule

Day 1

9:15 AM PT
Virtual doors open, registration, chat, and introduce yourself.

9:30 AM – 11:30 AM

• Introduction to the concept of Accessibility
• How designers can impact on Visual design
  • Usage of Colors
  • Accessible contrast ratios: mockups evaluation and corrections
  • Documenting color systems for accessibility
  • On text resizing and typography

11:30 AM – 12:00 PM
Q&A with Stephanie on the day’s material. Chat with each other.

Day 2

9:15 AM PT
Virtual doors open, registration, chat, and introduce yourself.

9:30 AM – 11:30 AM

• How designers can impact on Interactions
  • Buttons and Links: accessibility guidelines and documentation
  • Forms and Inputs: accessibility guidelines and documentation
  • Documenting components Interactions (including keyboard accessibility)
  • More accessible interaction best practices

11:30 AM – 12:00 PM
Q&A with Stephanie on the day’s material. Chat with each other.

Day 3

9:15 AM PT
Virtual doors open, registration, chat, and introduce yourself.

9:30 AM – 11:30 AM

• How designers can impact on Way-Finding
  • In page navigation: documenting titles, skip links, headings, landmarks, etc.
  • Documenting semantic order for navigation
  • Navigation across pages

11:30 AM – 12:00 PM
Q&A with Stephanie on the day’s material. Chat with each other.

Day 4

9:15 AM PT
Virtual doors open, registration, chat, and introduce yourself.

9:30 AM – 11:30 AM

• How designers can impact on Content Access
  • Screen reader access to content
  • Image and icons: alternative text documentation
  • Video and Audio Content
  • Moving, scrolling, and flashing content
  • Screen orientation
  • Time Limits
  • Tables and charts
• Who should document all of this and when?
• Best practices when testing with disabled users

11:30 AM – 12:00 PM
Q&A with Stephanie on the day’s material. Chat with each other.