What is the difference between aria-labels and alt-text?

[mikang]

Should all elements on a page have aria-labels?

[mgifford]

Short answer: alt-text can be used only with images, while aria-labels can be applied to pretty much everything. Only use aria-labels on images if for some reason you can't use alt-text.

And No, all elements shouldn't be using aria-labels.

Longer answer: Page elements should only have aria-labels associated with them if for whatever reason you cannot provide the equivalent semantics with HTML. The first rule of ARIA is not to use ARIA.

If you can't do:

<button class="favorite styled"
       type="button">
   Add to favorites
</button>

You could do something like this:
<div role="button" aria-label="Add to favorites">

But why not just stick to the classic form which will be more accessible across a broader range of devices (especially older Assistive Technology).

WAI's Accessible Rich Internet Applications (ARIA) was designed for dynamic content which HTML just wasn't designed for. Interactive states like whether a box is expanded/collapsed cannot be communicated in HTML. Nor can things like alerts or page regions.

Google's got a good description of difference between aria-label & labelledby and aria-describedby.

Think of ARIA like salt, remember it is best used in moderation. Duplicating content does not make it more accessible, but can actually reduce the usability of your site for people with disabilities. Many sites actually become less accessible because developers threw in ARIA & overwrote the semantics that was being provided by HTML.

[dmundra]

Another example of using aria, in this case, aria-live="polite" (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) for the search output (https://github.com/CivicActions/accessibility/pull/305/files)

Because the search results are dynamic we want to let the screen readers know that results have been added after typing a search term. aria-live="polite" will allow us to do that.

[mikang]

I love the choice of terminology (polite vs. assertive). It's very descriptive. Do you know how this works with a scrollspy sidebar? Now I see the case for unfurling content vs hiding it behind interactions.

[dmundra]

Do you know how this works with a scrollspy sidebar? Now I see the case for unfurling content vs hiding it behind interactions.

From what I can see of scrollspy examples if the content is all loaded (even if it below the "fold") then you don't need aria-live but if you are loading it dynamically into the content then you would want this aria-label.

[mikang]

That makes sense. Thank you for the aria explanation!