How can I help you?
Accessibility in Angular Color picker component
26 Feb 20264 minutes to read
The ColorPicker 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 ColorPicker 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 ColorPicker 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 ColorPicker 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 ColorPicker component’s accessibility is validated using industry-standard tools including accessibility-checker and axe-core during automated testing.
The accessibility compliance of the ColorPicker is demonstrated in the following sample. Open the sample in a new window to evaluate the ColorPicker’s accessibility with accessibility tools.