2526UFV2.5.7-A-001
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_2/2.5_Modalidades_de_los_input/2.5.7-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<h2>Ordena las tareas (solo arrastrando)</h2>
<ul id="tareas">
<li draggable="true">Pagar factura</li>
<li draggable="true">Llamar al médico</li>
<li draggable="true">Comprar comida</li>
</ul>
<script>
const ul = document.getElementById('tareas');
let dragging = null;
ul.addEventListener('dragstart', (e) => {
dragging = e.target;
e.dataTransfer.effectAllowed = 'move';
});
ul.addEventListener('dragover', (e) => {
e.preventDefault(); // permitir drop
const target = e.target.closest('li');
if (!target [[||]] target === dragging) return;
const rect = target.getBoundingClientRect();
const after = (e.clientY - rect.top) > rect.height / 2;
ul.insertBefore(dragging, after ? target.nextSibling : target);
});
ul.addEventListener('drop', (e) => e.preventDefault());
</script>
Explicación del problema detectado:
La funcionalidad (reordenar tareas) depende únicamente de un movimiento de arrastre, sin alternativa que permita lograr el mismo resultado con un único clic/toque.
Esto incumple el criterio porque el usuario queda obligado a realizar un gesto que requiere precisión y control motriz.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Motriz (barrera grave): personas con temblores, rigidez, poca fuerza o baja precisión pueden no conseguir mantener pulsado y desplazar con exactitud, haciendo la función inoperable.
También afecta a quienes usan dispositivos de apoyo (pulsadores, trackballs, teclados adaptados o voz) cuando la interacción de arrastrar no es viable o es muy costosa.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<h2>Ordena las tareas</h2>
<p id="ayuda">Puedes reordenar con “Subir/Bajar” (sin arrastrar).</p>
<div id="estado" aria-live="polite"></div>
<ul id="tareas" aria-describedby="ayuda">
<li>
<span>Pagar factura</span>
<button type="button" class="up">Subir</button>
<button type="button" class="down">Bajar</button>
</li>
<li>
<span>Llamar al médico</span>
<button type="button" class="up">Subir</button>
<button type="button" class="down">Bajar</button>
</li>
<li>
<span>Comprar comida</span>
<button type="button" class="up">Subir</button>
<button type="button" class="down">Bajar</button>
</li>
</ul>
<script>
const ul = document.getElementById('tareas');
const estado = document.getElementById('estado');
ul.addEventListener('click', (e) => {
const li = e.target.closest('li');
if (!li) return;
if (e.target.classList.contains('up')) {
const prev = li.previousElementSibling;
if (prev) ul.insertBefore(li, prev);
estado.textContent = 'Elemento movido arriba.';
e.target.focus();
}
if (e.target.classList.contains('down')) {
const next = li.nextElementSibling;
if (next) ul.insertBefore(next, li);
estado.textContent = 'Elemento movido abajo.';
e.target.focus();
}
});
</script>
Explicación de la solución aplicada:
Esta es una alternativa operable con un único puntero (botones “Subir/Bajar”) para conseguir el mismo resultado que el arrastre: reordenar elementos.
Esto cumple el criterio porque ya no se exige un gesto preciso de arrastrar; la interacción se puede hacer con clic/toque (y además es compatible con teclado por ser botones nativos).
