ARIA Label is an attribute that defines a value to label an interactive element. In other words, it provides the accessible name for an element. An aria-label is intended to be used when there is no visible label present.
A common example is the use of only icons instead of a button or a link without text. Most users are familiar with the use of the “heart” icon to like a post on social media,
Or, the use of social sharing icons in the footer of a website.
The accessible name for links or buttons come from the button text or link text. As the icons are wrapped inside a <button> or <a> tag, there is no place to display any visible button or link text. If there is no alt text used for the image, the element will not have an accessible name and will either announce “blank” or the file name of the SVG to users who rely on screen readers to navigate the web.
Aria Label Example
Below is a code example of a “heart” button without an accessible name:
<button>
<i class="fas fa-heart"></i>
</button>Below is an example of how to use the aria-label attribute to provide an accessible name for the “heart” button:
<button ARIA-label="Like this post">
<i class="fas fa-heart"></i>
</button>In this example, the ARIA-label attribute specifies that the button’s purpose is to “Like this post.” Screen readers will announce this label to users, ensuring that they understand the button’s function even without a visual label.
