How can we help you?

With Accessibility Notes, you can annotate anything from your websites and mobile apps to your TV or special experiences is just a click away.

Accessible Name

Having accessible names on your elements provides an improved voice and screen reader experience when no visible text labels are present.

1. Download/install Stark for Figma from the plugins menu
2. Go to Plugins > Stark
3. Open Accessibility Notes > Accessible Name on the plugin
4. Select the layer that needs the Accessible Name annotation
5. Select Add item
6. Provide an Accessible Name
7. Add a note (optional) to help out your developer
8. Click Done
9. The detailed annotations will be displayed in the Sidebar Panel alongside other written annotations on your file.

ARIA Notes

ARIA or Accessible Rich Internet Applications, are annotations that allow you to describe roles and attributes that can be added to HTML elements to improve accessibility. ARIA helps enable better accessibility for content (for example, helping screen readers operate correctly).

1. Download/install Stark for Figma from the plugins menu
2. Go to Plugins > Stark
3. Open Accessibility Notes > ARIA notes on the plugin
4. Select the layer that needs the ARIA note annotation
5. Select Add item
6. Add detailed annotations such as aria-haspopup="true"
7. Add an annotation label (optional)
8. Click Done
9. The detailed annotations will be displayed in the Sidebar Panel alongside other written annotations on your file.

If you want to read more about ARIA, we have several resources in our Library and we especially love this detailed guide from MDN.

VoiceOver

VoiceOver is a screen reader feature in Apple's macOS, iOS, and iPadOS, that reads onscreen content and relevant semantic info (such as headings, lists, and links) and assists in navigating through apps and websites, enhancing accessibility for users with vision impairments.

1. Download/install Stark for Figma from the plugins menu
2. Go to Plugins > Stark
3. Open Accessibility Notes > VoiceOver on the plugin
4. Select the layer that needs the VoiceOver annotation
5. Select Add item
6. Add detailed annotations such as Label, Value, Trait, Hint, and Note
7. Click Done
8. The detailed annotations will be displayed in the Sidebar Panel alongside other written annotations on your file. 

If you want to read more about VoiceOver, we have several resources in our Library.

TalkBack

TalkBack is a screen reader service provided by Google for Android devices. It offers spoken feedback to help blind and low-vision users interact with their devices, reading aloud text and other elements on the screen and providing navigational cues for apps and web browsing.

1. Download/install Stark for Figma from the plugins menu
2. Go to Plugins > Stark
3. Open Accessibility Notes > TalkBack on the plugin
4. Select the layer that needs the TalkBack annotation
5. Select Add item
6. Add detailed annotations such as Voiced Preview, Content, Value/State, Role, Action and Note
7. Click Done
8. The detailed annotations will be displayed in the Sidebar Panel alongside other written annotations on your file. 

If you want to read more about VoiceOver, we have a few resources in our Library.

Narrator

Narrator is a built-in screen reader in Microsoft Windows operating systems. It reads aloud text on the screen and provides audio cues to assist users with visual impairments. Narrator helps in navigating the interface, accessing content, and controlling the computer, enhancing Windows' accessibility practices.

1. Download/install Stark for Figma from the plugins menu
2. Go to Plugins > Stark
3. Open Accessibility Notes > Narrator on the plugin
4. Select the layer that needs the Narrator annotation
5. Select Add item
6. Add detailed annotations such as Name, Role, Value, Description, and Note
7. Click Done
8. The detailed annotations will be displayed in the Sidebar Panel alongside other written annotations on your file. 

TV Notes

Smart TV apps and 10ft experiences may need additional considerations for accessibility. Provide attributes to your developers to help them build out accessible experiences.

1. Download/install Stark for Figma from the plugins menu
2. Go to Plugins > Stark
3. Open Accessibility Notes > TV Notes on the plugin
4. Select the layer that needs the TV note annotation
5. Select Add item
6. Add detailed annotations such as Label, Role, Hint, Description, Audio cue, and Note
7. Click Done
8. The detailed annotations will be displayed in the Sidebar Panel alongside other written annotations on your file. 

React Native

If you're building your app with React Native, be sure to include the correct attributes to provide an accessible user experience.

1. Download/install Stark for Figma from the plugins menu
2. Go to Plugins > Stark
3. Open Accessibility Notes > React Native on the plugin
4. Select the layer that needs the TV note annotation
5. Select Add item
6. Add detailed annotations such as Label, Role, Hint, State, and Note
7. Click Done
8. The detailed annotations will be displayed in the Sidebar Panel alongside other written annotations on your file. 

General Notes

1. Download/install Stark for Figma from the plugins menu
2. Go to Plugins > Stark
3. Open Accessibility Notes > General Notes on the plugin
4. Select the layer that needs the General Notes annotation
5. Select Add item
6. Add detailed annotations such as Title and Note
7. Click Done
8. The detailed annotations will be displayed in the Sidebar Panel alongside other written annotations on your file. 

Have any questions about using Accessibility Notes? Don’t hesitate to reach out to us at support@getstark.co.