Accessibility
- Use
aria-valuetext to provide more specific information about the content being loaded. For example, “Please wait, this data table is loading…”.
- Add
aria-busy="true" to a container or element to indicate the element is loading. Once loaded, change the value from true to false. For example:
- If loading an entire page, add the attribute to
<body> or wrapper.
- If loading a specific component (e.g, table), add the attribute to the container of that component.
- If loading content inside a modal, add the attribute to the modal element.
- There is no required keyboard action associated with this pattern.
- The intervals are announced to screen reader users via an
aria-live region. Don’t overwhelm screen reader users with continuous reading of every instant in a progress bar’s trajectory. Announcing the progress at certain timed intervals (e.g. every 5 seconds), or at certain percentage intervals (e.g. every 10% or every 20%) is best.
