When to use Accessibility Labels

There are a few circumstances when you’ll want to set your own accessibility label, such as…

1. An interactive element that you haven’t given a text value to, such as an image button.
2. An interactive element with a long visual label.
3. An interactive element with a short visual label that takes context from your design.
4. A control or view you have created yourself or built by combining elements.
5. Images of text.

Elements Without a text value

Take the controls for a music player as an example. Below is a screenshot of the controls for Spotify’s music player, each icon is a button. They’re all visual, but not text. As they’re buttons they’re all available to assistive technology but without a text value, assistive technologies would not know how to present each button to your user. VoiceOver would likely read each as ‘button’ giving no indication what each button does. Voice Control users would have to refer to each button by a number based on the order it appears on the screen.

Instead, Spotify add accessibility labels to each of these buttons, you can see these labels below. Each label is short and tells our user exactly what will happen if they activate it.