Progress Bar

Success Criteria:

Description Inner text describes the value
Role Identifies itself as a progress bar
State value and max properties, indeterminate, determinate
Focus Typically not focusable

Native Element

Consider using the native <progress> element. Accessibility features are already built in.

Description

  • aria-label can be used
  • aria-labelledby="label-id" can be used as well

Role

  • Is natively a progress bar

Relationships

  • Can be described using with aria-labelledby="label-id"

State

  • aria-valuenow="20"
  • aria-valuemin="0"
  • aria-valuemax="100"
  • aria-valuetext="Step 2: Copying files... "
  • indeterminate
  • determinate

Focus

Actions

Custom Element

When using a custom component (ex: Angular Material's <mat-progress-bar> be sure the add in accessibility features.

Description

  • aria-label can be used
  • aria-labeledby can also be used

Role Requires extra work

  • role="progressbar" will identify the element as a progress bar

Relationships

  • aria-labeledby

State

  • aria-valuenow="20"
  • aria-valuemin="0"
  • aria-valuemax="100"
  • aria-valuetext="Step 2: Copying files... "
  • indeterminate
  • determinate

Focus

  • Typically not focusable

Actions