Accessibility in React Sidebar component
24 Jan 20242 minutes to read
The Sidebar component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the Sidebar component is 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 Sidebar component followed the WAI-ARIA patterns to meet accessibility standards. By default, the Sidebar utilizes the complementary role, with the option to modify the ARIA role based on provided attributes to the root element, depending on the specific use case.
If there are multiple complementary landmark roles or aside elements in a document, it is important to provide a label for each landmark using the aria-label attribute. Alternatively, if the aside has a descriptive title, it can be referenced using the aria-labelledby attribute. This label will help assistive technology users quickly understand the purpose of each landmark.
For optimal accessibility, it is recommended to incorporate a trigger component that is navigable via a keyboard, such as a button. If this is not feasible, inclusion of the tabIndex attribute becomes necessary. Furthermore, explicit handling of the aria-expanded attribute is required for the trigger element.
Keyboard interaction
The Sidebar component does not have any inbuilt keyboard interaction support. However, you can utilize the keyboard interactions of focusable elements within the Sidebar component.
Ensuring accessibility
The Sidebar component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Sidebar component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Sidebar component with accessibility tools.