w3docs logo
  1. Snippets
  2. HTML
  3. What is aria-label and How to Use It

What is aria-label and How to Use It

What is aria-label

The aria-label attribute specifies a string labelling the current element. It helps assistive technology attach a label, which is otherwise anonymous, to an HTML element.

As we know, labels are important, as they help us to create a logical connection between an element and its description. For example, in the case of the HTML <input> element we can use the <label> element to specify what the <input> is about. However, when there isn’t an element that can function as a label, we can use the aria-label attribute.

By default, an HTML element uses its text content as the accessibility label. When the element has the aria-label attribute, the accessible name becomes the string, which it's passed in the attribute.

If there is a visible text that labels the element, instead of aria-label, you can use the aria-labelledby attribute.

How to use aria-label

You can use the aria-label attribute with typical HTML elements.

For example, let’s see how we can use the aria-label with the HTML <button> element.

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

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

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.

Let’s see another example, where we use the aria-label on the <a> element.

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="#" class="more-link" aria-label="read more about the article">more</a>
  </body>
</html>
Do you find this helpful?