In this article, we introduce features and use cases of aria-label and aria-hidden.

Before reading this article, we recommend you to read "Accessibility in Studio."

When HTML settings are appropriate, a screen reader usually work properly. However, there are cases that a screen reader doesn't work properly even if HTML settings are perfect. It's because HTML does't fully cover a context or structure of a web page.

In that case, we use WAI-ARIA that allows you to extend the meaning and structure of HTML. WAI-ARIA can tell a screen reader what a content of a website means, what operations you can perform with an element of a website, and what state a website is in.

WAI-ARIA is complex and it is not easy to determine "where to use it and where not to use it". Hence, in this article, we will not give a details of WAI-ARIA, but will introduce some use-cases in Studio.

What is aria-label?

Aria-label is one of the attributes defined in WAI-ARIA. It allows you to define a string that labels an element for assistive technologies such as screen readers. If you add the aria-label to an element, a screen reader will read a text in the aria-label instead of a content of the element.

For instance below, when screen readers read the button with the aria-label of "help", it reads "help" and ignores the “?”.

<button aria-label="help">?</button>

Please note that the aria-label is not for adding a supplementary information to an element. It is an alternative text which will be read aloud, so the aria-label needs to be understandable by itself.

*Aria-label text will not be displayed on the browser screen.

What is aria-hidden?

The aria-hidden is one of the attributes defined in WAI-ARIA. When an element contains an aria-hidden attribute, a screen reader ignores it and doesn't read it aloud.

For instance, as shown below, an icon is set aria-hidden="true", then a screen reader will skip the icon and won't read "directions_car," but it will read "car."

<div>
  <i class="material-icons"　aria-hidden="true">directions_car</i>
  <p>car</p>
</div>

How to set up aria-label and aria-hidden in Studio

You will see the accessibility section in the Box settings panel when selecting a box.

When aria-hidden is set to an element, a screen reader won't read aloud a text of the element. When you add text in the aria-label area, the screen reader reads aloud the text in the aria-label.

If you set both aria-hidden and aria-label at the same element, the screen reader won't read aloud the text as the aria-hidden is in priority.

It's better not to use WAI-ARIA (aria-label and aria-hidden)

Please consider WAI-ARIA (aria-label and aria-hidden) as first aid for a specific problem. If used carelessly, there will be a discrepancy between what you see visually and what the screen reader reads out. It may cause confusion as the content of the page is conveyed not accurately.

We introduce some cases that you can use WAI-ARIA in this article, and please consider them as the only cases that you can use WAI-ARIA if you are new to this.

How to ensure Accessibility without using aria-label

When you place an image that has an information, you should place the image in Img mode and set the Alt attribute.

Example: Img mode with Alt attribute and no aria-label

If you want to set a link to the image that has an Alt attribute, group the image from the context menu and set a link to the parent box of the image as you can't set a link to an image with Img mode in Studio.

Use cases of aria-label in Studio

There are two main use cases of the aria-label in Studio.

Placing an image with information as a box mode
Placing an icon with information

Case 1: Place an image with information as a box mode

The aria-label is very useful when you cannot have an image mode box with the alt attribute as introduced earlier. If you are forced to place an image that has information in Box mode because of a layout, set aria-label to the image.

Example: Box mode with aria-label

However, there are some disadvantages when using the Box mode with aria-label.

The alt attribute can be translated, but the aria-label is not in many cases. (it can be translated only on Chrome browser)
Search engines explicitly state that they read and interpret alt attributes on a site, but not for aria-label.
The alt attribute will show the text on the display even when it failed to load, but the aria-label will not show the text if the image fails to load or if the CSS is disabled.

Case 2: Placing an icon with information

In Studio, if you just place an icon box (Material Icons or Font Awesome), the screen reader will not read it properly.

For instance, the screen reader reads placed heart icon as "favorite_border" if it is a Material icon, and noting will be read aloud if it is a Font Awesome icon.

In this case, you can set aria-label to the icon. As you can see/hear, it reads "favorite image" regardless of what kind of icon is used. You can use the aria-label when a text contained in an element is not appropriate and cannot be changed for some reason.

Use cases of aria-hidden in Studio

There are two main use cases of the aria-hidden in Studio.

Placing a box for decorative purposes
Placing an icon and text for decorative purposes

Case1: Placing a box for decorative purposes

There are cases that you place a text for decorative purposes. Even in such a case, a screen reader read aloud the text and it makes users confused. In this case, you should use aria-hidden for the text you want to ignore, and screen readers will not read aloud it.

Case 2: Placing an icon and text for decorative purposes

For instance, when you have a help icon and the text box labeled "help" in the same group, you should set the aria-hidden to the icon to make a screen reader read only the text and ignore the icon.

<a href="https://studio.design">
  <i class="material-icons" aria-hidden="true">help_outline</i>
  <p>Help</p>
</a>

Additionally, when you have an image and text that means the same information, you don't need to use aria-hidden. Instead, set Alt attribute and aria-label if the image is in Img mode. If the image is in Box mode, leave the aria-label blank. Then the screen reader only reads the text.

<a href="https://studio.design">
  <img alt="" src="https://....">
  <p>Help</p>
</a>

Notes on aria-label (for advanced users)

In Studio, you can set the aria-label attribute to all elements (boxes), but depending on the combination of the element and the screen reader, the aria-label text may or may not be used.

We confirmed the use cases in this article works properly by multiple devices (iOS VoiceOver, Mac VoiceOver, Android Talkback, Windows Chrome + NVDA)

For more details, please refer to the following documents.

Search Engine Optimization