To preface: I'm no front-end developer, but WAI-ARIA is a part of the International Association of Accessibility Professional's (IAAP) Web Accessibility Specialist certification exam so I've spend some time learning about various accessible rich internet applications (ARIA) roles, states, and properties. It seems like there are three properties that provide similar functionality so my hope is by writing this, I'll commit their differences to memory.
ARIA allows web developers to increase the accessibility of their websites so people using assistive technology (AT) can access them. ARIA is only useful to AT since it doesn't change anything for sited users. For example, aria-hidden="true" only hides content for screen reader users - not sighted people.
Lastly, ARIA is not a programming language. It is simply a way to label things to communicate information to screen readers.
The purpose of using aria-labelledby is to link an element with its label so that screen readers can associate the two together in the way sighted users associate the two visually. This means that aria-labelledby text is typically visible on the page.
One of the strengths of the aria-labelledby attribute is that it allows you to refer to multiple selections of text and apply them all together to label an element, such as those laid out in a complex grid with multiple labels applied to a single form field.
Note: aria-labelledby replaces an element's original text and should not be used to provide supplemental information. The aria-describedby attribute detailed below would be more appropriate to use for that purpose.
Simply put: the aria-label is the text label itself. This attribute creates an invisible label for an element that is only available to AT, meaning sighted users cannot see it and do not benefit from it. The aria-label text will also replace an element's original text. For example:
<a href="https://k80anderson.com" aria-label="Katie Anderson's 2023 Portfolio">Portfolio</a>
A screen reader would say "link: Katie Anderson's 2023 Portfolio" instead of "Portfolio" even though the only thing a sighted user would see is "Portfolio." Knowing this, be cautious not to use aria-label as a way to provide extra information about an element as it is not extra information; It is the ONLY information.
Aria-describedby is meant to add extra, supplemental information about an element and shouldn't be used to give an element a name, label, or title. If included, the aria-description will always be read after it's accessible name.
Similar to aria-label, aria-describedby is invisible however, if the aria-describedby text is important, it needs to also be available to sighted users. Additionally, the people using screen readers need the content to be available in the document context, not just when the focus is on the element with the aria-describedby attribute.
The following conditions need to be met in order for screen readers to read aria-describedby:
An accessible name is a short text string that developers use to associate with an element to provide AT users a label for that element (for example: a button might be named "Submit"). There is a rather complicated algorithm for determining what an element's accessible name is. From what I can find, here is the priority of how the name is determined:
While ARIA is super cool, developers should always plan to use the native HTML methods of labeling first and should only use aria-labelledby and aria-label if no other method works well.
Introduction to my most recent accessibility side project