Loading icons indicate to users that some content has yet to be loaded. They are usually animated pictograms, sometimes accompanied by text. To make them accessible to screen reader users, they should be marked up as an ARIA live region.

How it looks

animated loading icon

The code

<div role="alert">
<img src="images/loading-icon.gif">
<span class="visually-hidden">loading page</span>
</div>
 

In the above example, the text has the .visually-hidden class. This special class hides the text visually without hiding it from screen readers. The class is defined like so:

.visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
 

There are two ways to make the content in the live region announce:

  1. Append the role="alert" element to the DOM
  2. Append the contents to the role="alert" element

In either case, the screen reader will announce "loading page" at the same time that the icon appears on screen.

Adding the role="alert" element to the DOM is trivial using JavaScript:

const loadingIcon = `
<div role="alert">
<img src="images/loading-icon.gif">
<span class="visually-hidden">loading page</span>
</div>`;
document.body.insertAdjacentHTML('beforeend', loadingIcon);
 

This will append the loading icon as the last element inside the document's <body>. Making the icon appear in the visual center of the page would be achieved using CSS positioning.