From 2023c163697d2c1b4fd6d6f16bdf4e69e4096169 Mon Sep 17 00:00:00 2001 From: "Pedro H. Santiago" Date: Tue, 15 Oct 2024 22:54:20 +0200 Subject: [PATCH] Fix aria-label documentation, removing statement that says it should be used only for interactive items (#35465) * updates first paragraph of aria-label * states clearly that it is meant to be used with roles that allow author naming * remove pathname from same page anchor links * accept change, mentioning implicit or explicit role does not prohibit naming Co-authored-by: Scott O'Hara * mdn-lint: remove trailing space Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: Scott O'Hara Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../web/accessibility/aria/attributes/aria-label/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/accessibility/aria/attributes/aria-label/index.md b/files/en-us/web/accessibility/aria/attributes/aria-label/index.md index d7bffcc4c93ac50..b343643dda36af1 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-label/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-label/index.md @@ -7,13 +7,13 @@ spec-urls: https://w3c.github.io/aria/#aria-label {{AccessibilitySidebar}} -The `aria-label` attribute defines a string value that labels an interactive 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](#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](#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 ` ``` -> **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 where the implicit or explicit role does not prohibit naming. It is strongly recommended to prioritize the use of `aria-labelledby` over `aria-label` if a visible label exists for the element to reference and receive its name from. 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.