Properties

WAI-ARIA: aria-label (Property)

Authored By :Raghavendra Satish Peri Last Updated :April 20, 2023 Properties

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 For aria-label

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
`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 For aria-label

Expectation	JAWS			Narrator	NVDA			Orca	TalkBack	VoiceOver (iOS)	VoiceOver (macOS)
Expectation	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

W3C (opens new window)
A11Y Support
MDN Web Docs

Related Insights on Accessibility

Raghavendra Satish Peri

Raghavendra Satish Peri is a digital Transformation specialist working with small & large enterprises in the areas of digital accessibility & digital marketing. He authors an Accessibility Blog at DigitalA11Y.com & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y.com, a community of accessibility professionals, developers, and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books, or writing on his Personal Blog at raghava.in.

Properties