E-mail List Archives
Thread: How to make any Progress Bar accessible using AccDC in less than 1KB of code.
Number of posts in this thread: 1 (In chronological order)
From: Bryan Garaventa
Date: Wed, Oct 03 2012 2:15PM
Subject: How to make any Progress Bar accessible using AccDC in less than 1KB of code.
No previous message | No next message
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.