WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: loading content and single page applications

for

From: Lovely, Brian (CONT)
Date: Jul 1, 2016 7:36AM

I'd say the answer depends on the specific circumstance. In this case, once the search results load, apply focus to the first result.

You specified a spinning wheel gif (or similar), so make sure that has an alt attribute set to something like "loading." If the loading indicator is text instead of an image, you should be ok, as long as you add an aria attribute of aria-alert="loading" to the text node container. If the loading image is a CSS background image, and there is no text, you'll have to add a span or other container containing the text "loading". Add the aria-alert="loading" attribute, and you can position the span off screen using CSS to hide it visually.


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Gijs Veyfeyken
Sent: Friday, July 01, 2016 3:36 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] loading content and single page applications

Hi,

What's the best approach for loading content in a single page application, using Angular of any other JavaScript framework.

1. Simply do nothing? If the content loads fast, for example the results after a search, there's no need to communicate this to screenreaders.
It might even add clutter.

2. Or set up an aria-live construction? If the loading takes some time, this would explain the lack of content to users who can't see the page change.

3. Usually, there is a visual indication of content loading (spinning wheel gif or similar). Make the focus jump to the element that indicates the loading and give it an accessible name?

Does anybody have a live example?

Thanks,

Gijs

---
Gijs Veyfeyken
AnySurfer - towards an accessible internet http://www.anysurfer.be/en Brussels - Belgium The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.