Implement a11y for progress bar

[Becky Gibson]

The progress bar needs to be updated to display properly in high contrast mode - see proposals at ​http://dojo.jot.com/WikiHome/WidgetProject/ProgressBar.

Also needs ARIA roles and states added. role=progressbar. Properties valuemin (usually 0) and valuemax should be specified and valuenow should be updated as the progressbar is updated.

[[email protected]…]

I have attached a first go at modifications to the Progress Bar to make it visible in high contrast mode. This implementation uses a div with a single top border to simulate a bar.

This implementation has the following issues:

• The vertical size of the bar must be specified as an absolute size; percentage cannot be used. This is a limitation of border widths in CSS. The current patch sets a size of 2000px and the border should be clipped to the containing div (overflow:hidden). However, no matter what size one picks there will be problems when a Progress Bar with a vertical size greater than the picked size is used (>= 2001 in this case). A solution to this issue might be to copy the size from the containing div and set it in the border with Javascript.

• If the value of the progress bar is large enough it will cover up the text label describing the value ("55%" for example)

For some other mockups of solutions for high contrast mode please see:

​http://sjb.atrc.utoronto.ca/sandbox/progressbar-styling.html

[[email protected]…]

Patch has been tested on:

• Firefox on Windows with images turned off
• Firefox in Windows High contrast mode
• Internet Explorer in Windows High contrast mode

[bill]

I'm sure that 2000px as a maximum vertical size for a horizontal scrollbar is ok... but what about vertical scrollbars?

[[email protected]…]

The implementation in the patch would have problems for vertical scrollbars taller than 2000px.

[guest]

Uploaded latest version of the patch. Changes:

• Added initial ARIA support
• Vertical bars are now treated differently from horizontal ones: horizontal bars can be up to 2000px high and any width, vertical bars can can up to 2000px wide and any height

This patch still has the problem of covering the text label.

[[email protected]…]

I have started a forum topic:

http://dojotoolkit.org/node/523

[[email protected]…]

Added the latest version of this work as AccessibleProgressBar.2.diff.

The patch implements high contrast support with 2 layers:

• a layer, visible by default, containing the tundra progress bar tiled image, class="dojoProgressBarTileLayer"
• a layer containing a colored bar with a border that sits below "dojoProgressBarTileLayer", visible when a colored bar is wanted instead of the tiled image and visible in high contrast mode, class="dojoProgressBarColorLayer"

ARIA support has been added:

• role="progressbar"
• valuenow is set to the same text as the bar annotation (this.report(percent))
• during animation valuenow is set to "unknown" (please see ​http://www.w3.org/TR/aria-state/)

ProgressBar.color has been removed:

• a colored bar may be created instead of a tiled one by adding the class "dojoProgressBarColor" to the ProgressBar (see test_ProgressBar.html for an example)
• by default the color of the bar is #84a3d1 (the color of the container border) and it may be changed by setting the background-color and border-color styles of the "dojoProgressBarColorLayer" (see test_ProgressBar.html for an example)

test_ProgressBar.html has been updated:

• a timer test has been added that starts the bar at 0% and increases by 10% each second until 100%
• the red bar has been changed to reflect the removal of ProgressBar.color

Tested:

• FF Windows
• FF images disabled Windows
• FF high contrast Windows
• IE Windows
• IE high contrast Windows

[guest]

Uploaded latest AccessibleProgressBar.3.diff patch. Changes from AccessibleProgressBar.2.diff:

• the focus (tabindex="0") and the ARAI role and state have been moved from ProgressBar.domNode to ProgressBar.internalProgress
• the declaration and documentation for the ProgressBar.color property has been removed

The focus and ARIA information change was made so that JAWS could read updating progress bars.

• Simon

[Becky Gibson]

(In [8036]) fixes #2601

[(none)]

Milestone 0.9M2 deleted