WebAIM - Web Accessibility In Mind

E-mail List Archives

How to make any Progress Bar accessible using AccDC in less than 1KB of code.

for

From: Bryan Garaventa
Date: Oct 3, 2012 2:15PM

In case it's of interest, this reflects the LinkedIn article at
http://lnkd.in/dHf3wf

It's very easy to make any progress bar accessible for screen reader users using AccDC, which can be done using less than 1KB of code. It can also be used with any progress bar implementation from any JavaScript library or framework equally, no matter what it looks like or what it's purpose is.

There is no need to freeze the keyboard, or anything fancy like that. Besides, depending on the length of the progress bar, preventing keyboard access may impair navigation if done like that anyway.

The script is available at:
http://whatsock.com/modules/progressbar_announce.js

So here is how to make it work:

// When your progress bar function opens, simply create a pAnnounce object like so
pAnnounce = new ProgressAnnounce('Downloading file, please wait');
// Then configure optional overrides like:
pAnnounce.interval = 5000; // Default = 3000
pAnnounce.value = 1; // Default = 0
pAnnounce.type = ' Seconds'; // Default = '%' (is appended to 'value when announced)
// And then start progress announcement
pAnnounce.start();

// Within the method call that runs every time the progress bar value changes, add the following line (where 'val' reflects the newly changed value):
pAnnounce.value = val;

// Within the method call that runs when the progress bar completes, add the following:
pAnnounce.stop('Download Complete');

And that's it! You see? Simple...

I've tested this using the latest three versions of JAWS in IE8 and 9, using the latest versions of NVDA and Firefox, and using an iPhone/iPad using Voiceover with equal success.