Skip to main content

Accessibility for Designers

Stéphanie Walter
Your instructor
Stéphanie Walter
Tickets
Get a ticket

Workshop includes:

  • 🍵 Tea, coffee, snacks and drinks during the whole day
  • 🥪 Lunch
  • 📒 Paper and pen/pencil

Full-day workshop • Thursday, October 12, 2023
In the early stages of product development, accessibility considerations are frequently ignored. Accessibility is mistakenly considered a problem to be resolved down the line, often put on the shoulder of the development team.

But accessibility is the responsibility of the whole team. Including designers. And a lot of accessibility issues can be already foreseen and prevented during the design phase. As designers, you hold the power to shape product roadmaps by including accessibility best practices in your designs and advocating for accessibility features.

This practical workshop is designed to equip attendees with the knowledge and skills to design products that are accessible and user-friendly.

Here’s What You Should Be Expecting:

  • Real-life examples

    With real designs and solutions

  • Interactive & Practical

    Plenty of time for practice & feedback

  • Hands-on exercises

    With reviews by your teacher

  • Links & Resources

    Continue learning about accessibility

  • Dedicated Q&A time

    To ask all your questions!

  • Digital Smashing Certificate

    A well-deserved reward for your work

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).

What topics will we cover?

  • 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.

You’ll learn

  • 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
  • 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
  • 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
  • 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

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 & Location

This full-day workshop will take place the day before SmashingConf. The workshop will be running from 9:30 to 17:30 on Thursday, October 12.

Schedule for Thursday, October 12

9:00 – Doors open, Registration
9:30 – Introduction & Kick-off
11:00 – Coffee Break
13:00 – Lunch
14:00 – Afternoon Session
15:30 – Coffee Break
17:30 – The End

Save 100 EUR when signing up for the conference and a workshop!