• Success Criterion 2.5.7
  • Conformance level AA

Dashboard Widgets Reorderable Only by Dragging

2.5.7 — Dragging Movements

Scenario

Setting

An insurance company's claims form

What’s wrong

Reordering dashboard widgets, playlist items, priority ranks via drag with no alternative.

Example 

<div class="evidence-item" draggable="true" ondragstart="startDrag(event)" ondrop="reorderEvidence(event)">
  Photo of dented bumper
</div>

Why it matters

A claimant trying to put the most important damage photo first can't reorder the list without a steady drag.

How to test

Try reordering dashboard widgets, playlist items, or priority ranks via a menu or buttons instead of dragging: if drag is the only method, it fails.

How to fix

Every draggable list needs equivalent move-up and move-down controls.

<button aria-label="Move photo up" onclick="moveEvidenceUp(id)">↑</button>
<button aria-label="Move photo down" onclick="moveEvidenceDown(id)">↓</button>

Outcome

A claimant clicks the up arrow and their key damage photo appears first in the claim.

Who is affected

People with reduced grip strength and screen reader users navigating a list that offers no keyboard reorder path.

Learn more

Related scenarios