Un área táctil es la zona que reacciona cuando tocas. Si es muy pequeña, la gente falla, toca lo que no era o se rinde. Afecta a quien tiene temblor, un pulgar grande o va en un bus con baches. El tamaño que cuenta es el área que reacciona, no el tamaño del ícono dibujado dentro.
Los números
- 24 por 24 píxeles CSS: el mínimo de WCAG 2.2 nivel AA (criterio 2.5.8, Tamaño mínimo del objetivo). Tiene excepciones, como que haya espacio suficiente alrededor de un objetivo pequeño, o un enlace dentro de una frase.
- 44 por 44: WCAG 2.5.5 (Tamaño del objetivo mejorado, nivel AAA) y las Human Interface Guidelines de Apple, que usan 44 puntos.
- 48 por 48: Material Design, que usa 48 dp, unos 9 mm en pantalla.
Cuentan los dos lados. Un botón de 56 por 40 falla un mínimo de 44, y también un botón de menú alto y angosto de 28 por 44.
Ícono pequeño, objetivo grande
El ícono visible puede seguir pequeño. Dale relleno al control para que su área táctil llegue al tamaño que necesitas, y el diseño no cambia:
.icon-button {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
}
.icon-button svg {
width: 20px;
height: 20px;
}Los enlaces de texto fuera de un párrafo necesitan el mismo cuidado. Una lista de enlaces sin relleno es una fila de objetivos de 20 px. Con display: block y padding-block: 12px en cada enlace, toda la fila se puede tocar.
Espacio entre objetivos
Un objetivo menor de 24 px puede pasar igual si un círculo de 24 px centrado en él no toca otro objetivo. Dos íconos de 16 px con 4 px entre ellos fallan, porque sus círculos se superponen. Los espacios generosos son la solución fácil, y además evitan que un resbalón toque lo de al lado.
Lista de revisión
- Mide el área táctil en el inspector del navegador, no el ícono en el archivo de diseño.
- Da a las barras de herramientas, filas de tabla y filas de lista una altura mínima de 44 o 48.
- Deja 8 px entre controles vecinos.
- Haz que la etiqueta sea parte del objetivo, para que una casilla o un botón de opción reaccione al tocar su texto.
- Prueba con tu pulgar en un teléfono real, con una sola mano.
Para practicar
Área táctil dibuja cinco pantallas con cada control en su área táctil real. Marca los que están bajo el mínimo, y luego mira los números reales y por qué fallan los traicioneros.