Synonyms: Progress display
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.
Presentation
Permalink "Presentation"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 314 | Contrast | The progress bar must have a contrast ratio of at least 3:1. This applies to the contrast of the progress bar with the background as well as to the contrasts within the progress bar (between the filled and unfilled bar). | Must | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 315 | Contrast | Text in and adjacent to the progress bar must have a contrast ratio of at least 4.5:1. | Must | EN 301 549: 9.1.4.3, 11.1.4.3 |
| 316 | Focus visibility | If the progress bar receives the keyboard focus, the focus indicator must be visible (see Focus indicator). | Must | EN 301 549: 9.2.4.7, 11.2.4.7 |
Operation
Permalink "Operation"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 317 | Use of the keyboard | In applications that do not support the 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. | Must | EN 301 549: 9.1.1.1, 11.1.1.1 |
| 318 | Use of the keyboard | In applications that support the virtual cursor, the progress bar should not receive the focus. | Should | EN 301 549: 9.4.1.4, 11.2.4.3 |
Use of the keyboard: progress bar
Permalink "Use of the keyboard: progress bar"Note: The following table only applies if the progress bar has to be accessible with the keyboard (see above).
| Action | Key | Classification |
|---|---|---|
| Focus on the progress bar | TAB | Required |
| Exit the progress bar | TAB | Required |
Programming/interfaces
Permalink "Programming/interfaces"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 319 | Role | The “progress bar” role must be communicated to the Accessibility API (see 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. | Must | EN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5, 11.5.2.8 |
| 321 | Value | The value of the progress bar must be communicated to the Accessibility API (see Accessibility API). 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). | Must | EN 301 549: 11.4.1.2, 11.5.2.7 |
| 322 | Desktop: Value range | The minimum and maximum value of the progress bar must be communicated to the Accessibility API (see Accessibility API). | Must | EN 301 549: 11.5.2.7 |
| 323 | Operation | In applications that do not support the 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. | Must | EN 301 549: 9.1.1.1, 11.1.1.1 |
| 324 | Desktop: Position | The size and position of the progress bar must be communicated to the Accessibility API (see Focus indicator). | Must | EN 301 549: 11.5.2.5, 11.5.2.13 |
Practical tip: progress bar in Web applications
Permalink "Practical tip: progress bar in Web applications"Screen reader output
Permalink "Screen reader output"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.
HTML
Permalink "HTML"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)
ARIA
Permalink "ARIA"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-valuetextcan also be used to specify a value in text form which should be then output by the assistive technology instead of the value inaria-valuenow.- The minimum and maximum values can be specified with
aria-valueminandaria-valuemax. - The labeling can take place with
aria-labeloraria-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
You are welcome to send feedback by email about our handout!