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.

Figure 16: Progress bar
No.PropertyDescriptionClassificationReference
314ContrastThe 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).MustEN 301 549:
9.1.4.11, 11.1.4.11
315ContrastText in and adjacent to the progress bar must have a contrast ratio of at least 4.5:1.MustEN 301 549:
9.1.4.3, 11.1.4.3
316Focus visibilityIf the progress bar receives the keyboard focus, the focus indicator must be visible (see Focus indicator
9.2.4.7, 11.2.4.7
No.PropertyDescriptionClassificationReference
317Use of the keyboardIn applications that do not support the virtual cursor
9.1.1.1, 11.1.1.1
318Use of the keyboardIn applications that support the virtual cursor, the progress bar should not receive the focus.ShouldEN 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).

ActionKeyClassification
Focus on the progress barTABRequired
Exit the progress barTABRequired
No.PropertyDescriptionClassificationReference
319RoleThe “progress bar” role must be communicated to the Accessibility API (see Accessibility API
11.5.2.5
320NameThe 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.

MustEN 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
321ValueThe 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).

MustEN 301 549:
11.4.1.2, 11.5.2.7
322Desktop: Value rangeThe minimum and maximum value of the progress bar must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549:
11.5.2.7
323OperationIn applications that do not support the virtual cursor
9.1.1.1, 11.1.1.1
324Desktop: PositionThe size and position of the progress bar must be communicated to the Accessibility API (see Focus indicator
11.5.2.5, 11.5.2.13

Practical tip: progress bar in Web applications

Permalink "Practical tip: progress bar in Web applications"

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

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