CODEWITHSUNDEEP
htmlaccessibilitywai-aria
Moaaz Bhnas
Moaaz Bhnas

Reputation: 1170

Can I reference multiple elements using aria-describedby?

If I have two elements that together describe one element, can I use two ids on aria-describedby attribute like this?

<div id="description-1"></div>
<div id="description-2"></div>
<div aria-describedby="description-1 description-2"></div>

Upvotes: 21

Views: 16914

Answers (2)

andrewmacpherson
andrewmacpherson

Reputation: 1561

Yes. The aria-describedby (and aria-labelledby) attribute expects an ID reference list as it's value. Multiple IDs can be provided, separated by spaces. When you associate multiple elements in this way, they are concatenated into a single description string.

A few things to watch out for:

  • Punctuation. If the 2 referenced elements are intended as separate sentences, it helps to put include a full stop (period) so that screen readers can announce it more naturally. Alternatively, you can use multiple references to build up a sentence. It depends on your scenario.
  • aria-describedby isn't effective on all elements. In your example the attribute is on a div element, which generally doesn't work. It works better when used on interactive elements and landmark regions. See Short note on aria-label, aria-labelledby, and aria-describedby for guidance.
  • The referenced elements will form part of the accessible description regardless of whether they are visible. Be careful if associating error messages this way. See Hidden or visible – makes no difference for guidance here.

For further details, see the Accessible Name and Description Computation rules in HTML Accessibility API Mappings 1.0.

Upvotes: 27

slugolicious
slugolicious

Reputation: 17445

Absolutely.

https://www.w3.org/TR/wai-aria/#aria-describedby

Identifies the element (or elements) that describes the object

Upvotes: 3

Related Questions