Can I reference multiple elements using aria-describedby?

Question

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>

Answer 1

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.

Answer 2

Absolutely.

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

Identifies the element (or elements) that describes the object