What is aria label in html

aria-label

The aria-label attribute defines a string value that labels an interactive element.

Description

Sometimes the default accessible name of an element is missing, or does not accurately describe its contents, and there is no content visible in the DOM that can be associated with the object to give it meaning. A common example is a button containing an SVG or icon font (which you shouldn’t be using) without any text.

In cases where an interactive element has no accessible name, or an accessible name that isn’t accurate, and there is no content visible in the DOM that can be referenced via the aria-labelledby attribute, the aria-label attribute can be used to define a string that labels the interactive element on which it is set. This provides the element with its accessible name.

button aria-label="Close" onclick="myDialog.close()"> svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"> path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000" /> svg> button> 

Note: aria-label is intended for use on interactive elements, or elements made to be interactive via other ARIA declarations, when there is no appropriate text visible in the DOM that could be referenced as a label

Most content has an accessible name generated from its immediate wrapping element’s text content. Accessible names can also be created by certain attributes or associated elements.

By default, a button’s accessible name is the content between the opening and closing tags, an image’s accessible name is the content of its alt attribute, and a form input’s accessible name is the content of the associated element.

If none of these options are available, or if the default accessible name is not appropriate, use the aria-label attribute to define the accessible name of an element.

aria-label can be used in cases where text that could label the element is not visible. If there is visible text that labels an element, use aria-labelledby instead.

The purpose of aria-label is the same as aria-labelledby . Both provide an accessible name for an element. If there is no visible name for the element you can reference, use aria-label to provide the user with a recognizable accessible name. If the label text is available in the DOM, and referencing the DOM content and acceptable user experience, prefer to use aria-labelledby . Don’t include both. If both are present on the same element, aria-labelledby will take precedence over aria-label .

Note: While aria-label is allowed on any element that can have an accessible name, in practice, aria-label is only supported on interactive elements, widgets, landmarks, images and iframes.

The aria-label attribute can be used with regular, semantic HTML elements; it is not limited to elements that have an ARIA role assigned.

Don’t «overuse» aria-label . For example, use visible text with aria-describedby or aria-description , not aria-label , to provide additional instructions or clarify the UI. Always remember, you don’t need to target instructions to screen readers only; if instructions are needed, provide them to everyone (or, preferably, make your UI more intuitive).

Not all elements can be given an accessible name. Neither aria-label nor aria-labelledby should be used with non-interactive elements or inline structural role such as with code , term , or emphasis nor roles whose semantics will not be mapped to the accessibility API, including presentation , none , and hidden . The aria-label attribute is intended for interactive elements only. Use aria-label to ensure an accessible name is provided when none is visible in the DOM for all interactive elements, like links, videos, form controls, landmark roles, and widget roles.

Note: The aria-label is only «visible» to assistive technologies. If the information is important enough to add for AT users, consider making it visible for all users.

Values

A string of text that will be the accessible name for the object.

ARIAMixin API

The ariaLabel property, part of the Element interface, reflects the value of the aria-label attribute.

The ariaLabel property, part of the ElementInternals interface, reflects the value of the aria-label attribute.

Associated roles

Used in almost all roles except roles that can not be provided an accessible name by the author.

The aria-label attribute is NOT supported in:

Note: The aria-label attribute is intended for interactive elements only. When placed on non-interactive elements, such as those listed above, it may not be read or may confuse your users as a non-interactive element that acts like an interactive one.

Specifications

See Also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

aria-label

The aria-label should be used to provide a text alternative to an element that has no visible text on the screen.

Definition

specification. This specification extends native HTML, allowing you to change the way an HTML element is «translated» into the accessibility tree.

By default, an HTML element will use its text content as the accessibility label. If an element has aria-label , the accessible name becomes the string that it’s passed in the attribute.

button>sendbutton> 
// accessible name: send
 
button aria-label="send email">sendbutton> 
// accessible name: send email

How to use

button 
 
aria-label="menu" 
 
class="burger">button>

1) What elements can be used with aria-label

• interactive elements: such as a (when href attribute is present), audio and video (when controls attribute is present), input , select , button , textarea .
• implicit landmark elements: such as header , footer , nav , main , aside , section , and form .
• explicit landmark elements: such as an element with role=»navigation» .
• widget role elements: such as an element with role=»dialog» or role=»tooltip» (there are 27 widget roles in ARIA 1.1).
• iframe and img elements.

When to use

You should use it when you have non-textual indication of an element’s purpose, but still need to provide text alternates for users who use assistive technology, such as screen readers.

Tip: Labelling best practice

You don’t need to add «button» in the label as screen readers already announce an element’s role.

// ⛔ BAD: "send button, button"
 
button aria-label="send button">. button> 
 
// ✅ Good: "send, button"
 
button aria-label="send">. button>

Examples

Example 1: Icon Button

button aria-label="Close"> 
 
svg 
 
focusable="false" 
 
aria-hidden="true" 
 
viewBox="0 0 24 24" 
 
> 
 
path 
 
d="M19 6.41L17.59 5 12 10.59 6.41 5 5
 6.41 10.59 12 5 17.59 6.41 19 12
 13.41 17.59 19 19 17.59 13.41 12z" /> 
 
svg> 
 
button>

Example 2: Labelless input

input 
 
type="text" 
 
name="name" 
 
placeholder="What's your name?" 
 
aria-label="Your name" />

Example 3: Multiple Navigation Landmarks

nav aria-label=’primary’> 
 
ul> 
 . List on links here. 
 
ul> 
 
nav> 
 
nav aria-label=’secondary’> 
 
ul> 
 . List on links here. 
 
ul> 
 
nav>

Example 4: Identifying region landmarks

section aria-label="projects"> 
 . 
 
section> 
 
section aria-label="team"> 
 . 
 
section>

Comparision

aria-label vs. aria-labelledby

When label text is visible on screen, you should use aria-labelledby instead of aria-label .

// ⛔ BAD: using aria-label when text
// is visible on screen
 
nav aria-label="Related Content"> 
 
h2>Related Contenth2> 
 
ul> 
 . List on links here. 
 
ul> 
 
nav>

// ✅ Good: using aria-labelledby when text
// is visible on screen
 
nav aria-labelledby="nav-title"> 
 
h2 id='nav-title'>Related Contenth2> 
 
ul> 
 . List on links here. 
 
ul> 
 
nav>

Note

If an element has both aria-labelledby and aria-label , the value of aria-labelledby will be used in the text alternative computation.

aria-label vs. title

The title attribute shows as a tooltip when the mouse goes over the element. While it can be useful for people using the mouse, it will not be available to keyboard-only users. Note that while title attribute is listed in the text-alternative computation algorithm, it might not be supported in some combinations of screen-reader/browsers (at the time of writting, IE 11 and NVDA).

In short, If you find yourself using the title attribute to provide additional information, it’s probably better to either use aria-label or think of an alternative (e.g.: disclosure additional information to users such as a tooltip).

Frameworks

React and aria-label

React, in particular JSX, supports all aria-* attributes. Contrary to other HTML attributes, ARIA attributes in jsx should be hyphen-cased as they are in plain HTML.

/* Static string */> 
 
button aria-label="Send">. button> 
 
/* Dynamic string */> 
 
button aria-label=labelVariable>>. button>

Angular and aria-label

In Angular, aria-* attributes are treated like any other HTML attributes and can either be binded to static attributes or to dynamic variables (using the attr prefix).

// Static string
 
button aria-label="Send">. button> 
 
// Dynamic string
 
button [attr.aria-label]="labelVariable">. button>

Vue.js and aria-label

In Vue, aria-* attributes are also treated like any other HTML attributes and can either be binded to static attributes or to dynamic variables (using the :aria-label prefix).

 
 
button aria-label="Send">. button> 
 
 
button :aria-label="labelVariable">. button>

Источник

What is aria-label and How to Use It

The aria-label attribute in HTML is used to provide an accessible name or label for an element that does not have an inherent label or that needs a more descriptive label than its content provides. This attribute can be used with any element that accepts the aria-label attribute.

For example, consider a button element that contains an icon or image, but no text. Without a label, a screen reader user may not know what the button does. In this case, the aria-label attribute can be used to provide an accessible name for the button that describes its purpose. Here’s an example:

In this example, the button element contains a font-awesome icon of a play button, but no text. The aria-label attribute is used to provide an accessible name for the button that describes its purpose to screen reader users.

Another example is an input element with a search icon. Without a label, a screen reader user may not know what the search input field is for. In this case, the aria-label attribute can be used to provide an accessible name for the input field that describes its purpose. Here’s an example:

"search-input" >"visually-hidden">Search "text" >"search-input" aria-label="Search">

In this example, the label element is used to provide a hidden accessible name for the input field that describes its purpose. The aria-label attribute is used as a fallback in case the label element is not read by the screen reader.

Example of using the aria-label attribute on the tag:

html> html> head> title>Title of the document title> head> body> button aria-label="Close" onclick="myDialog.close()">X button> body> html>

Here, a is styled like an ordinary “close” button. As there isn’t anything indicating the purpose of the button, we used the aria-label attribute, which provides the label to assistive technologies.

In summary, the aria-label attribute is used to provide an accessible name or label for an element that does not have an inherent label or that needs a more descriptive label than its content provides. This attribute is important for making web content accessible to users with disabilities, including those who use assistive technologies like screen readers.

However, the «aria-label» attribute is not used for selecting elements. To select an element, you can use JavaScript and DOM methods to find and manipulate the element based on its attributes, properties, or position in the document.

Источник