WAI-ARIA: aria-label (Property)
Description
Defines a string value that labels the current element. See related aria-labelledby.
The purpose of aria-label is the same as that of aria-labelledby. It provides the user with a recognizable name of the object. The most common accessibility API mapping for a label is the accessible name property.
If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. There may be instances where the name of an element cannot be determined programmatically from the content of the element, and there are cases where providing a visible label is not the desired user experience. Most host languages provide an attribute that could be used to name the element (e.g., the title attribute in HTML), yet this could present a browser tooltip. In the cases where a visible label or visible tooltip is undesirable, authors MAY set the accessible name of the element using aria-label. As required by the text alternative computation, user agents give precedence to aria-labelledby over aria-label when computing the accessible name property.
Browser Compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaLabel | ChromeFull support81 | EdgeFull support81 | FirefoxNo supportNo | Internet ExplorerNo supportNo | OperaFull support68 | SafariFull support12.1 | WebView AndroidFull support81 | Chrome AndroidFull support81 | Firefox for AndroidNo supportNo | Opera AndroidFull support58 | Safari on iOSFull support12.2 | Samsung InternetFull support13.0 |
Screen Reader Support
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST contribute to the accessible name | supported | supported | supported | partial (1/2) | supported | supported | supported | supported | supported | supported | supported |
| SHOULD convey name changes when in focus | none | none | none | supported | supported | supported | supported | none | none | supported | partial |
aria-label Example
HTML Example 1
<div id="nav" role="navigation" aria-label="main navigation">
<ul>
<li>Home</li>
<li>Products</li>
<li>Support</li>
</ul>
</div><div id="nav" role="navigation" aria-label="product navigation">
<ul>
<li>Product Description</li>
<li>Technical Specifications</li>
<li>Customer Reviews</li>
</ul>
</div>Characteristics
Related Concepts
HTML title
Used in Roles
All elements of the base markup
Value
String
Unconstrained value type.
Semantic HTML
No HTML element equivalent.
Reference
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on aria-label. - A11Y Support
The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for aria-label. - MDN Web Docs
The browser compatibility for each of the ARIA attributes is taken from the MDN Web Docs. Please refer to the original source if browser compatibility is updated for aria-label.
What does all elements of base markup mean??
I have seen aria-label is not allowed for static elements like and