Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#33034: accessible description #33929

Merged
merged 11 commits into from
Jun 21, 2024
10 changes: 5 additions & 5 deletions files/en-us/glossary/accessible_description/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ page-type: glossary-definition

{{GlossarySidebar}}

An **accessible description** is the description of a user interface element that provides additional information to help users of assistive technology understand the UI element and its context. It is a text description associated with an HTML element that provides users of assistive technology with a description for the element beyond what is provided by the element's {{glossary("accessible name")}}.
An **accessible description** is the description of a user interface element that provides additional information to help users of assistive technology understand the UI element and its context. It is a text description associated with an HTML element that provides users of assistive technology with a description for the element beyond what is provided by the element's {{glossary("accessible name")}}, providing users with additional context about its purpose. This is particularly important for users who rely on assistive technologies like {{glossary("Screen_reader", "screen readers")}}. An element's accessible description is part of the {{glossary("accessibility tree")}}.
estelle marked this conversation as resolved.
Show resolved Hide resolved

An element's accessible description is part of the {{glossary("accessibility tree")}} that makes web content available to {{glossary("Screen_reader", "screen readers")}} and other assistive technologies, which, in turn, make that content available to the users of those technologies.
If an element doesn't have an accessible description, the description needs to be programmatically associated with the related element. In these cases, the accessible description is provided by the [`aria-describedby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) attribute, [`aria-description`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description) attribute, or the [`title`](/en-US/docs/Web/HTML/Global_attributes#title) attribute, if the `title` would not otherwise also be the {{glossary("accessible name")}} for that element, in that order of precedence.
estelle marked this conversation as resolved.
Show resolved Hide resolved

The accessible description for a {{htmlelement("table")}} is its first {{htmlelement("caption")}}, for the {{htmlelement("figure")}}, is the {{htmlelement("figcaption")}}, for the {{htmlelement("summary")}}, is the content of the {{htmlelement("details")}} it is nested in, and for the button {{htmlelement("input")}} elements, it is the `value` attribute's value, unless the element also has a `aria-describedby` or `aria-description` attribute, which takes precedence.
The accessible description provides additional information beyond an accessible name. For example, the accessible name of a {{htmlelement("table")}} is provided by its first {{htmlelement("caption")}}. In the case of complex data tables, a sentence or two describing the table can provide a description. This can be a paragraph right before or after the table both visually and in source code order. If elsewhere in source order, or to make the associate explicit, the [`aria-describedby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) attribute can be used to associate the table with it's description.
estelle marked this conversation as resolved.
Show resolved Hide resolved

For other elements, the description needs to be programmatically associated with the related element. In these cases, the accessible description is provided by the [`aria-describedby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) attribute, [`aria-description`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description) attribute, or the [`title`](/en-US/docs/Web/HTML/Global_attributes#title) attribute, if the `title` would not otherwise also be the {{glossary("accessible name")}} for that element, in that order of precedence.
Similarly, when a user is asked to create a password, the `<label>` for the {{htmlelement("input")}} of type `password` provides its accessible name. A good accessible description includes the requirements for the password is a way that is visible to all users. It can be explicitly associated with the input via it's `aria-describedby` attribute, which adds it to the accessibility tree as the 'description' for that node.

estelle marked this conversation as resolved.
Show resolved Hide resolved
Descriptions are reduced to text strings. For example, if an element's `aria-describedby` attribute value is the `id` of an HTML {{htmlelement("img")}}, the description is the description of the image (usually the image's `alt` attribute).
Descriptions are reduced to text strings. In our password example, if the inputs's `aria-describedby` attribute value is the `id` of an HTML {{htmlelement("ul")}} with a list of requirements, the description is concatenated text and text equivalents of all the list items.

You can inspect the accessible description for any element on your page: look at your browser's developer tools' accessibility tab, which provides the accessibility information for the currently selected element.

estelle marked this conversation as resolved.
Show resolved Hide resolved
Expand Down