Use accessibility annotations to capture accessibility intent directly in your Figma design.
Who can use this feature?
- Available for the Accelerate and Enterprise packages.
On this page:
About annotations
Annotations help designers communicate image alternative text, heading structure, keyboard focus order, semantic information, and assistive-technology behavior during handoff. Saved annotations appear in Design Companion and on the Figma canvas.
Annotations document design intent. They do not update application code or guarantee that the implemented experience will be accessible. Review generated content and confirm that developers implement the documented requirements.
Overview of the annotations workflow
Open the annotation type from the Annotations section.
Select the relevant frame or element on the Figma canvas.
Add the annotation manually or use an available generation option.
Review the annotation in the plugin and on the canvas.
Edit, show, hide, or delete the annotation as needed.
Access the Annotations section from the Design Companion main screen. It includes the following annotation types:
Annotation type |
Use it to |
Image alt text |
Document alternative text for an informative image or identify an image as decorative. |
Headings order |
Document the intended semantic heading level for text elements. |
Focus order |
Document the intended sequence in which interactive elements receive keyboard focus. |
Accessibility notes |
Document accessible names, semantic roles, screen-reader behavior, metadata, ARIA requirements, and other implementation guidance. |
Create image alt-text annotations
Use image alt-text annotations to define how an image should be communicated to assistive technologies during design handoff. You can write alternative text manually, identify an image as decorative, or generate annotations for a selected frame.
Add an image alt-text annotation manually
From the Design Companion main screen, go to Annotations and select Image alt text.
Select the image, frame, or supported element you want to annotate on the Figma canvas.
Select Add Alt Text annotation.
Enter the alternative text in Alt text description field. The field supports up to 500 characters.
Alternatively, select Mark as decorative when the image does not convey information and should be ignored by screen readers.
Select Add annotation.
The saved annotation appears in the plugin and in an annotation frame on the Figma canvas. Decorative annotations include guidance to use an empty alt attribute.
The following image shows where you can enter alternative text or mark the selected image as decorative.
AI generated image alt-text annotations
AI-generated descriptions and classifications can be incorrect or incomplete. Review every generated annotation before design handoff. This workflow is separate from the Ask Level AI recommendation shown inside a missing image alternative-text finding.
To generate Alt-text annotations with AI:
Open Image alt text from the Annotations section.
Select the top-level frame you want Design Companion to analyze.
Select Generate with AI.
Review the generated annotations and whether each detected item is classified as meaningful or decorative.
Edit any generated text or classification that does not reflect the purpose of the image.
Use the visibility controls to show or hide the generated overlay. Select Remove AI to remove the automatically generated annotations.
Create heading-order annotations
Use heading-order annotations to explicitly document the intended semantic heading level instead of relying on visual styling alone.
From the Design Companion main screen, go to Annotations and select Headings order.
Select a text layer on the Figma canvas.
Choose the intended heading level from H1 through H6.
Select Add annotation.
Repeat the process for each heading you want to document.
The selected heading level appears in the plugin and on the Figma canvas. From the plugin list, you can edit the heading level, hide or show the annotation, or delete it.
Note: Heading annotations record the designer’s intended structure. They do not automatically validate the complete heading hierarchy or prevent skipped heading levels.
Work with focus-order annotations
You can create focus order annotations manually or automatically, edit them, regenerate them, or remove them.
Add a focus-order annotation manually
Use manual annotations when you already know which layer should receive focus and where it belongs in the sequence.
To generate focus order annotations manually:
From the Design Companion main screen, select Focus order.
Select Add.
Select the layer you want to include in the focus order on the Figma canvas.
In Focus order number, enter the layer’s position in the sequence.
Select Add manual annotation.
The annotation appears in the plugin and as a numbered marker on the canvas.
Generate focus-order annotations automatically
To generate focus order annotations automatically:
From the main screen, select Focus order.
Select the frame you want Design Companion to analyze.
Select Generate.
Review the proposed focus order in the plugin and on the canvas.
Design Companion identifies potential focusable elements, assigns a numbered order, and classifies each result as:
Guaranteed focusable
Likely focusable
Needs review
Review and edit focus-order annotations
For individual annotations, you can:
Change the focus-order number.
Move the element earlier or later.
Mark it as guaranteed focusable.
Locate it on the canvas.
Hide it.
Delete or dismiss it from the focus order.
Regenerate or remove automated annotations
Use the following UI options:
Regenerate: Runs the automated analysis again.
Clear AI: Removes all AI-generated focus-order annotations.
Add: Creates a manual focus-order annotation.
Hide all: Hides annotations without deleting them.
Note: The generated sequence is a proposed focus order. Review it against the intended keyboard-navigation experience, especially for complex or non-linear interfaces.
Create accessibility notes
Use accessibility notes for implementation requirements that are not fully communicated by the visual design.
From the Design Companion main screen, go to Annotations and select Accessibility notes.
Select the appropriate note type.
Select the relevant frame or element on the Figma canvas.
Select Add annotation.
Complete the required fields for the selected note type.
Select Add annotation to save the note.
The saved note appears in the plugin and in an annotation frame on the Figma canvas.
Note type |
Use it to |
|---|---|
Accessible Name |
Specify the name assistive technologies should announce when the visible design does not provide a clear label. |
Semantic role |
Document the intended semantic role of the selected element. |
Screen reader behavior |
Describe announcements, state changes, action hints, or focus behavior. |
Metadata |
Document page title and language information. |
ARIA |
Document required ARIA attributes or related implementation guidance. |
Additional notes |
Add general accessibility or implementation guidance that does not fit another note type. |
Manage annotations
Saved annotations are listed in their corresponding workflow. Depending on the annotation type, you can use the available controls to:
Edit the annotation from the plugin list.
Show or hide the annotation on the Figma canvas.
Delete the annotation from both the plugin and the canvas.
Locate or focus the associated element on the canvas.
Regenerate or clear AI-generated annotations where those controls are available.
Annotations are saved with the Figma design and remain available when you reopen the plugin. Use the plugin list to edit annotations; editing directly from the canvas may not be available for every annotation type.
Comments
0 comments
Please sign in to leave a comment.