Color picker

Requirements

Users should be able to:

• Navigate to the color picker using assistive technology. 
• Browse and select a color from the list.
• Understand the available colors from the names of the color elements.
• Select a color without relying on color perception alone.

Interactions

Mouse interactions

Use clear hover states for mouse users to clearly indicate which option is selected.

Keyboard interactions

• Tab. Moves focus from the previous interactive element on the page to the color picker.
• Pressing tab again moves focus to the next interactive element on the page.
• Space. Activates the dropdown list of colors.
• The focus indicator should remain on the input.
• A secondary focus should be provided for the elements within the list.
• Arrow up and Arrow down. Moves focus between the options in the list.
• Enter. Selects an element from the list.
• Escape. Closes the dropdown list.

Design Considerations

• The color picker should have a clear, visible label, allowing users to understand its purpose.
• Make sure that colors options are given clear labels so that they are not distinguished by color alone.
• Use generic well-known color names. For example: use Grey, not Winter Sky.

Development Considerations

• The input should be marked up as a select-only combobox, using the button element with role=”combobox”.
• Use JavaScript to toggle both the true and false states of the aria-expanded attribute so that screen reader users can understand the state of the element.
• The list of options should have role=”listbox” to allow screen reader users to interact with the list of options.
• The input should have an aria-controls attribute, pointing to the id of the listbox to allow screen reader users to understand the relationships between elements.
• The input should have an aria-activedescendant attribute, pointing to the id of the currently focused element in the listbox.
• The id of the selected element should change as the user navigates to other elements.
• Listbox items should be wrapped in an unordered list ul with options being list items li.
• Each option should have role=”option”.