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.