E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 8 (In chronological order)

From: Gijs Veyfeyken
Date: Fri, Jul 01 2016 1:35AM
Subject: loading content and single page applications
No previous message | Next message →

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

From: Lovely, Brian (CONT)
Date: Fri, Jul 01 2016 7:36AM
Subject: Re: loading content and single page applications
← Previous message | Next message →

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.

From: Birkir R. Gunnarsson
Date: Fri, Jul 01 2016 7:46AM
Subject: Re: loading content and single page applications
← Previous message | Next message →

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 ADDRESS 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.
>
>
>

From: Paul J. Adam
Date: Fri, Jul 01 2016 8:15AM
Subject: Re: loading content and single page applications
← Previous message | Next message →

Sorry have to reply to make sure folks know that "aria-alert" is not a real attribute. And there's no value of "loading" unless you're talking about supplying a string value to an aria-label?

It's so simple for folks to make mistakes about how they spell their aria-attributes, here's the list http://www.w3.org/TR/wai-aria-1.1/#attrs_widgets

I see incorrect, made up aria-attributes used in the wild on client sites fairly often so it's an easy thing to do if you're not using a code validator like HTML5 validator or aXe. Or you can let Dreamweaver autocomplete your aria-attributes for you and never have to remember all their exact spellings.

I think you might be recommending using a aria-live="assertive" live region or to use role="alert" which is assertive.

For speaking announcements to screen reader users I recommend either using ARIA Live Regions or JavaScript Focus Management to set focus to the spinner.gif with alt text.

Paul J. Adam
Accessibility Evangelist
www.deque.com

> On Jul 1, 2016, at 8:36 AM, Lovely, Brian (CONT) < = EMAIL ADDRESS 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.
>
>
>

From: Lovely, Brian (CONT)
Date: Fri, Jul 01 2016 8:25AM
Subject: Re: loading content and single page applications
← Previous message | Next message →

Thank you Paul. My bad. I should be more aware of the dangers of "aria-dash-itis".

From: Birkir R. Gunnarsson
Date: Fri, Jul 01 2016 8:34AM
Subject: Re: loading content and single page applications
← Previous message | Next message →

Good call Paul. I was going to email Brian off-list and remind him about this.
It is essential to use ARIA checking tools to make sure you are using
the right roles or attributes.
Correct ARIA can make your webpage sing, but incorrect ARIA can cause
such a discord that the users are completely blocked from using the
webpage.
(try to put role="tab", role="presentation", or aria-hidden="true" on
the body element).
All aria attributes (states and properties) start with aria- (e.g.
aria-checked or aria-live).
but ARIA roles do not have the aria- prefix (e.g. role="alert" role="button".
Always verify with the ARIA spec.
-B




On 7/1/16, Lovely, Brian (CONT) < = EMAIL ADDRESS REMOVED = > wrote:
> Thank you Paul. My bad. I should be more aware of the dangers of
> "aria-dash-itis".
>
>

From: Lovely, Brian (CONT)
Date: Fri, Jul 01 2016 8:53AM
Subject: Re: loading content and single page applications
← Previous message | Next message →

I have a bad habit of participating in the list during short breaks and rushing to hit the "send" button. If I hope to help anyone, I should apply the same rigor here as I do at work.

From: _mallory
Date: Fri, Jul 01 2016 8:57AM
Subject: Re: loading content and single page applications
← Previous message | No next message

I found a date picker with role="widget" out there.

On Fri, Jul 01, 2016 at 09:15:46AM -0500, Paul J. Adam wrote:
> Sorry have to reply to make sure folks know that "aria-alert" is not a real attribute. And there's no value of "loading" unless you're talking about supplying a string value to an aria-label?
>
> It's so simple for folks to make mistakes about how they spell their aria-attributes, here's the list http://www.w3.org/TR/wai-aria-1.1/#attrs_widgets
>
> I see incorrect, made up aria-attributes used in the wild on client sites fairly often so it's an easy thing to do if you're not using a code validator like HTML5 validator or aXe. Or you can let Dreamweaver autocomplete your aria-attributes for you and never have to remember all their exact spellings.
>
> I think you might be recommending using a aria-live="assertive" live region or to use role="alert" which is assertive.
>
> For speaking announcements to screen reader users I recommend either using ARIA Live Regions or JavaScript Focus Management to set focus to the spinner.gif with alt text.
>
> Paul J. Adam
> Accessibility Evangelist
> www.deque.com
>