ColorSwatchPicker Accessibility

[ashleyryan]

I've been doing some research into ColorSwatches for our design system's implementation, and one of the things that our consumers keep asking us is "do we really need to keep these obnoxious tooltips that appear on focus/hover" on Swatch selection.

I've come across a few other ColorSwatch pickers, like yours, that seem like they should be compliant (in some cases because they say they are, in your case because we generally trust Adobe) but I'm curious about your reasoning for not having a visual indicator of the color label for your color swatch picker. Wouldn't that be a violation of 1.4.1? You're relying on Use of Color alone to convey information without a visible label somewhere?

https://react-spectrum.adobe.com/react-aria/ColorSwatchPicker.html

[ashleyryan]

@snowystinger @devongovett any thoughts on this?

[devongovett]

This is a good point. I consulted with our accessibility team, and the consensus is that a visible label should always be included somewhere. That doesn't necessarily mean tooltips though. Tooltips have their own problems, such as not being easily accessible on touch screen devices. Alternatively, if your UI allows it, you could add a visual label to each option, or perhaps place a label outside the ColorSwatchPicker to indicate the selected color.

In a more general color picker with other components such as ColorArea or ColorSlider, it would be infeasible to add a tooltip to each individual pixel. Displaying the currently selected color in a swatch with a visible label would probably be the best option in that case.

However, one problem to keep in mind if you only display the label for the selected color is that the user might not be able to determine what the options are until after they are selected, which could be a potentially destructive action. For example, if a user chose a color manually with a ColorArea, and then clicked on a swatch, their previous selection will be destroyed. In that case, tooltips or labels on each swatch would be best, but you could also have a way to undo and revert back to the previous selection.

In order to implement the visible label, you could use our color naming algorithm programmatically via the color.getColorName method. This is useful if your options do not already have descriptive names (e.g. branded product colors in an online store).

import {parseColor, useLocale} from 'react-aria-components';

function Example() {
  let [value, setValue] = React.useState(parseColor('#A00'));
  let locale = useLocale();

  return (
    <div>
      <MyColorSwatchPicker value={value} onChange={setValue}>
        <MyColorSwatchPickerItem color="#A00" />
        <MyColorSwatchPickerItem color="#f80" />
        <MyColorSwatchPickerItem color="#080" />
      </MyColorSwatchPicker>
      <p>Selected color: {value.getColorName(locale)}</p>
    </div>
  );
}

So in summary, our guidance is to provide a textual label somewhere. Where to place it will depend on your use case. We will be updating our documentation examples accordingly. Thanks for bringing this up!

[ashleyryan]

Thanks for the response - that's the same guidance/recommendation we had assumed (including the tooltip not being required as long as there is a visible label), so I appreciate the confirmation that I wasn't missing anything!