WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Angular website accessibility Issue

for

From: dawn
Date: Jan 11, 2016 4:03AM

Hi Harshit,

my sympathies :) retrofitting accessibility is tougher than building it in
from scratch

As you know, Angular and similar load in content via AJAX. This means
that the content isn't available when the assistive technology
(screenreader) first hits the page and puts what it finds on the page into
a virtual buffer, because the AJAX call has not yet returned, nor the data
transformed into rendered HTML.

The aria-live attribute will indicate to the screenreader that this is an
area where content updates. It is designed for smaller bits within the
page rather than the whole page, but might help you out if you put it on a
high enough level.

usage:
<div aria-live="polite">loading...</div>

You might also want aria-busy changing between true and false to indicate
that an area is being updated.

I wrote up something on this a few years ago:
http://www.dawnbudge.co.uk/index.php/2013/08/make-javascript-updates-includi
ng-ajax-accessible/

Thanks,
Dawn



-------- Original Message --------
> From: "Harshit Rawal" < <EMAIL REMOVED> >
> Sent: 11 January 2016 05:59
> To: <EMAIL REMOVED>
> Subject: [WebAIM] Angular website accessibility Issue
>
> Hi, I am working on a website that build on angular framework to make is
accessible, it has lots of html content. website's page loads in around 10
to 15 sec. My issue with JAWs is, Jaws start reading page like "there is no
links on page" and stops reading other content that loads or
bootstrap(angular term) after few seconds. Please suggest any way to fix
this issue. -- Thanks, Harshit Rawal
subscription, visit http://list.webaim.org/ List archives at
http://webaim.org/discussion/archives <EMAIL REMOVED>