Skip to Main Content
$65,391
$125,000

Donate Now to Support Digital Equity for People with Disabilities

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.