• Success Criterion 2.5.7
  • Conformance level AA

Color Picker That Requires Dragging in a Gradient Field

2.5.7 — Dragging Movements

Scenario

Setting

A recipe site's ingredient list

What’s wrong

Color pickers requiring drag in the gradient field.

Example

Open a recipe site's ingredient list and this is what you'll see: color pickers requiring drag in the gradient field.

Why it matters

People with limited dexterity and switch, eye-gaze, or voice users who cannot drag. On a recipe site's ingredient list, that means they lose track of where they are on the page.

How to test

Try selecting a color via numeric input or click-to-select instead of dragging in the gradient field: if drag is required, it fails.

How to fix

A single-pointer, non-dragging alternative (buttons, menu option, tap) must exist for the drag operation.

Outcome

With the fix in place on a recipe site's ingredient list, they complete the task using only the keyboard.

Who is affected

People with limited dexterity and switch, eye-gaze, or voice users who cannot drag.

Learn more

Related scenarios