What is aria-label and How to Use It

What is aria-label

The aria-label attribute in HTML is used to provide an accessible name or label for an element that does not have an inherent label or that needs a more descriptive label than its content provides. This attribute can be used with any element that accepts the aria-label attribute.

For example, consider a button element that contains an icon or image, but no text. Without a label, a screen reader user may not know what the button does. In this case, the aria-label attribute can be used to provide an accessible name for the button that describes its purpose. Here's an example:

html

<button aria-label="Play video">
  <i class="fas fa-play"></i>
</button>

In this example, the button element contains a Font Awesome icon of a play button, but no text. The aria-label attribute is used to provide an accessible name for the button that describes its purpose to screen reader users.

Another example is an input element with a search icon. Without a label, a screen reader user may not know what the search input field is for. In this case, the aria-label attribute can be used to provide an accessible name for the input field that describes its purpose. Here's an example:

html

<label for="search-input" class="visually-hidden">Search</label>
<input type="text" id="search-input" aria-label="Search">

In this example, the label element provides the accessible name for the input field. The aria-label attribute is typically used as an alternative when a visible label isn't appropriate or possible.

Example of using the aria-label attribute on the `<button>` tag:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <button aria-label="Close" onclick="myDialog.close()">X</button>
  </body>
</html>

Try it Yourself »

Here, a <button> is styled like an ordinary “close” button. As there isn’t anything indicating the purpose of the button, we used the aria-label attribute, which provides the label to assistive technologies.

In summary, the aria-label attribute is used to provide an accessible name for elements that lack visible text. It should be used as a last resort when visible content cannot adequately convey the element's purpose. This attribute is important for making web content accessible to users with disabilities, including those who use assistive technologies like screen readers.

WARNING

Note: aria-label is not intended for styling or DOM selection. While CSS and JavaScript can target elements using [aria-label='...'], it is not best practice to rely on it for layout or scripting. Use semantic HTML or dedicated id/class attributes instead.

What is aria-label and How to Use It ​