aria-label is used to "define a string to label an element." It is also often used in settings for text labels displayed when the cursor hovers over a specific element.

Introduction

People who can recognize visual information understand the design and content of a website by understanding the overall structure and the meaning of the elements in the screen display through a Chrome or other browser.

In addition to visual information, text-to-speech functions are used.

Where does the audio come from?

They come from the HTML tag itself and the attributes set in the tag.

If a design has a meaning that is not found in the HTML tags but is only visual information, the voice access users can't understand the meaning (e.g. the content of the site). One of the solutions to this problem is aria-label.

How to use

  1. Select the element (box) for which you want to set a read-aloud label.

  2. Enter the read-aloud content in the "aria-label" field in the accessibility column at the bottom of the settings panel.

Examples

  • If you have multiple global navigation pages and want to label each of them, you can set labels for global navigation, local navigation, etc.

  • Set the text to be read aloud (e.g. "close menu", "open menu", etc.) for a menu open/close button represented only by an icon.

  • Set the content such as "Read the rest of the article from November 11th" to be read aloud for a text link that says "Read more." This gives more information to the reader who doesn't understand the context.

Did this answer your question?