WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: loading content and single page applications

for

From: Birkir R. Gunnarsson
Date: Jul 1, 2016 7:46AM

In addition to adding alt text on the loading icon, I would put
aria-busy="true" attribute on the container element for the content
that is being loaded (you can put it on the body element if it is the
whole page).
http://www.w3.org/TR/2016/WD-wai-aria-1.1-20160317/#aria-busy
I am not sure how well this is supported by a.t. but it should be, it
is semantically the right thing to do.



On 7/1/16, Lovely, Brian (CONT) < <EMAIL REMOVED> > wrote:
> 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 > > http://webaim.org/discussion/archives
> > >
> 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.
> > > > >


--
Work hard. Have fun. Make history.