4.1. Loading states

Introduction

Until now, we have been exploring fairly simple cases, but there are some patterns that aren't that straightforward:

In A11Y, some patterns may have multiple solutions. Each approach has positive and negative consequences. Once you find a solution, look for other solutions and balance them. We should aim for understanding the impacts and assume the trade-offs rather than pretending they don't exist.


One of those patterns are loading skeletons, which are used to show that the page or some part of it is being loaded.

These are perceivable visually but the same ain't true for the people with vision impairment, or those who use a screen reader.

ARIA Live Regions fill this gap helping to expose this dynamic content. There are two tipes:

<p aria-live="assertive">The credentials are incorrect.</p>
<p aria-live="polite">Playing now: "Pink Floyd - Time"</p>

Here's a codepen example exploring multiple ways of using aria-live. In this exercise, the code is ready to follow the approach #3.

Exercise

In the exercise page, there is a dummy search mechanism that loads a set of results.

Visually, it's perceivable when the result is being loaded and when it's finished. But what about people using screen readers. How can we do it?

๐ŸŽฏ Goal: Improve the accessibility of the loading state for people with visual impairments.

๐Ÿ€ Toggle hint #1:

The designs don't include a visual message when the loading is finishedโ€ฆ Remember .sr-only? It's the perfect time to use it!

Bonus #1

Using the cursor, you may have noticed that a tooltip is shown on button hover. Now, try to do the same using the keyboard only.

That's not possilbe because the button is disabled using disabled attribute. How can we solve this? Prevent the click interaction, but still allowing the focus interaction.

P.S. The CSS is the same for both exercise alternatives.

๐Ÿ€ Toggle hint #1: There is an attribute aria-disabled="true" that we can use.

Semantically it marks the button as disabled, but it does not change the behavior. In other words, you can still focus it using the keyboard.

๐Ÿ€ Toggle hint #2: ARIA only purpose is to add extra semantics to an element. It never, ever changes the styles or behavior of that element.

That means, you need to manually prevent the click and change the CSS styles when that attribute is presented.

Further reading

WCAG Success Criterion

Exercise takeaways

(After the exercise) Reveal takeaways