Annotating Designs for Accessibility

Many designers create designs focused on the visual aspects and not so much on how the end result should operate. Over 60% of the Web Content Accessibility Guidelines criteria can be realized during the design phase of a project. If these are not communicated to developers, the end result may contain numerous accessibility defects. Annotations is one mechanism for this communication.

Designs should also contain, for example, how a menu system should operate not only with a mouse but with a keyboard, the semantic heading and landmark structure of a webpage, alternative text for images and images used for buttons or links, accessible colors for elements upon hover, focus, etc., focus order, table headers and captions, an accessible color palette, and much more. this can be accomplished by incorporating annotations into a design.

Annotating a design will be demonstrated using the Figma design system (but the lessons are applicable to other design systems as well). how to annotate for the most common features will be shown. attendees will be able to participate in a group session to annotate a sample design.

Finally, implementing annotation for the first time can be overwhelming, so a strategy for integrating design annotations in your process will be described.