WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: loading content and single page applications

for

From: Paul J. Adam
Date: Jul 1, 2016 8:15AM

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