Be careful when you use the aria-label, aria-labelledby, and aria-describedby attributes, because they do not work consistently with all HTML elements. This is a short note on when (and when not) to use those attributes.
The aria-label and aria-labelledby attributes can be used to give an element an accessible name. The aria-describedby attribute can be used to give an element an accessible description. Not all elements can be given an accessible name and/or description though.
The aria-label, aria-labelledby, and aria-describedby attributes can be used with:
- interactive elements like
a(when thehrefattribute is present),audioandvideo(when thecontrolsattribute is present),input(unless they are oftype="hidden"),select,button, andtextarea - elements that have a landmark role – either implicit (
header,footer,main,nav,aside,section, andform) or explicitly set via theroleattribute - elements that have an explicit widget role applied using the
roleattribute – there are 27 widget roles in ARIA 1.1, includingdialog,slider,progressbar, andtooltip iframeandimgelements
If you use aria-label, aria-labelledby, or aria-describedby with any other elements (like div, span, p, blockquote, or strong etc.), they generally won’t work across all browser/assistive technology combinations.
For more information on this, and on using ARIA with HTML in general, refer to the W3C Note on Using ARIA.
Comments
Can it be used to give context to several unordered lists within a page with a relevant heading say h2? For example, https://www.last-child.com/aria-labelledby-on-lists/
I often see aria-labelledby use with SVG (seen on CSS Tricks just the other day). Does that work consistently?
Another important warning is that aria-label and aria-labelledby will override the visible text for certain elements, such as links and buttons. I often see developers that add labels to these with the intent of providing additional information or instructions without realizing that the link or button text will then be entirely inaccessible.
@Jared Smith:
They should use the aria-describedby attribute instead to provide additional information, right?
They can use area-labelledby with multiple IDs to provide additional information.
@SB yes it can. The
<
ul> and
<
ol> elements map to the “list” role, which although not a widget role, acts like a group role. @Mark Root-Wiley yes it can, though with SVG it’s almost always necessary to explicitly apply one of the landmark or widget roles using the role attribute.
I have a row of various information containing:
An article number, the title of the article, an input field where you can input the amount you want to order, the price and a link to delete this order.
The row above is indicating labels for this information and a user who can see, easily understands it as a table.
Design wise it is all contained in HTML div elements. I cannot convert it into a tables, because it is a project between many companies and even though I suggested it such a change was not approved upone. But I have to make it accessible.
I thought I could give each piece of information a proper label via aria-labelledby and the ID of the corresponding div of the row above that contains a name for this piece of information. But then I read that it’s not possible for HTML div elements.
Does it work if I give for example the HTML div element containing the price a role of ‘cell’ and then the attribute aria-labelledby?
Thank you very much for the help.
@Miriam if you can’t change the HTML, you can use the table, row, cell, and columnheader roles to polyfill the missing table semantics.