Can I reference multiple elements using aria-describedby?
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 adiv
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.
Absolutely.
https://www.w3.org/TR/wai-aria/#aria-describedby
Identifies the element (or elements) that describes the object