Áreas táctiles y tipos de puntero: dimensionar controles para dedos y ratón

Qué es

Un objetivo del puntero (pointer target) es el área que reacciona a un clic o a un toque. El criterio de éxito 2.5.8 Target Size (Minimum) de WCAG 2.2, nivel AA, exige que ese objetivo mida al menos 24 por 24 píxeles CSS, con estas excepciones: espaciado (un objetivo más pequeño es aceptable si un círculo de 24 píxeles centrado en él no se cruza con otro objetivo ni con otro círculo de ese tipo), equivalente (la misma función está disponible mediante un objetivo de la página que sí cumple el tamaño), en línea (objetivos dentro de frases o limitados por la altura de línea del texto que los rodea), control del agente de usuario (controles que se muestran con su aspecto predeterminado y que el autor no ha estilizado) y esencial. El criterio anterior 2.5.5 Target Size (Enhanced), nivel AAA, pide 44 por 44 píxeles CSS con una lista de excepciones similar.

CSS puede saber con qué se está apuntando. La característica de medios pointer indica la precisión de la entrada principal: none, coarse (precisión limitada, como un dedo en una pantalla táctil) o fine (un dispositivo preciso, como un ratón); any-pointer abarca todas las entradas disponibles. La característica complementaria hover indica si la entrada principal puede hacer hover con comodidad.

Por qué importa

Los dedos son anchos e imprecisos, el temblor y la baja visión dificultan acertar en objetivos pequeños, y las barras de herramientas densas son donde más se producen toques errados. Los elementos que dependen solo de hover (menús que se abren al pasar el ratón, tooltips con información necesaria) son inaccesibles en una pantalla táctil.

Cómo aplicarlo

• Da a los controles interactivos una caja mínima de 24 por 24 píxeles CSS mediante min-width/min-height o padding, y apunta a un tamaño mayor para las acciones principales; los botones que solo tienen un icono suelen ser los que incumplen.
• Cuando los objetivos están en fila (paginación, iconos de una barra de herramientas), amplíalos o sepáralos para que los círculos de 24 píxeles no se solapen, usando gap en lugar de margin en el último elemento.
• Dentro de @media (pointer: coarse) aumenta el padding de controles, casillas de verificación y filas de listas, y ensancha el tirador de los deslizadores; con (pointer: fine) es aceptable un diseño más denso.
• No dependas nunca solo del hover: todo lo que se muestre con hover debe aparecer también con el foco y con el toque, y @media (hover: none) permite convertir un menú de hover en uno que se abre con un clic.
• Haz que toda la fila o tarjeta sea el objetivo cuando sea el área de toque evidente, sin dejar que los controles anidados se solapen con ella.

Trampas

Los píxeles CSS no son píxeles del dispositivo; el mínimo de 24 píxeles es independiente de la densidad de pantalla. La excepción en línea cubre los objetivos dentro de una frase o limitados por la altura de línea del texto circundante, no los iconos de una barra de herramientas o de una lista. Ampliar el área clicable con padding transparente altera el diseño; un pseudoelemento ::before con insets negativos amplía el área de impacto sin desplazar a los elementos vecinos. Los dispositivos que tienen tanto pantalla táctil como ratón informan solo del puntero principal; si importa cualquiera de los dos, consulta any-pointer.