aria-label

Without the use of an ARIA label, the text content of an element is used to represent said element by a screen reader.

Without further modification, all elements (text, buttons, links, inputs, and more) will be read by the screen reader based on their text while also announcing the type of interaction if they are interactive. This, of course, can be great if your text content already provides all the details necessary to understand it, but our buttons are rather bare-bones.

Since the text "Image:" will not be announced when manually navigating between the buttons, as with tab navigation, the buttons are only known as "Save", "Save As", and "Load" to people reliant on screen readers.

Image:
<button>Save</button>
<button>Save As</button>
<button>Load</button>

To make them more accessible, we can simply add an ARIA label to each of the buttons with a more descriptive name, like "Save image". This way, any navigation between the buttons will result in the screen reader announcing the buttons with their intended purpose. It is very helpful when different parts of your website provide similar actions with the same visible text but operate in different context, like "Save image" in the image section and "Save audio" in the sound section of a video editing tool.

Image:
<button aria-label="Save image">
    Save
</button>
<button aria-label="Save image as">
    Save As
</button>
<button aria-label="Load image">
    Load
</button>

aria-labelledby

The aria-labelledby attribute has similar use as aria-label. Rather than specifying an explicit name for an element, it references another element (or multiple elements) containing the name.

<span id="dark-mode-label">
    Toggle darkmode
</span>
<input type="checkbox" aria-labelledby="dark-mode-label">

Keep in mind, this functionality can easily be provided with native label elements

<label for="dark-mode-toggle">
    Toggle darkmode
</span>
<input id="dark-mode-toggle" type="checkbox">

As stated, it is possible to use multiple elements in the labelledby attribute. Simply write your target element IDs separated by a whitespace. The advantage of this is the ability to change individual parts of the message, like an item count, using JavaScript without rewriting the entire label.

It can be desirable to hide the elements used as labelledby to prevent unintended narration of the content.

<button aria-labelledby="shopping-cart-text-1 shopping-cart-items shopping-cart-text-2">
    <i class="fa-solid fa-cart-shopping"></i>
</button>
<div hidden>
    <span id="shopping-cart-text-1">
        You have
    </span>
    <span id="shopping-cart-items">
        4
    </span>
    <span id="shopping-cart-text-2">
        items in your shopping cart.
    </span>
</div>

aria-description

ARIA description is in the draft for ARIA 1.3, which is unreleased and not supported yet.

aria-describedby

The aria-describedby attribute is used to link longer information text to an element.

This description does not replace an aria-label or aria-labelledby. A description can be used with or without an aria label and will always be announced after the label or text content was.

To make sure the screen reader does not repeat the content of the description right after it was read from the button, you should hide the description itself from the accessibility tree with aria-hidden="true".

<button aria-describedby="save-information">Save</button>
<div id="save-information" aria-hidden="true">
    Everything Not Saved Will Be Lost.
</div>

You can specify multiple descriptions in the aria-describedby attribute by separating them with whitespace, similar to specifying multiple label parts in aria-labelledby.

<button
    aria-label="Button that does something"
    aria-describedby="abc-description1 abc-description2 abc-description3"
>
    Do something
</button>
<div id="abc-description1" aria-hidden="true">
    Description Part1.
</div>
<div id="abc-description2" aria-hidden="true">
    Description Part2.
</div>
<div id="abc-description3" aria-hidden="true">
    Description Part3.
</div>