Criterios de Operable
OperablePauta 2.5 Modalidades de entrada
2.5.7Movimientos de arrastre
Nivel AANuevo en WCAG 2.2Lo exige la normativa (EN 301 549).
Qué pide
Lo que se hace arrastrando también se puede hacer con clics o toques simples.
A quién ayuda: Personas con dificultades motoras.
Un caso real
Un tablero de tareas permite mover tarjetas arrastrando.
BienCada tarjeta tiene un menú «Mover a…» con las columnas.
MalSolo se puede cambiar el estado arrastrando la tarjeta.
Cómo aplicarlo en código
Reordenar sin arrastrar
Si algo se puede arrastrar, ofrece también botones. El input range nativo ya permite tocar en la barra o usar flechas.
<ol class="tareas">
<li>
Revisar el contraste
<button type="button">Subir<span class="sr-only"> «Revisar el contraste»</span></button>
<button type="button">Bajar<span class="sr-only"> «Revisar el contraste»</span></button>
</li>
</ol>
<label for="precio">Precio máximo</label>
<input id="precio" type="range" min="0" max="500" step="10"><!-- La única forma de ordenar es arrastrar con el ratón -->
<li draggable="true">Revisar el contraste</li>Cómo comprobarlo
Identifica cada arrastre y busca la alternativa sin arrastrar.