Progress Bar with ARIA Live Regions

From Level Access Web Labs
Jump to: navigation, search

Accessible Progress Bar Example

Accessible Progress Bar Example

This HTML5 progress bar has been implemented with aria-live="polite" as the only ARIA in use. The separate announcements by screen readers for the progress bar and textual updates are achieved by putting them in separate live regions.

 
Progress: 0%
Click the start button to begin testing

Testing Platform and Software Information

This progress bar has been tested with the following screen readers, operating systems and browsers:

  • JAWS 14 on Windows 7, Internet Explorer 10
  • NVDA Version 2012.3.1 on Windows 7, Firefox Version 25
  • VoiceOver on OS X 10.9, Safari Version 7.0 (9537.71)
  • VoiceOver on IOS 7.0.3, Safari

Known Issues

  • The updates are not announced using JAWS13 on Windows XP and Internet Exporer 8

Test results for ARIA Progress Bar

AT Browser Notes
JAWS Internet Explorer Works as expected The Value of the Progress Bar is announced as it changes.
JAWS Firefox Works as expected The value of the progress bar is announced as it changes. Note some values are announced twice.
NVDA Internet Explorer Partially Works as expected the value of the progress bar is announced as it changes. Note NvDA normally plays beeping sounds for the progresss bar.
NVDA firefox partially Works as expected The value of the progress bar is announced as it changes. The beeps are also played for the progress bar effectively rendering the value twice.
VoiceOver Safari Works as expected, The value of the progress bar is announced as it changes.
Talkback Firefox Works as expected, TheThe value of the Progress Bar is announced as it changes.
Talkback Chrome Works as expected, The value of the progress bar is announced as it changes.