Skip to content

Commit

Permalink
states clearly that it is meant to be used with roles that allow auth…
Browse files Browse the repository at this point in the history
…or naming
  • Loading branch information
phsantiago committed Aug 15, 2024
1 parent 88d1a39 commit 83297c7
Showing 1 changed file with 3 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ spec-urls: https://w3c.github.io/aria/#aria-label

{{AccessibilitySidebar}}

The `aria-label` attribute defines a string value that names an element.
The `aria-label` attribute defines a string value that can be used to name an element, as long as the element's role does not [prohibit naming](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label#associated_roles).

## Description

Sometimes, the default {{Glossary("accessible_name", "accessible name")}} of an element is missing or the accessible name does not accurately describe the contents of the element and there is no content visible in the DOM that can be associated with the object to give it meaning. A common example of such an element is a button containing an SVG icon without any text.

In cases where an interactive element has no accessible name or an accessible name is not accurate and there is no content visible in the DOM that can be referenced via the [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/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 interactive element with its accessible name.
In cases where an element that is not part of the [prohibited list](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label#associated_roles), has no accessible name or an accessible name is not accurate and there is no content visible in the DOM that can be referenced via the [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/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 an accessible name.

The code below shows an example of how to use the `aria-label` attribute to provide an accessible name for a `<button>` element. The button in this example contains an SVG graphic and lacks textual content, making the `aria-label` essential for screen reader users to understand its function, which in this case is "Close".

Expand All @@ -32,7 +32,7 @@ The code below shows an example of how to use the `aria-label` attribute to prov
</button>
```

> **Note:** `aria-label` is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.
> **Note:** `aria-label` is intended for naming elements that allow `aria-label` or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve 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.

Expand Down

0 comments on commit 83297c7

Please sign in to comment.