Principio 2/2.5 Modalidades de los input/2.5.8-A

2.5.8-A. Tamaño mínimo de interacción

2_Operable 2.5_Modalidades_de_entrada

• Nivel: AA*
• Versión: 2.2
• Principio: 2_Operable
• Pauta: 2.5_Modalidades_de_entrada
• Grupo: Interacción
• Subgrupo: Tamaño_del_objetivo

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

• Motriz – Barrera grave

Enunciado del criterio (Observatorio de Accesibilidad Web)

• Los elementos interactivos deben disponer de un área de interacción mínima de 24 x 24 píxeles CSS, salvo que:
  • la presentación esté definida por el agente de usuario y no modificada por el autor, o
  • el tamaño esté determinado por características esenciales del contenido.

Comprensión del criterio

Descripción resumida

Los elementos interactivos deben tener al menos 24x24 px CSS para poder pulsarlos sin errores, especialmente en pantallas táctiles o dispositivos de apoyo.

Objetivo

Facilitar la activación precisa de controles evitando selecciones accidentales, especialmente en usuarios con movilidad reducida o temblores.

Importancia de cumplir el criterio

Un área táctil insuficiente puede impedir o dificultar gravemente la interacción para usuarios con dificultades motrices o pulso poco preciso.

Referencias WCAG

• Understanding Success Criterion 2.5.8: Target Size (Minimum) — WCAG 2.2
• WCAG Quick Reference — 2.5.8
• WAI-ARIA Authoring Practices — Target Sizes
• Material Design / Apple HIG / IBM Carbon — Guidelines de tamaño mínimo táctil

Recursos de apoyo

• Patrones UI para aumentar área táctil
• Buenas prácticas de diseño móvil accesible

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

1. Paso 1. Identificar objetivos táctiles e interactivos.
2. Paso 2. Medir superficie (mín. 24×24 px CSS o área clicable equivalente).
3. Paso 3. Revisar espaciado si el tamaño directo no es suficiente.
4. Paso 4. Probar con zoom 200–400% y dispositivo móvil.
5. Paso 5. Comprobar excepciones (UI de sistema o tamaño esencial).

Resultado esperado

Todos los objetivos interactivos cumplen ≥ 24×24 px o cuentan con un área táctil equivalente ampliada.

Ejemplo

✅ Accesible: botón ≥ 24x24px

<button class="btn">OK</button>

<style>
.btn {
  min-width: 24px;
  min-height: 24px;
  padding: 6px 8px;
}
</style>

✅ Alternativa: hit-area ampliada

<button class="icon-btn" aria-label="Menú">
  <svg aria-hidden="true" width="16" height="16"></svg>
</button>

<style>
.icon-btn {
  width: 24px;
  height: 24px;
  padding: 4px;
}
</style>

Otras herramientas de evaluación

• Chrome DevTools → herramienta de medición
• Simulación móvil / responsive
• Pruebas con stylus / trackball / control por puntero único
• Zoom 200–400% en navegador

Comentarios

A continuación se muestran comentarios sobre el criterio 2.5.8-A. Tamaño mínimo de interacción

Loading comments...