Opened 13 years ago

Closed 13 years ago

Last modified 12 years ago

#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)

HighContrastProgressBar.diff (2.6 KB) - added by simon.bates@… 13 years ago.
HighContrastProgressBar.2.diff (3.7 KB) - added by simon.bates@… 13 years ago.
AccessibleProgressBar.diff (6.2 KB) - added by simon.bates@… 13 years ago.
AccessibleProgressBar.2.diff (6.1 KB) - added by simon.bates@… 13 years ago.
AccessibleProgressBar.3.diff (6.5 KB) - added by guest 13 years ago.

Download all attachments as: .zip

Change History (16)

comment:1 Changed 13 years ago by Becky Gibson

Component: GeneralAccessibility
Milestone: 0.9M1
Owner: changed from anonymous to Becky Gibson
Status: newassigned

Changed 13 years ago by simon.bates@…

comment:2 Changed 13 years ago by simon.bates@…

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

comment:3 Changed 13 years ago by simon.bates@…

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 13 years ago by bill

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

comment:5 Changed 13 years ago by simon.bates@…

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

Changed 13 years ago by simon.bates@…

comment:6 Changed 13 years ago by 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.

comment:7 Changed 13 years ago by simon.bates@…

I have started a forum topic:

http://dojotoolkit.org/node/523

Changed 13 years ago by simon.bates@…

Attachment: AccessibleProgressBar.diff added

Changed 13 years ago by simon.bates@…

comment:8 Changed 13 years ago by simon.bates@…

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 13 years ago by guest

comment:9 Changed 13 years ago by 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

comment:10 Changed 13 years ago by Becky Gibson

Resolution: fixed
Status: assignedclosed

(In [8036]) fixes #2601

comment:11 Changed 12 years ago by (none)

Milestone: 0.9M2

Milestone 0.9M2 deleted

Note: See TracTickets for help on using tickets.