Code examples

Support varies by screen reader. It’s recommended to add full aria attributes, even when using a native <progress> element.

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<progress role="progressbar"
          id="progress"
          aria-label="File upload"
          value="25"
          aria-valuemin="0"
          aria-valuenow="25"
          aria-valuemax="100"
          max="100">
  25%
</progress>
25%

Developer notes

Name

  • Use aria-label="Progress bar name" when there is not a visible title.

Role

  • Use role="progressbar

Group

  • If the progress bar is describing another region of the page, use aria-describedby="progressbar-id" to connect the two elements.

State

  • The state will be read out to the screen reader user by default.

Focus

  • Progress bar is not usually focusable.