Accessibility Annotations for Design to Dev Handoff
taught by: Paul Adam
Session Summary
Part of shifting accessibility left is ensuring that designs are accessible before developers start coding. Learn how to annotate your designs with accessibility properties and requirements so that developers have the proper guidance to create accessible sites and apps.
Description
Find Accessibility Annotations for Design to Dev Handoff on the Knowbility Learning Center
In this session we will learn the process for annotating a Figma design with accessibility properties and requirements before hand off to developers. We'll cover the minimum accessibility properties required to annotate in a design, the most common annotations, and additional accessibility properties.
We'll discuss the pros and cons of annotating focus order and when it's necessary to annotate keyboard behavior.
We'll talk about the importance of linking your annotations to the ARIA Spec patterns or your internal web components.
Various techniques for creating accessibility annotations in Figma designs will be discussed and demonstrated.
Best practices for the hand-off process from design to dev will be discussed.
We'll discuss alternatives to using Figma due to its lack of screen reader or keyboard accessibility.
Practical Skills
- Learn the best practices for accessibility annotations and learn what annotations to avoid.
- Learn how to annotate a Figma design with accessibility properties for design to dev handoff.
- Learn why accessibility annotations are important and the different types of annotations and techniques available.