How to Use the aria-label Attribute in HTML


By squashlabs, Last Updated: October 9, 2023

How to Use the aria-label Attribute in HTML

The aria-label attribute is used in HTML to provide a text alternative for elements that do not have visible text. It is particularly useful for elements that are interactive and require user input. The aria-label attribute can be applied to a wide range of HTML elements, including buttons, links, inputs, and more.

Setting the aria-label attribute

To use the aria-label attribute, simply add it to the HTML element you want to provide a text alternative for. The value of the attribute should be the desired text alternative.

Here’s an example of setting the aria-label attribute on a button element:

<button aria-label="Add to cart">+</button>

In this example, the button element has an aria-label attribute with the value “Add to cart”. This attribute informs assistive technologies, such as screen readers, about the purpose or function of the button.

Related Article: The most common wastes of software development (and how to reduce them)

Best practices for using aria-label

When using the aria-label attribute, it is important to follow some best practices to ensure accessibility and usability:

1. Use descriptive text: The value of the aria-label attribute should be informative and descriptive, providing a clear understanding of the element’s purpose. Avoid using vague or generic labels that do not convey meaningful information.

2. Keep it concise: While it is important to provide descriptive text, it is also advisable to keep the aria-label value concise. Long and complex labels can be overwhelming for users of assistive technologies. Aim for clarity and brevity.

3. Avoid redundancy: In some cases, an element may already have visible text that adequately describes its purpose. In such cases, it is unnecessary to duplicate the same text in the aria-label attribute. Use the aria-label attribute only when additional information is needed.

4. Test with assistive technologies: To ensure the effectiveness of the aria-label attribute, it is crucial to test it with assistive technologies. Screen readers and other assistive technologies can provide insights into how the text alternative is conveyed to users.

Alternative approaches

While the aria-label attribute is a useful and commonly used approach for providing text alternatives, there are alternative methods available depending on the context:

1. aria-labelledby: The aria-labelledby attribute can be used to reference the ID of another element on the page that serves as the label for the element. This can be useful when the label text is already present in the document.

2. Visible text: In many cases, using visible text within the element itself can provide sufficient information for users. This is especially true for elements like buttons and links, where the visible text already conveys the intended action or purpose.

Related Article: Agile Shortfalls and What They Mean for Developers

You May Also Like

What is Test-Driven Development? (And How To Get It Right)

Test-Driven Development, or TDD, is a software development approach that focuses on writing tests before writing the actual code. By following a set of steps, developers... read more

Visualizing Binary Search Trees: Deep Dive

Learn to visualize binary search trees in programming with this step-by-step guide. Understand the structure and roles of nodes, left and right children, and parent... read more

Using Regular Expressions to Exclude or Negate Matches

Regular expressions are a powerful tool for matching patterns in code. But what if you want to find lines of code that don't contain a specific word? In this article,... read more

Tutorial: Working with Stacks in C

Programming stacks in C can be a complex topic, but this tutorial aims to simplify it for you. From understanding the basics of stacks in C to implementing them in your... read more

Tutorial: Supported Query Types in Elasticsearch

A comprehensive look at the different query types supported by Elasticsearch. This article explores Elasticsearch query types, understanding Elasticsearch Query DSL,... read more

Troubleshooting 502 Bad Gateway Nginx

Learn how to troubleshoot and fix the 502 Bad Gateway error in Nginx. This article provides an introduction to the error, common causes, and steps to inspect Nginx... read more