Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Loading

How it works

The Carbon inline loading component is used to notify user’s that the page content is loading. W3C WAI-ARIA role="alert" and aria-live="assertive" are used to ensure screen reader users are also provided the same information.

Accessibility considerations

This component has been validated to meet the WCAG 2.0 AA and Section 508 accessibility guidelines, however changes made by the content owner can affect accessibility compliance. Be sure to review and follow the guidance in this section when updating or adding new content to this component.

  1. If the inline loading message is changed, be sure it is clear and concise.

Resources

Helpful resources for creating customized accessible implementations

Accessibility testing

Accessibility issues are tracked in the Carbon Component GitHub repository.

Automated test

Automated test environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
DAP test
- No violations

macOS Screen reader tests

Environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
VoiceOver(VO) test:
  1. On page load. VO announces "Active Loading Indicator."

Windows screen reader tests

Environment
Results
- Microsoft Windows 10
- Firefox version 68
- JAWS 18
- Carbon React version 7.7.1
JAWS test:
  1. On page load. JAWS announces "Active Loading Indicator."

iOS screen reader tests

Environment
Results
- iOS version 13.1.3 with VoiceOver
- Safari version 13.1.3
- Carbon 10 - React
VoiceOver test:
  1. On page load. VO announces "Active Loading Indicator."
Edit this page on GitHub
Previous
Loading: Code
Next
Components: Modal