Accessibility in Angular Sidebar
26 Sep 20263 minutes to read
The Angular Sidebar component follows the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
Accessibility Compliance
The Angular Sidebar component’s accessibility compliance is summarized in the following table.
| 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 Angular Sidebar component followed the WAI-ARIA patterns to meet accessibility standards. By default, the Angular 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 labels. This can be done using the aria-label attribute for each landmark. 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 Angular Sidebar component does not have any inbuilt keyboard interaction support. However, you can utilize the keyboard interactions of focusable elements within the Angular Sidebar component.
Ensuring accessibility
The Angular Sidebar component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Angular Sidebar component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Angular Sidebar component with accessibility tools.