How can I help you?
Accessibility in React Skeleton component
20 Feb 20263 minutes to read
The Skeleton component follows WCAG 2.2, Section 508, and ADA accessibility standards to ensure all users, including those using assistive technologies, receive meaningful feedback during content loading periods. The component provides semantic markup and ARIA attributes that communicate loading state to screen readers and assistive devices.
The accessibility compliance levels for the Skeleton component are outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
The Skeleton component implements WAI-ARIA status pattern semantics to communicate loading state to assistive technologies. The following ARIA attributes are applied in the Skeleton component:
| Attribute | Purpose |
|---|---|
role="status" |
Identifies the Skeleton as a status region where loading state is communicated. |
aria-label |
Provides an accessible label describing the Skeleton’s purpose or the content being loaded. |
aria-live="polite" |
Announces content updates to screen readers when the skeleton is replaced with actual content. |
aria-busy="true/false" |
Set to true during loading to indicate pending content; changed to false when content loads or the skeleton is removed. |
Motion and animation accessibility
The Skeleton component supports shimmer effects that include animations. Users who prefer reduced motion can configure their operating system or browser settings, and the component respects the prefers-reduced-motion media query to minimize animations for accessibility compliance.
Ensuring accessibility
Syncfusion validates the Skeleton component’s accessibility compliance using industry-standard tools including accessibility-checker and axe-core during continuous automated testing.
The following sample demonstrates the accessibility features of the Skeleton component. Open the sample in a new window to evaluate the component’s accessibility using your preferred accessibility testing tools.