ARIA is a very useful tool for making websites accessible but it can be confusing at times. One of the main issues I come across when testing is the improper use of ARIA for labelling and describing. Therefore, this post will try to explain the differences and the situations where you should use them.
- Aria-label: This attribute provides a label for an element. It does not provide any visible indication of this label.
- Aria-label is best used for providing information on interactive or image elements. Since it is not visible, it is important to recognize that this only provides information to screen readers.
- This includes things like links, tables, and charts when it feels appropriate. One example is when providing a link with an agency name that a screen reader might not pronounce correctly (such as MDOD). In this instance, providing an “aria-label=Maryland Department of Disabilities” on the link helps screen readers properly announce content.
- Aria-labelledby: This attribute associates an element with another element that will act as a label. Effectively, it is a programmatic link between two elements.
- Aria-labelledby’s advantage over aria-label is that it uses a visible element to label another. So it is best used when you are intending to provide a visual description of an image or a form field.
- Aria-labelledby works the same way as a HTML <label> element in that it needs a unique ID to work. The best practice is to use a <label> element with the aria-labelledby attribute attached to cover all bases.
- Aria-describedby: This is a very similar attribute to aria-labelledby; it works in the same way but is intended for larger descriptions rather than a concise “label.”
- Aria-describedby is best used for more complex elements, such as charts and infographics. Note that this is still a string that will be read in a single go to screen readers, so don’t try to cram an entire dataset into it.
- Aria-labelledby’s advantage over aria-label is that it uses a visible element to label another. So it is best used when you are intending to provide a visual description of an image or a form field.
- Aria-label is best used for providing information on interactive or image elements. Since it is not visible, it is important to recognize that this only provides information to screen readers.
In most cases, you want to pair these attributes with HTML tags such as <label> and <longdesc> since some user agents (i.e. browsers, assistive technology) don’t interpret ARIA. Most screen readers will only use one or the other (i.e. NVDA chooses aria-label over <label>). Please note that this is not a replacement for the “alt” attribute for images. It is still necessary and best practice to provide alt text on <img> elements.
For more information and examples on these ARIA attributes, please look at the W3’s site.
- https://www.w3.org/TR/wai-aria/#aria-label
- https://www.w3.org/TR/wai-aria/#aria-labelledby
- https://www.w3.org/TR/wai-aria/#aria-describedby
There will be more to come on other ARIA attributes, since ARIA is a really powerful tool. Please continue to follow us!
