Transcript
PRESENTER: The aria-labelledby aria-describedby and aria-label attributes can provide an assistive name or description to a user interface control. However, there's often confusion as to their correct use. This tutorial explores the difference between each of these different attributes and how they can be used.
Section 1 -- aria-labelledby -- this is where one element is used to provide a label or an accessible name for another element, the widget element. The aria-labelledby attribute establishes the programmatic relationship between the widget element and the element providing the label. The aria-labelledby attribute is applied to the widget, and the matching ID value is applied to the label element. For example, the aria-labelledby attribute can be used to label a modal so that it's announced to assistive technologies as soon as it's fired.
Section 2-- aria-describedby-- this is where one element is used to provide an accessible description for another element-- the widget element. The aria-describedby attribute establishes a programmatic relationship between a widget element and the element with the descriptive information.
The aria-describedby attribute is applied to the widget element, and the matching ID value is applied to the element that contains the descriptive information. In this example, the input element has been given a description. Now, multiple descriptions can be applied to one widget element using space-separated values. In this example, the input element has been given two descriptions-- help and privacy.
Section 3-- aria-label -- the aria-label is used to add an accessible name directly to an element. This label is for assistive technologies only, and it's not displayed on-screen. For example, the aria-label can be used to provide a more detailed label to a close button for assistive technologies. In this case, instead of the button being announced as close, it would be announced as close and return to account details.
Section 4—usage -- And not all elements can be given the aria-labelledby, aria-describedby, or aria-label attributes. These three attributes should only be used on the following types of elements. First off, interactive elements-- and these include links, audio/video input, select button and text areas. They can also be applied to elements with implicit landmark roles-- header, footer, main, nav, aside, section, and form.
These attributes can also be applied to elements with explicit landmark roles. And these roles would include header, footer, main, nav, aside, and section. And these attributes can also be applied to a range of other elements with explicit widget. For example-- role equals dialog, progress bar, slider, switch, tab, and tabpanel. Now if you use these attributes on any other element, they may not work across all browsers and assistive technology combinations.
Conclusion-- so there you have it-- a simple explanation of the aria-labelledby, aria-describedby and aria-label attributes.
Except where otherwise noted, this work is licensed under Creative Commons by Attribution-ShareAlike 4.0 license, copyright 2018, California Community Colleges Chancellor's Office. These works are licensed under a Creative Commons Attribution 4.0 international license. They're available to everyone and may be repurposed to meet the unique needs of educational institutions.