Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is aria-label and How to Use It?
Labels are essential for users who are blind, have low vision, have mobility issues, or have memory loss. Many users will be unable to access a form if labels are missing. Visual labels are text that appears near a form control and describes what information is contained in a specific form field or group of fields. Each label must be associated with the form control or group of controls programmatically. Labels are not always the <label> element.
Introduction to the aria-label
The Aria label stands for Accessible Rich Internet Application, a W3C specification for improving accessibility beyond what semantic HTML can achieve. The organizer's initiative is to provide solutions for people with disabilities to connect to the internet or applications through ARIA labels.
The aria-label attribute specifies a string that will be used to label the current element. Basically, it is used to provide a text alternative to a screen element with no visible text. It aids in the definition of a string and provides additional information about the structure of the document to assistive technology users.
Arial-label is typically used to replace an existing label with more precise information. It allows assistive technology to attach a label to an otherwise anonymous HTML element. However, we must exercise caution when using aria-label because it does not work with all HTML elements.
HTML elements that support the aria-label attribute include:
textarea
select
button
audio and video (when control=”#”)
a (when href=”#”)
Labels, as we all know, are important because they allow us to make a logical connection between an element and its description. In the case of the HTML <input> element, for example, we can use the <label> element to specify what the <input> is about. When there is no element that can serve as a label, we can use the aria-label attribute.
We can use aria-label to specify a string to be used as the accessible label. This takes precedence over any other native labelling mechanism, such as a label element; for example, if a button has both text content and an aria-label, only the aria-label value is used.
When we have some kind of visual indication of an element's purpose, such as a button that uses a graphic instead of text, but you still need to clarify that purpose for anyone who cannot access the visual indication, such as a button that uses only an image to indicate its purpose, we might use an aria-label attribute.
An HTML element's text content is used as the accessibility label by default. When an element has the aria-label attribute, the accessible name is converted to a string and passed into the attribute.
The advantages of ARIA labels
Accessibility: Making a web page accessible to people with disabilities, particularly blind people, provides a visual extension that interprets the environment.
Experience: The aria label simply interprets what is inside the page and shows how to toggle control and write on a text box.
Visual Equivalence: The aria label's significance defines the need for users to experience how the World Wide Web feels without having to visualize everything. The aria label is a straightforward addition to the HTML API, but it is a powerful tool for those who require it.
How to Use the aria-label
Aria-label expects a string of characters in value, which will be the accessible name. We can use the aria-label attribute on standard HTML elements.
Example
Let's look at how we can use aria-label with the HTML <button> element.
<!DOCTYPE html>
<html>
<head>
<title>What is aria-label and How to Use It?</title>
</head>
<style>
button{
background-color:lightgrey;
border:0;
height:25px;
width:25px;
font-size:18px;
color:darkslategrey;
margin:10px;
}
button:hover{
background-color:crimson;
color:white;
}
</style>
<body>
<button aria-label="close" onclick="myDialog.close()">x</button>
</body>
</html>
A <button> is styled like a standard "close" button in this case. We used the aria-label attribute to provide the label to assistive technologies because there is nothing indicating the purpose of the button.
Example
Let's look at another example, this time with the aria-label on the <a> element.
<!DOCTYPE html>
<html>
<head>
<title>What is aria-label and How to Use It?</title>
<style>
a{
background-color:azure;
color:indigo;
font-size:20px;
margin:10px;
}
a:hover{
background-color:indigo;
color:azure;
}
</style>
</head>
<body>
<a href="#" class="more-link" aria-label="read the entire article">More</a>
</body>
</html>
Technology |
Aural output |
|---|---|
VoiceOver |
link, read the entire article |
ChromeVox |
read the entire article, link |
Narrator |
read the entire article ,link |
NVDA |
link, read the entire article |
89 Views
