Differentiating aria properties

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.

Brief intro to ARIA

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.

Similarities and differences between aria-labelledby, aria-label, and aria-describedby

aria-labelledby

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.

aria-label

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

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:

• The element must have a semantic role (e.g., not <span> or <div>)
• The item must be a naturally focusable element (e.g., link, button, form element)
• The item should be able to have an accessible name (e.g., images, tables). Paragraphs, headings, etc. are typically considered text strings and most screen readers don't support aria-described on them.

Quick note on accessible names

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:

1. aria-labelledby - If this exists on the element, this will override all other names
2. aria-label - If there is no aria-labelledby, this will override everything else
3. Native HTML - If there is not aria-label or aria-labelledby, the native text of the element will be used
4. title - If no other naming methods are available, the title will count as the label

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.