How can I help you?
Accessibility in React Dashboard Layout component
5 Mar 20263 minutes to read
The Dashboard Layout component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles and WAI-ARIA patterns that are commonly used to evaluate accessibility.
The Dashboard Layout component provides an accessible interface for organizing and managing dashboard panels, ensuring that users with disabilities can interact with and navigate the layout structure.
Accessibility compliance
The accessibility compliance for the Dashboard Layout component is outlined below.
- 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.| 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 | Not applicable |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
WAI-ARIA attributes
The Dashboard Layout component applies WAI-ARIA attributes to ensure proper communication with assistive technologies. The following attributes are applied to dashboard elements:
| Attributes | Purpose |
|---|---|
role=list |
Indicates the role as a list for the Dashboard Layout element. |
role=listitem |
Indicates the role as a listitem for the Dashboard panels. |
role=presentation |
Indicates the role as a presentation for the table when the showGridLines property is enabled. |
aria-grabbed |
When the panel is chosen for dragging, the aria-grabbed attribute is set to “true”. If it’s set to “false”, the element can be grabbed for drag-and-drop, but it won’t be actively held. |
Keyboard interaction
Keyboard support is not applicable for the Dashboard Layout.
Accessibility testing
Accessibility levels for the Dashboard Layout component are validated using automated tools such as accessibility-checker and axe-core.
Evaluate the component’s accessibility using the following sample: open the sample in a new window and run accessibility tools against it.