Search code examples
htmlaccessibilitywai-aria

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>
Solution

  • 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.