Accessibility in Angular Color Picker
25 Sep 20264 minutes to read
The Angular Color Picker component adheres to accessibility guidelines and standards including ADA, Section 508, WCAG 2.2 standards, and WAI-ARIA roles. The following table outlines the accessibility compliance status of the Angular Color Picker component.
| 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 Color Picker component implements WAI-ARIA patterns to ensure accessibility compliance. The following ARIA attributes are used in the ColorPicker component:
| Attributes | Purpose |
|---|---|
role |
Identifies the ColorPicker as color and palette tiles as gridcell. |
aria-label |
Provides accessible names for palette tiles. |
aria-selected |
Indicates the current selected state of a tile. |
aria-haspopup |
Indicates the availability of the popup element. |
aria-expanded |
Indicates whether the popup is expanded or collapsed. |
aria-owns |
Defines parent/child relationships between DOM elements when hierarchy cannot be used. |
aria-disabled |
Indicates that the element is disabled and not editable or operable. |
Keyboard interaction
The Angular Color Picker component supports keyboard interaction guidelines, enabling full functionality for users relying on assistive technologies or keyboard-only navigation. The following keyboard shortcuts are supported:
| Press | To do this |
|---|---|
| Up Arrow | Moves the handler or tile up. |
| Down Arrow | Moves the handler or tile down. |
| Left Arrow | Moves the handler or tile left. |
| Right Arrow | Moves the handler or tile right. |
| Enter | Applies the selected color value. |
| Tab | Focuses the next focusable element in the ColorPicker popup. |
Ensuring accessibility
The Angular Color Picker component’s accessibility is validated using industry-standard tools including accessibility-checker and axe-core during automated testing.
The accessibility compliance of the Angular Color Picker is demonstrated in the following sample. Open the sample in a new window to evaluate the ColorPicker’s accessibility with accessibility tools.