What is ARIA Label?

Form with text area and button with ARIA Label text

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,

Heart Symbol

Or, the use of social sharing icons in the footer of a website.

Different Social media icons

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: 

	<i class="fas fa-heart"></i>

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>

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.

Leave a Reply

Your email address will not be published. Required fields are marked *


Save Time with Dashboards – An Innovative Approach to Measure Accessibility KPIs

“What’s measured, improves”

Related Articles

Need help? Book a call at a time to suit you

Schedule a 30 minute free appointment to talk to one of our experts. We will take this time to understand what you want to achieve before we go into business.
Skip to content