Skip to main contentSkip to filter inputPrimer

Features

While this toolkit can greatly help developers during a hand-off, it also helps designers validate that their designs are accessible to everyone! Included in this kit are annotations and tools to help with the following:

Tools to help design effectively

These components help make designs and annotations easier to understand by helping organize a design canvas, label flows, clarify design statues, and guide developer handoff.

Flow lines

Organize your frames and flows with labels to convey intent for transitions, interactions, validation states, and focus management.

Seven purple flow lines arranged in consecutive order on a gray background. From left to right: a L-shape arrow pointing upwards with a purple rectangle in the middle with text: Write some general notes in a post-it!; a straight dotted arrow pointing down; a S-shape curve pointing left; a curved arrow pointing right with a keyboard shortcut label: Ctrl + X; a straight dotted arrow pointing right with a mobile gesture label 'single tap' that below it, has a blue rectangle with text 'Whoa, attach notes to stuff'; a S-curve dotted line with a green label that says Success; a L-shape solid arrow pointing left with a dark red label 'Focus managed' and under, says in a light red rectangle: A way to convey managed focus between two frames!.

A11y Checkpoints

Enable designers and engineers to check that a design’s color, hierarchy, content, images, interactivity, forms, layout, and keyboard operability are accessible for all users.

Screenshot of documents “Design Checkpoints” and “Engineering Checkpoints” next to one another on a gray background. Attached to the right of both their docs is the legend for checkboxes in the doc, and exercises associated with each checkpoint.

Toolkit Legend

Helps engineers understand how to read annotations by defining the basic elements used to create them.

Screenshot of the Annotation Legend document in several four parts on a gray background. The first is the heading of the doc and headings; second covers the annotations and descriptions for Landmark, List, Table, Metadata, and System Feedback; third covers Keyboard Shortcuts and different gesture types; fourth and last is Mobile Grouping, Mobile Buttons, Mobile Structure, and View Content.

Title cards, labels, flows, and more

Organize and label design canvas while providing info about project status and other metadata. Mark areas as “out of scope” or ambiguous due to being driven by third party data, user-generated content, and so on...

Various miscellaneous aspects of the annotation toolkit arranged in a rectangular shape against a gray background. From top left corner rotating clockwise--Project header, three labels, project status (in development, ready for dev, in review, and blocked), and two project title pages.

Notes

Add notes or post-its for freeform details that don’t fit into any other annotation category. Add a Question to the Figma canvas or document a Concern on any part of a design.

Annotation stamps for note, question, and concern. Note is purple with a document icon. Question is a darker purple with a circled question mark icon. Concern is very dark purple with an orange warning icon.

Document semantic structure

Break down content on a website to make it approachable and easier to find. This can make your experiences easier to digest, especially for complex content and high volumes of data.

Metadata

Define the document <title> shown in a browser's title bar and search engine results. Declare the language of the page or parts of the page.

Annotation stamps for title, language code, and use set language. Title has an auburn color and an icon of a paper with code brackets in front of it. Language code and user set language are the same dark brown with a globe icon.

Page structure and headings

Create a content outline sorted by heading hierarchy. Make semantic heading levels clear, regardless of visual design, to help screen reader users navigate a page.

Annotation stamps for Headings: levels 1 through 6, as well as H plus one and H up arrow. Below are three additional labels--h2 with a 1 and note icon; h2 with a light teal icon of an eye with a slash through it, and a light teal stamp that reads “only CSS” and has a capital H icon with a slash through it.

Landmarks

Mark and name important sections of a page so all users understand their specific purpose in navigating a webpage.

Annotation stamps for Landmarks with different text labels: header, nav, main, section, search, form, aside, footer, and div. They are all pink and have a wireframe icon.

Lists

Group a set of related items together so users can understand their context and association.

Annotation stamps for Lists with different text labels: unordered list, ordered list, list item, description list, description term, and description details. They are all indigo in color and have different icons for each type of element.

Tables

Present information in a grid with columns and rows to give quick access to tabular data and help people more easily understand complicated information relationships.

Annotation stamps for Tables with different text labels: table, caption, thread, table header, table body, table row, table cell, table footer, column group, and column. They are all magenta in color and have a table icon, with its defining group highlighted.

Make visuals and interactions accessible

Clearly define how you want each interaction to function so that they can be perceived and operated by everyone, regardless of their ability or assistive technology stack.

Media

Describe informative images or mark images as decorative that don’t convey any added meaning or context. Embed video and audio with alternative media.

Annotation stamps for Image, Decorative Image, Video and Audio. Image is green with a photo icon. Decorative Image is light green with a photo icon. Video is dark green with a video player icon. Audio is forest green with a music note icon.

Buttons and Links

Clearly label controls that perform actions on a page and those that navigate elsewhere.

Annotation stamps for Button, Link, and Skip to. Button is olive green with a press icon button. Link is navy blue with a link icon. Skip to is dark blue with a Link icon and forward button in the bottom right.

Form elements

Identify the hidden semantics of all form fields and controls that accept data input from users.

Annotation stamps for basic HTML form elements with different text labels: General Input, Email, Phone, Date, Time, Number, Text Area, Hint, Label, Field set, Legend, Select, Range, Checkbox, and Radio. All have an indigo hue and icon matching their label name.

Keyboard shortcuts

Note any specific keyboard shortcuts that a page, component, or control may provide to help users operate them or advance further.

Annotation stamps for individual keyboard keys: Control, Alt, Shift, Command, Option, Shift, Escape, Tab, Backspace, Delete, Space, Enter, Home, End, Page Up, Page Down, Left Arrow, Right Arrow, Up Arrow and Down Arrow. All are light gray and have a slight shadow to resemble a key on a keyboard.

User interactions

Communicate various basic, specialized, and advanced touch gestures, mouse actions, device settings, and platform functions.

Four light gray stamps conveying user interactions. From left to right: a pointer finger with a purple ring around it and label single tap; a mouse icon with right clicker dashed and label “right click”; a silhouette of a face with vertical bars coming out the mouth and label: voice input; a purple circle with slowly disappearing tail and label: loading.

Document complex components

Fill in the gaps that aren’t obvious from visuals and properties alone.

Primer A11y Presets

Bespoke annotations for our design system components. Learn more about how to use them.

Annotation stamps for Primer Web components with different text label: action bar, action list, action menu, autocomplete, button, icon button, link, text input, text area, and tooltip. They all use Primer's box icon and bold blue.

Interface guidelines

Basic labels and redlines can be used to document component anatomy and create Interface Guideline diagrams.

Six small purple annotation stamps with pins, arrows, and brackets with the word Text as a placeholder label. The last stamp has the number 48 in the center and arrows extending to either side to show a width measurement. There are two others without a text label, one with a number and one with a star icon.

System feedback

Highlight important information, potential issues, errors, and successful actions. Includes live region announcements.

Annotation stamps for error, warning, success, and info and live region. The colors are red, yellow, green, blue, and purple. The visual style is inverted from other stamps, with a lighter background and darker text and border.

Ordering

Outline the sequential order of focusable components to support keyboard navigation (using tab or arrow keys) while preserving meaning and operability. Preserve the logical reading order of content that screen readers perceive when it differs from what is shown visually.

Annotation stamps for focus order, arrow stops, and reading order. Focus order is red with an icon that resembles the label of a TAB key. Arrow stop is orange with an arrow pointing to the right. Reading order is bronze with an document icon that's a stack of horizontal lines with a downward arrow on one side.

Annotate native app designs for iOS and Android

Support accessible UI design by providing clear, structured notes for native mobile elements.

Screen reader grouping

Highlight multiple objects to be announced together. This may be related information, a group of actions with a common purpose, images and accompanying text, etc.

Three annotation lasso stamps for screen reader grouping. From left to right, a teal square lasso with a volume icon, a blue rectangular lasso with the VoiceOver icon, and a green square lasso with the Talkback icon.

Mobile structure and buttons

Mark controls that initiate actions; Headings that help users understand the purpose of, and navigate to, a section; and Titles that help users orient to new views.

Annotation stamps for Heading, Title, and Button. Heading is teal with a volume button. Title is navy blue with a VoiceOver icon. Button is a green with a TalkBack icon.

View context

Outline areas that may have different accessibility considerations than native UI elements, such as web views, user generated content, long blocks of text content that lacks headings, and non-native content.

Annotation stamps for View Context with different text labels: web view, text content, user generated, and non-native content. They are all cyan in color and have different icons for each type of element.