Accessibility in EJ2 TypeScript Chips control
20 Jan 20253 minutes to read
The Chips control follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WAI-ARIA roles that are commonly used to evaluate accessibility.
The accessibility compliance for the Chips 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 Chips control follows the WAI-ARIA patterns to meet accessibility standards. The following ARIA attributes are used in the Chips control:
| Attributes | Purpose |
|---|---|
role=listbox |
Indicates the ChipList control wrapper element as listbox. |
role=option |
Used to convey a significant and contextual message to the user(ChipList). |
role=button |
Used to convey a significant and contextual message to the user(Single Chip). |
aria-label |
Provides an accessible name for the Chip. |
aria-selected |
Indicates the element is selected. |
aria-disabled |
Indicates element is perceivable but disabled. |
aria-multiselectable |
Indicates multiple items to be selected. |
Keyboard interaction
The Chips control followed the keyboard interaction guidelines, making it accessible for users who rely on assistive technologies (AT) or keyboard navigation. The following keyboard shortcuts are supported by the Chips control:
| Keyboard shortcuts | Actions |
|---|---|
| Enter / Space | Selects the targeted chip from the ChipList/ChipCollection. |
| Delete / Backspace | Deletes the targeted chip from the ChipList/ChipCollection. |
Ensuring accessibility
The accessibility levels of the Chips control are ensured through accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Chips control can be evaluated in the following sample. Open the sample in a new window to test the accessibility of the Chips control with accessibility tools.