---
url: /components/progress-indicators/accessibility.md
description: >-
  Progress indicators inform users about the status of ongoing processes, such
  as loading an app. It show the status of a process in real time.
---

# Progress indicators

Progress indicators inform users about the status of ongoing processes, such as loading an app. It show the status of a process in real time.

[Overview](overview.md) · [Specs](specs.md) · [Guidelines](guidelines.md) · **Accessibility**

## Use cases

People should be able to do the following using the assistive technology:

* Navigate to the progress indicator
* Understand what progress the indicator is communicating

## Interaction & style

The active indicator, which displays progress, provides visual contrast of at least 3:1 against most background colors.

![Dark line of progress indicator stands out against the lighter colored track.](/assets/4bebe63e-mlepc1r2-01.DyoaVC_v.webp)

The progress indicator and stop indicator provide visual contrast of at least 3:1 against most background colors

<br>

When integrated into another component, such as a button, make sure that the active indicator provides visual contrast of at least 3:1 against the other component. 

For the active indicator, use the same color as the label text or icon. The track should be removed.

::: tip Do
![Circular indicator on button passes 3 to 1 contrast test.](/assets/4a79d7ce-mlepcmau-02.Ds51ZRrP.webp)

Ensure the indicator’s color provides at least 3:1 contrast against the surface it's on
:::

::: danger Don't
![Circular indicator on button fails 3 to 1 contrast test.](/assets/6e62859d-mlepd6dk-03.DuhTHdb2.webp)

Avoid using a color below 3:1 contrast
:::

For linear progress indicators, the stop indicator is required if the track has a contrast below 3:1 with its container or the surface behind the container.

Essentially, the end of the track must be easy to identify.

::: tip Do
![Bright container holding the progress bar is on a dark surface, passing the 3:1 color contrast.](/assets/5e880fd8-mlepdozy-04.CBufiCQU.webp)

Only remove the stop indicator when the linear progress indicator has at least a 3:1 color contrast with surrounding containers and surfaces
:::

::: danger Don't
![Bright container holding progress indicator is on a bright surface, failing the 3:1 color contrast.](/assets/714cff20-mlepe18t-05.DkdrYT74.webp)

Avoid removing the stop indicator if any adjacent containers or surfaces are below the 3:1 color contrast
:::

## Labeling elements

Since the progress indicator is a visual cue, it needs an accessibility label to describe the kind and amount of progress made.

Use the **progress bar&#xA0;**&#x61;ccessibility role, and write an accessibility label that describes the purpose of the progress indicator. The label should include the process, such as "loading,” and the affected content, such as a page, article, or episode. For example: "Loading news article" or "Refreshing page."

![Determinate linear progress indicator has an accessibility label of “loading news article” and role of “progressbar”.](/assets/d3b6fd23-mlepereg-06.TDacpUtL.webp)

Progress indicator labels should explain which items are loading

![Indeterminate linear progress indicator has an accessibility label of “loading my episodes” and role of “progressbar.”](/assets/3bc04d06-mlepf1vr-07.v8GZIAyh.webp)

A label on an intedeterminate progress indicator on a screen which is loading a set of podcast episodes