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>