Accessibility
C1ColorPicker provides keyboard and assistive-technology support through semantic ARIA roles, accessible labels, localized accessibility strings, and visible focus indicators.
The control supports keyboard interaction for opening and closing the drop-down, navigating color cells and tabs, adjusting sliders, and applying colors.
Accessible Structure
Element | Accessibility Pattern | |
|---|---|---|
ColorPicker header | Button | |
Drop-down content | Dialog | |
Basic and Advanced mode selector | Tabs and tab panels | |
Hue and alpha controls | Sliders | |
RGB, HSL, alpha, and hexadecimal inputs | Input or spinbutton controls | |
Color preview | Labelled element with a description of the current color | |
Keyboard interaction supports opening and closing the drop-down, navigating between controls and color cells, selecting colors, changing tabs, adjusting slider values, and applying advanced color selections.
Accessible Labels
Applications provide meaningful labels for standalone controls and custom content.
<C1HexColorBox Color="@SelectedColor"
aria-label="Hexadecimal color value" />Note: DropDownHeader content is rendered within the ColorPicker header button. Do not include nested interactive elements such as buttons, links, or input controls.