Tamaño del área de toque

El tamaño del área de toque es la dimensión operativa de cualquier elemento que un usuario puede tocar o hacer clic. WCAG establece dos umbrales: un mínimo AAA de 44×44 píxeles CSS (desde WCAG 2.1) y un mínimo AA de 24×24 píxeles CSS (nuevo en WCAG 2.2). El criterio existe porque las discapacidades motoras —e incluso la imprecisión ordinaria en una pantalla pequeña— hacen que los objetivos diminutos sean imposibles de usar.

Los dos criterios WCAG

• 2.5.5 Target Size (Enhanced) — Nivel AAA — los objetivos de entrada de puntero deben tener al menos 44×44 píxeles CSS. Regla de larga trayectoria; difícil de cumplir en todo el sitio.
• 2.5.8 Target Size (Minimum) — Nivel AA, nuevo en WCAG 2.2 — los objetivos de entrada de puntero deben tener al menos 24×24 píxeles CSS. El umbral práctico de conformidad.

Un objetivo que cumple el umbral AAA de 44×44 también cumple el umbral AA de 24×24.

Lo que la regla exige realmente

Los números se refieren al área del objetivo, no solo al icono visible. Las Directrices de Interfaz Humana de Apple y Material Design de Google establecen de manera predeterminada tamaños de objetivo de 44 pt / 48 dp por la misma razón: existe evidencia ergonómica real que lo respalda.

Un patrón habitual: un botón con icono dibujado como SVG de 16×16, pero con relleno que lleva el área clicable a 44×44. Eso cumple la regla. El icono visible es pequeño; el objetivo es el icono visible más el área de relleno que lo rodea.

Excepciones

El criterio 2.5.8 (el criterio AA) tiene excepciones explícitas:

• Excepción por espaciado. Si un objetivo tiene al menos 24×24 o está rodeado de suficiente espacio en blanco de modo que ningún otro objetivo se encuentre a menos de 24 píxeles CSS, se considera conforme. Esto protege los diseños en línea densos (como los enlaces de texto en el cuerpo del artículo) que tienen áreas de objetivo pequeñas pero están suficientemente separados como para no tocar accidentalmente un elemento vecino.
• Control equivalente en otro lugar. Un objetivo pequeño es admisible si la misma función está disponible mediante otro control más grande en la misma página.
• Objetivos en línea. Los enlaces dentro del texto corrido están exentos: el texto del cuerpo no debería rediseñarse para respetar una regla de 24 píxeles por enlace.
• Controlados por el agente de usuario. Los controles predeterminados del navegador están exentos.
• Esenciales. Cuando el tamaño es esencial para la función (por ejemplo, una cuadrícula CAPTCHA).

Lo que esto afecta en la práctica

Tres fallos habituales en producción:

• Botones de navegación solo con icono dimensionados a 28×28. Incumple 2.5.8 salvo que estén rodeados de suficiente espacio en blanco, que la mayoría de las barras de navegación densas no tienen.
• Listas de casillas de verificación muy juntas. Casillas dibujadas en 16×16 sin relleno, alineadas verticalmente sin espaciado. Tanto el objetivo como el espaciado están por debajo del umbral exigido.
• Flechas «anterior/siguiente» de carruseles móviles. Con frecuencia se dibujan como chevrones de 32 píxeles con 4 píxeles de relleno. Incumple 2.5.8.

La auditoría manual más rápida

Abrir las herramientas de desarrollo en cualquier ventana gráfica emulando un dispositivo móvil. Inspeccionar cada elemento interactivo. Anotar la caja delimitadora. Cualquier elemento por debajo de 24 píxeles CSS en alguna de sus dimensiones, con objetivos adyacentes a menos de 24 píxeles CSS, incumple 2.5.8.

La mayoría de los equipos adoptan un token de diseño de tamaño de objetivo en todos sus componentes: cada elemento interactivo recibe al menos un área de toque de 44×44, independientemente de su tamaño visible. Es la forma más económica de convertir esta regla en algo que nunca sea un problema.