There are many variations of progress bars and loading spinners, some of which may not need to be a true progress bar at all.
Support varies by screen reader. It’s recommended to add full aria attributes, even when using a native
Use semantic HTML
- This semantic HTML contains all accessibility features by default.
- While not a requirement, it is focusable to increase discoverability.
Spinner loading takeover
- There are many variations of loaders / spinners.
- While a takeover spinner modal is present, other content on the page must be inert
Use semantic HTML
- This semantic HTML contains all accessibility features using a dialog.
progresselement can be used to describe the state
Ensure content is ready before being available
- If content is being loaded slowly behind the spinner inside an
aria-busy="true"to keep it from being read until the update is complete
Inline dynamic loading waiting example
This example dynamically injects progress updates that will be read by a screen reader
aria-busy="true"has spotty support, but does indicate that the region is busy
aria-describedbyis allows the current progress to be read when the button is focused
aria-disabledreinforces that the save action is incomplete
role="statushas an implicit aria-live=”polite” of polite and
aria-atomic="true"meaning the entire content of the status will be read on each update
aria-label="Progress bar name"when there is not a visible title.
- If the progress bar is describing another region of the page, use
aria-describedby="progressbar-id"to connect the two elements.
- The state will be read out to the screen reader user by default.
- Progress bar is not usually focusable.
- MagentaA11y applies WCAG Graphics Contrast Guidelines