Aria Label in HTML

Introduction

Aria label is an attribute in HTML that provides an alternative text for screen readers and other assistive technologies. It is used to improve web accessibility by conveying the purpose or meaning of an element to users who are visually impaired or have other disabilities.

Syntax

The syntax for aria label is as follows:

<tagname aria-label="text">

• <tagname>: The HTML element for which you want to provide an alternative text.
• aria-label: The attribute used to define the alternative text.

Usage

Aria label is commonly used in scenarios where an element does not have visible text, such as icons, images, or buttons with only icons. By providing a meaningful alternative text, you enable users with disabilities to understand the purpose of the element.

Here are some examples of using aria label in HTML:

Example 1: Icon

<button aria-label="Search">
  <i class="fas fa-search"></i>
</button>

In this example, the button contains a search icon. The aria label "Search" is used to describe the purpose of the button, allowing screen reader users to understand that it is a search button.

Example 2: Image

<img src="image.jpg" alt="Image Description">

In this example, an image is provided with an alternative text using the alt attribute. However, if the image is purely decorative and doesn't convey any meaningful information, the aria-label attribute can be used to provide a more concise alternative text.

<img src="decorative-image.jpg" aria-label="Decorative Image">

Example 3: Button with Icon

<button aria-label="Add to Cart">
  <i class="fas fa-cart-plus"></i>
</button>

This example shows a button with an icon representing "Add to Cart." The aria label "Add to Cart" describes the action the button performs.

Conclusion

Using aria label in HTML allows developers to make their websites more accessible by providing alternative text for elements that don't have visible text. It improves the user experience for people with disabilities who rely on screen readers or other assistive technologies. Remember to use aria label appropriately and provide clear and concise alternative text to enhance web accessibility.