#2601 closed defect (fixed)
Implement a11y for progress bar
Reported by: | Becky Gibson | Owned by: | Becky Gibson |
---|---|---|---|
Priority: | high | Milestone: | |
Component: | Accessibility | Version: | 0.4.1 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
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.
Attachments (5)
Change History (16)
comment:1 Changed 14 years ago by
Component: | General → Accessibility |
---|---|
Milestone: | → 0.9M1 |
Owner: | changed from anonymous to Becky Gibson |
Status: | new → assigned |
Changed 14 years ago by
Attachment: | HighContrastProgressBar.diff added |
---|
comment:2 Changed 14 years ago by
comment:3 Changed 14 years ago by
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
comment:4 Changed 14 years ago by
I'm sure that 2000px as a maximum vertical size for a horizontal scrollbar is ok... but what about vertical scrollbars?
comment:5 Changed 14 years ago by
The implementation in the patch would have problems for vertical scrollbars taller than 2000px.
Changed 14 years ago by
Attachment: | HighContrastProgressBar.2.diff added |
---|
comment:6 Changed 14 years ago by
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.
Changed 14 years ago by
Attachment: | AccessibleProgressBar.diff added |
---|
Changed 14 years ago by
Attachment: | AccessibleProgressBar.2.diff added |
---|
comment:8 Changed 14 years ago by
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
Changed 14 years ago by
Attachment: | AccessibleProgressBar.3.diff added |
---|
comment:9 Changed 14 years ago by
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
comment:10 Changed 14 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
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:
For some other mockups of solutions for high contrast mode please see:
http://sjb.atrc.utoronto.ca/sandbox/progressbar-styling.html