Progress bar

Synonyms: Progress display

See also: Slider , graphic

A progress bar shows how far a process has progressed (see DIN EN ISO 9241-161: 8.30). The progress can be displayed in text form, graphically (e.g. progress bar) or as a combination of graphics and text. The presentation of the progress bar changes automatically until the process is complete.

Focus indicator). | Must | EN 301 549:
9.2.4.7, 11.2.4.7 |

virtual cursor, it must be possible to access and exit the progress bar with the keyboard (see Use of the keyboard table).

Exception: The progress bar is marked so that its updates can are perceptible without focusing with the use of assistive technology.

Note: The following table only applies if the progress bar has to be accessible with the keyboard (see above).

Accessibility API). | Must | EN 301 549:
11.5.2.5 | | @!320 | Name | The progress bar must have a concise and expressive Accessible Name.

Note 1: The Accessible Name does not have to be visible.

Note 2: Text that identifies the current process step is not the Accessible Name, but the value of the progress bar.

Note: The value of the progress bar is usually expressed as a percentage. The current process step can also be specified in text form (e.g. the name of the file that is currently being copied).

virtual cursor, it must be possible to access and exit the progress bar with assistive technology (see Accessibility API).

Exception: The progress bar is marked so that its updates can are perceptible without focusing with the use of assistive technology.

Focus indicator). | Must | EN 301 549:
11.5.2.5, 11.5.2.13 |

Progress bar with value:

• JAWS: [label] progress bar [value] percent
• NVDA: [label] progress bar [value]
• Windows Narrator: [label] [value in %] percent status bar current value [value] lowest value [minimum value] highest value [maximum value]

Progress bar without value:

• JAWS: [label] progress bar 0 percent
• NVDA: [label] busy status
• Windows Narrator: [label] 0 percent status bar current value 0 lowest value [minimum value] highest value [maximum value]

Please note:

• JAWS misleadingly outputs the value with the addition “percent”, without converting it into a percentage value.
• The updating of the progress bar is not automatically perceptible with JAWS and Windows Narrator.
• NVDA automatically outputs the progress bar update regardless of the focus position with short beeps whose pitch represents the level of the value.

The progress bar should be implemented with the HTML element <progress>.

The current value is set with the value attribute. If no value attribute is specified, the progress bar is indeterminate and only indicates that progress is being made without being able to show its extent.

The maximum value is set with the max attribute. It should be noted that its value is imperceptible with many forms of assistive technology. The minimum value is always 0.

The label should be linked to the progress bar with the <label for=ID> element.

The <progress> element can contain different child elements depending on the HTML specification. These are neither visually perceptible nor output by the assistive technology, however.

Further information: 4.10.13 The progress element - HTML Standard (whatwg.org)

If the progress bar is not implemented with the HTML element, it is also necessary to take account of the following:

• The role is communicated with role=progressbar.
• The current value can be specified with aria-valuenow. If the value is not specified, the progress bar is indeterminate.
• aria-valuetext can also be used to specify a value in text form which should be then output by the assistive technology instead of the value in aria-valuenow.
• The minimum and maximum values can be specified with aria-valuemin and aria-valuemax.
• The labeling can take place with aria-label or aria-labelledby.
• The presentation of the progress bar should be verified in Windows High Contrast mode.

Further information: progressbar role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link)

Information about this article

Date:

15.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!