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:

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass) 

<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:

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

In this example, the label element is used to provide a hidden accessible name for the input field that describes its purpose. The aria-label attribute is used as a fallback in case the label element is not read by the screen reader.

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.

In summary, the aria-label attribute 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 is important for making web content accessible to users with disabilities, including those who use assistive technologies like screen readers.

However, the "aria-label" attribute is not used for selecting elements. To select an element, you can use JavaScript and DOM methods to find and manipulate the element based on its attributes, properties, or position in the document.