¿Qué es el área táctil?
El área táctil es la zona de la pantalla que responde al toque de un dedo. No coincide necesariamente con el tamaño visual del elemento: un botón pequeño puede tener un área táctil grande si tiene suficiente padding, y un elemento grande puede tener un área táctil reducida si el código no lo gestiona correctamente.
El criterio WCAG 2.5.8 (nuevo en la versión 2.2) exige que cada elemento interactivo tenga un área táctil mínima de 24×24 píxeles CSS, o bien que el espacio libre a su alrededor compense hasta cubrir este tamaño. Axe-core lo comprueba con la regla target-size.
¿Por qué causa problemas de accesibilidad?
Un elemento interactivo demasiado pequeño obliga al usuario a ser muy preciso con el dedo, lo que genera errores de toque accidentales y frustración. Los elementos afectados suelen ser iconos de redes sociales, botones de cierre de modales, controles de carruseles o iconos de acción en listados.
Los usuarios más afectados son personas con temblor o movilidad reducida en las manos, personas mayores y cualquier usuario en movimiento. En la práctica, afecta a todo el mundo que navega desde un dispositivo móvil.
¿Por qué aparece este error?
El error aparece habitualmente cuando los elementos interactivos se diseñan pensando en la apariencia visual y no en la usabilidad táctil. Iconos pequeños sin padding, botones de texto compactos o controles generados automáticamente por plugins son las causas más frecuentes.
En WordPress, los constructores de páginas como Divi pueden generar botones e iconos que visualmente parecen correctos pero que no alcanzan el mínimo táctil requerido, especialmente en versiones móviles.
Cómo detectar áreas táctiles insuficientes
La herramienta de autoevaluación de webaccessible.cat detecta automáticamente los elementos interactivos que no alcanzan el mínimo de 24×24 píxeles, indicando qué elementos están afectados y qué tamaño tienen.
También puedes revisarlo en las DevTools del navegador: activa la vista móvil, selecciona un elemento interactivo y comprueba sus dimensiones en el panel de inspección. El tamaño relevante es el área total incluyendo el padding, no el tamaño del texto o el icono.
Cómo corregirlo
La solución más habitual es aumentar el padding del elemento, sin necesidad de cambiar su tamaño visual:
/* Aumentar el área táctil sin cambiar la apariencia */
.boton-pequeno {
padding: 12px 16px;
min-height: 24px;
min-width: 24px;
}Si el problema está en iconos de redes sociales o botones de acción generados por un plugin, hay que revisar las opciones de estilo del plugin o sobreescribir el CSS. Si el problema está en elementos de Divi, puedes ajustar el padding desde el constructor de páginas sin tocar código.
Excepciones
No todos los elementos pequeños son un error. Quedan exentos de esta regla:
- Elementos en línea dentro de un texto, como un enlace dentro de un párrafo.
- Elementos cuyo tamaño viene determinado por el navegador y no se puede modificar.
- Elementos esenciales que por su naturaleza requieren un tamaño concreto.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.