# Accessibility

## Content

[C1ColorPicker](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.ColorPicker/C1.Blazor.ColorPicker.C1ColorPicker.html) 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 | @cols=2: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.

```csharp
<C1HexColorBox Color="@SelectedColor"
               aria-label="Hexadecimal color value" />
```

>type=note
> <span data-loadable-vc-wrapper="true" data-ssr-placeholder-replace="Hm6N8:EfLS5:z8NN7:qz-Pe:OP-5u-0">Note: </span>**<span data-loadable-vc-wrapper="true" data-ssr-placeholder-replace="Hm6N8:EfLS5:z8NN7:qz-Pe:OP-5u-0">DropDownHeader</span>**<span data-loadable-vc-wrapper="true" data-ssr-placeholder-replace="Hm6N8:EfLS5:z8NN7:qz-Pe:OP-5u-0"> content is rendered within the ColorPicker header button. Do not include nested interactive elements such as buttons, links, or input controls.</span>