WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: loading content and single page applications

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.


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Gijs Veyfeyken
Sent: Friday, July 01, 2016 3:36 AM
To: = EMAIL ADDRESS 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.

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.
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Gijs Veyfeyken
> Sent: Friday, July 01, 2016 3:36 AM
> To: = EMAIL ADDRESS 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.

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.
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Gijs Veyfeyken
> Sent: Friday, July 01, 2016 3:36 AM
> To: = EMAIL ADDRESS 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.
> > > >

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Paul J. Adam
Sent: Friday, July 01, 2016 10:16 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] loading content and single page applications

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.
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Gijs Veyfeyken
> Sent: Friday, July 01, 2016 3:36 AM
> To: = EMAIL ADDRESS 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 > > archives at 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.
> > > archives at 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.

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".
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Paul J. Adam
> Sent: Friday, July 01, 2016 10:16 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] loading content and single page applications
>
> 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.
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf Of Gijs Veyfeyken
>> Sent: Friday, July 01, 2016 3:36 AM
>> To: = EMAIL ADDRESS 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 >> >> archives at 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.
>> >> >> archives at http://webaim.org/discussion/archives
>> >
> > > 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.

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Friday, July 01, 2016 10:34 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] loading content and single page applications

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".
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Paul J. Adam
> Sent: Friday, July 01, 2016 10:16 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] loading content and single page applications
>
> 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.
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf Of Gijs Veyfeyken
>> Sent: Friday, July 01, 2016 3:36 AM
>> To: = EMAIL ADDRESS 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 >> >> archives at 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.
>> >> >> archives at http://webaim.org/discussion/archives
>> >
> > > archives at 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.
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.
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.

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
>