Tamaño mínimo del objetivo táctil en WCAG: la regla de 24 × 24 px del criterio 2.5.8

Qué dice el criterio 2.5.8 sobre el tamaño del objetivo táctil

El W3C formula el objetivo con claridad: hacer que los controles sean más fáciles de activar. Se trata de garantizar que un objetivo pueda activarse con facilidad sin activar por accidente un objetivo adyacente. Las personas con limitaciones de destreza o dificultades de motricidad fina tienen problemas para activar con precisión objetivos pequeños cuando hay otros objetivos demasiado cerca.

El W3C cita expresamente los temblores de manos, la espasticidad y la cuadriplejia entre las discapacidades a las que responde este requisito. Algunas personas utilizan además dispositivos de entrada especializados en lugar de un ratón o un panel táctil, que normalmente ofrecen menos precisión que los dispositivos señaladores habituales. Cumplir el criterio también hace que las interfaces táctiles sean más fáciles de usar.

Un matiz importante: el criterio define un tamaño mínimo y, si no puede cumplirse, un espaciado mínimo. Por tanto, es posible tener objetivos muy pequeños y cumplir, siempre que ningún objetivo adyacente esté demasiado cerca. Aun así, el W3C recomienda como buena práctica alcanzar al menos el tamaño mínimo sea cual sea el espaciado, y considerar el criterio más estricto 2.5.5 «Tamaño del objetivo (mejorado)» para los enlaces y controles importantes.

Entre las personas que se benefician, sin limitarse a ellas:

• Personas que usan un dispositivo móvil cuya pantalla táctil es el modo principal de interacción
• Personas con problemas de movilidad, como temblores de manos, tanto si usan ratón como lápiz o pantalla táctil
• Personas expuestas a sacudidas, por ejemplo en el transporte público
• Personas que utilizan el dispositivo con una sola mano
• Personas con dedos grandes, o que manejan el dispositivo solo con una parte del dedo o con un nudillo

Cómo medir un objetivo de 24 × 24 píxeles CSS

Para que un objetivo mida «al menos 24 por 24 píxeles CSS», debe ser posible dibujar un cuadrado sólido de 24 por 24 píxeles CSS, alineado con los ejes horizontal y vertical, completamente dentro del objetivo. El objetivo puede estar inclinado; es el cuadrado el que debe permanecer alineado con la página. Cuidado con las esquinas redondeadas: en un botón pequeño pueden impedir que quepa ese cuadrado, y entonces el objetivo se considera de tamaño insuficiente.

El píxel CSS es la unidad canónica de medida en CSS. Es independiente de la densidad de la pantalla y distinto de los píxeles físicos. Además, el requisito no depende del factor de zoom: cuando el usuario amplía, el tamaño en píxeles CSS de los elementos no cambia. No puede alegar que un objetivo será suficientemente grande cuando el usuario haga zoom.

Algunas reglas de medición de la documentación del W3C conviene conocerlas antes de cualquier auditoría:

• Si dos objetivos se solapan, la zona solapada no debería contarse en el tamaño, salvo que ambos realicen la misma acción o abran la misma página.
• Un objetivo en el que se elige un valor según la posición (un control deslizante, un selector de color con degradado, una zona editable donde se coloca el cursor) cuenta como un solo objetivo.
• Los objetivos ocultos por un contenido mostrado tras una interacción o un script (la lista de sugerencias de un combobox, un diálogo modal, un banner de cookies, una encuesta) no están afectados mientras permanecen ocultos.
• En cambio, los objetivos de ese nuevo contenido mostrado encima sí deben cumplir el criterio.

La excepción de espaciado: el método del círculo de 24 px

Un objetivo de menos de 24 por 24 píxeles CSS es de tamaño insuficiente. Aun así puede cumplir gracias al espaciado: se centra un círculo imaginario de 24 píxeles CSS de diámetro sobre la caja delimitadora del objetivo, y ese círculo no debe cruzar otro objetivo ni el círculo de otro objetivo de tamaño insuficiente. En un objetivo rectangular, la caja delimitadora coincide con el propio objetivo. En una forma recortada, redondeada o en un SVG clicable complejo, primero hay que determinar la caja delimitadora y luego su centro, que en una forma cóncava puede quedar incluso fuera del objetivo.

El W3C explica que las pantallas táctiles y los agentes de usuario suelen tener heurísticas internas para identificar el enlace o control más cercano al punto de contacto, de modo que un espaciado suficiente puede ser tan eficaz como un objetivo más grande. Los ejemplos del W3C le ayudan a calibrar sus controles:

• Una fila de seis botones de icono de 24 × 24 px: cumple.
• Los mismos botones a 20 × 20 px con 4 px de separación: cumplen gracias a la excepción de espaciado.
• Los mismos botones de 20 × 20 px sin separación: no cumplen, porque los círculos se cruzan.
• Botones de solo 16 px de alto sin objetivos encima ni debajo: cumplen; dos filas apiladas con solo 1 px de separación: no cumplen.
• Elementos de menú de 24 px de alto (texto y relleno): cumplen; con 18 px de alto: no cumplen.
• Un objetivo pequeño de 16 × 16 px pegado a un objetivo grande, como una imagen enlazada: no cumple; añadir una separación de 4 px hace que cumpla.

Las otras cuatro excepciones: equivalente, en línea, agente de usuario, esencial

Además del espaciado, el criterio prevé cuatro excepciones. Cada una tiene un alcance preciso, por lo que conviene documentarla en la auditoría en lugar de invocarla por defecto.

Para la excepción «esencial», el W3C anima encarecidamente a los autores a ofrecer, en la medida de lo posible, una funcionalidad equivalente por otros medios.

• Equivalente: la función puede realizarse mediante otro control de la misma página que cumple el criterio.
• En línea: el objetivo está dentro de una frase, o su tamaño está limitado por la altura de línea del texto que no es objetivo. El motivo: la redistribución del texto según el tamaño de la ventana gráfica impide prever dónde pueden quedar los enlaces unos respecto de otros, y es más importante fijar una altura de línea legible. La altura de línea debería interpretarse en perpendicular al sentido del texto: en un idioma mostrado en vertical, es horizontal.
• Control del agente de usuario: el tamaño lo determina el agente de usuario (por ejemplo, el navegador) y el autor no lo ha modificado, como el calendario de un campo input type="date" o las barras de desplazamiento. Si modifica las dimensiones de una barra de desplazamiento, necesita un espaciado suficiente entre ella y el contenido.
• Esencial: una presentación concreta es esencial o está exigida legalmente para la información transmitida. Ejemplos del W3C: los marcadores de un mapa digital, una visualización de datos interactiva necesariamente densa o formularios en línea que una jurisdicción obliga legalmente a calcar de formularios en papel, lo que puede limitar el tamaño de los objetivos: la obligación legal de reproducir objetivos pequeños puede considerarse entonces esencial.

Corregir con CSS: la técnica suficiente C42

El W3C cita una técnica suficiente para este criterio: C42, que consiste en usar min-height y min-width en el contenedor del objetivo para garantizar un espaciado suficiente. El ejemplo siguiente aplica estas propiedades a una barra de iconos. Recuerde que el objetivo es la región de la pantalla que acepta la acción del puntero: si el contenedor no es clicable, sus dimensiones mínimas buscan asegurar el espaciado alrededor de un objetivo más pequeño, pero no agrandan el objetivo. Para agrandar realmente la zona activa, aplique min-width y min-height al propio elemento clicable (el botón o el enlace).

La documentación indica también que puede ser útil ofrecer una opción para aumentar la zona activa sin aumentar el tamaño visible del objetivo, o un mecanismo para controlar la densidad del diseño. Las necesidades varían: las personas con pérdida de campo visual pueden preferir un diseño más compacto con controles pequeños, mientras que otras personas con baja visión pueden preferir controles grandes.

/* Técnica C42: min-width / min-height en el contenedor
   del objetivo, para garantizar un espaciado suficiente
   alrededor de un botón más pequeño */
.toolbar li {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Variante: agrandar la propia zona activa
   dimensionando el elemento clicable */
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Lista de comprobación para auditar el tamaño del objetivo táctil

Para revisar el criterio en una página, siga estos pasos empezando por las zonas densas: barras de herramientas, paginación, menús, botones de cierre e iconos colocados sobre imágenes. Si trabaja con el referencial francés RGAA, consulte nuestras páginas sobre el RGAA 5 y sobre la diferencia entre RGAA y WCAG, y después realice una prueba gratuita de sus páginas y active una supervisión continua para detectar regresiones.

• Enumere los objetivos que se activan con puntero: enlaces, botones, campos, iconos clicables.
• En cada uno, compruebe que un cuadrado de 24 × 24 píxeles CSS alineado con los ejes cabe entero dentro del objetivo.
• En cada objetivo de tamaño insuficiente, centre un círculo de 24 px sobre su caja delimitadora y compruebe que no cruza otro objetivo ni otro círculo.
• Descarte los enlaces dentro de frases (excepción en línea) y los controles cuyo tamaño fija el agente de usuario (por ejemplo, el navegador) sin modificación del autor, como el calendario de un campo de fecha o las barras de desplazamiento (excepción del agente de usuario).
• Compruebe si la función de un objetivo pequeño está disponible mediante otro control conforme en la misma página.
• Revise también el contenido que aparece encima de la página: diálogos modales, banners de cookies, listas de sugerencias.

Preguntas frecuentes

Más sobre el tema en Conformly

• Guía completa del RGAA 5
• Diferencias entre RGAA y WCAG
• Escáner RGAA gratuito en línea

Fuentes

Este artículo se basa en las fuentes oficiales citadas al final de la página.

• W3C — Comprendre 2.5.8