This page is for testing circumstances in which you have partial content — so-called “view-first” content —
loaded on a page and spinners or some other static or animated temporary graphic loaded as placeholders for
content that the page is waiting on (because of slow services, network delays, a desired visual effect, etc.).
Question: Are there loss of focus issues that could impact a screen reader user or DOM navigation anomalies that
interfere with an accurate understanding of the page for an assistive technology user?
You can test 17 implementations:
Image alone: Unloaded content is represented by an image
alone, with alternative text of “loading.”
Image wrapped, remove the aria-hidden div: Unloaded content is represented by
an image wrapped in two div elements, an outer div with
role=img and aria-label=loading, and an inner div that is
aria-hidden=true. The label and role are removed from the outer
div at load time and the inner div is replaced by the loaded content.
Image wrapped, remove the aria-busy div: The same as the second implementation,
except the inner div is aria-busy=true.
Image wrapped, keep the div, remove the aria-hidden attribute: The same as the
second, except we keep the inner div and replace just the image,
removing aria-hidden from the inner div.
Image wrapped, keep the div, remove the aria-busy attribute: The same as the
third, except we keep the inner div and replace just the image,
removing aria-busy from the inner div.
Image aria-hidden, below accessible text loading message, remove image after adding content
below it Similar to first implementation, except image is aria-hidden
and loading image is plain text above the image. When content loads, aria-hidden image is removed.
Image aria hidden, no loading message, remove image after adding content below
it Similar to 6 but without the loading message text.
Image in aria-busy div, load content then set div to aria-busy=false Uses
aria-busy for the busy container.
Image in aria-hidden div, load content then set div to aria-hidden=false Same
as 8, except we use aria-hidden for the container. This might be a recommended
technique, when used with an aria-live notification, for all platforms except iOS, which has a DOM
rendering bug (see 17).
Image in aria-hidden div, faux image above, load content, remove label on faux
image Like 9, except we add a faux image above the new content area (a
span with aria-label=loading role=img, then load the content, set
aria-hidden=false, and remove faux image's semantics by setting it to
role=presentation and removing the label.
Image in aria-hidden div, heading above given loading message: Like 9, with
addition of aria-label on heading of content above the loading content, which tells the user that something
below has not yet completed loading.
Image in aria-hidden div, upon load, notification is pumped into aria-live region in the new
content This technique is the same as 9, except we append to the loaded content an
aria-live region, which contains the "new content loaded" message, as an attempt to trick
iOS VoiceOver into refreshing its internal DOM snapshot/virtual buffer. (Note: This test implementation
disables the normal live region announcements, since we are stuffing live region messages into the new
Image in aria-hidden div, temporary, onfocus activated link above turned on
when content loads This technique is the same as 9, except there is an
(initially) inactive link element above the new content regions that, when the new content finishes loading
and a user focuses the link, forces focus to the first element within the new content. Trigger link element
is removed from the DOM after being used once. Like 12, this is an attempt to work around a Safari+iOS
VoiceOver bug, which makes newly added content unavailable to the screen reader. (Note: Because this
implementation requires a slightly different page structure on page load, it gets in own special page.)
An ARIA live region announcement is used to notify the user when loading is completed. This can be turned off if
Once initiated, the loading images will be replaced by content. The first image is replaced in 10 seconds, the
second, 5 seconds later, to allow for the tester to navigate the screen reader to the loading images prior to
The content testing area is between the horizontal rule separators, below.
Heading Already Loaded
Some content in a paragraph and stuff loads below me in 10 seconds.
I leave a white and turbid wake; pale waters, paler cheeks, where'er I sail. The envious billows sidelong
swell to whelm my track; let them; but first I pass. Yonder, by ever-brimming goblet's rim, the warm waves
blush like wine.