Accessibility in EJ2 TypeScript Sidebar control
28 Jan 20253 minutes to read
The Sidebar control 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 control 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 control meet the requirement.
- Some features of the control do not meet the requirement.
- The control does not meet the requirement.WAI-ARIA attributes
The Sidebar control 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 control 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 control does not have any inbuilt keyboard interaction support. However, you can utilize the keyboard interactions of focusable elements within the Sidebar control.
Ensuring accessibility
The Sidebar control’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Sidebar control is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Sidebar control with accessibility tools.