¿Qué es un tap target?
Un tap target u objetivo táctil es el área activa que se debe pulsar para activar un botón, un enlace o cualquier control interactivo. Se pulsa con el dedo en pantalla táctil o con el cursor en escritorio.
Cuando el área es demasiado pequeña, los usuarios cometen errores de pulsación. Tocan el botón equivocado, fallan al primer intento o abandonan la interacción.
Esto afecta sobre todo a:
- Personas con temblor, baja precisión motora o dificultades de coordinación.
- Personas mayores con menor agudeza visual o reflejos.
- Cualquiera que use el móvil mientras camina, viaja en transporte público o lleva guantes.
Umbrales según el estándar
| Estándar | Umbral mínimo | Notas |
|---|---|---|
| WCAG 2.2 AA (2.5.8) | 24 × 24 px | Aprobado octubre 2023. Aplica a controles puntuales, no a texto en flujo. |
| WCAG 2.1 AAA (2.5.5) | 44 × 44 px | El más exigente. Lo cumplen botones primarios, CTAs y campos de formulario. |
| Apple Human Interface Guidelines | 44 × 44 pt | Aplica a iOS, iPadOS, watchOS. |
| Google Material Design | 48 × 48 dp (con padding alrededor) | Aplica a Android. |
| Microsoft Fluent Design | 40 × 40 px | Aplica a Windows. |
Los dp (Android) y pt (Apple) son unidades independientes de la densidad de pantalla. En una densidad estándar (mdpi/1×) coinciden numéricamente con los px CSS.
Excepciones de WCAG
WCAG 2.5.5 (AAA) y 2.5.8 (AA) reconocen excepciones razonables:
- Inline targets dentro de un bloque de texto fluido. Un enlace dentro de un párrafo no necesita 44 px de alto.
- User agent control: controles propios del navegador, como la barra de scroll.
- Essential: cuando una presentación específica del control es esencial para la información que transmite, como un teclado QWERTY virtual.
- Equivalente: cuando otro control del tamaño correcto hace lo mismo.
Implicaciones para diseño y CSS
Para garantizar 44×44 px en un botón con texto pequeño, hay que añadir padding al <button>/<a>. No conviene modificar el tamaño de fuente. Ejemplo Tailwind:
<a class="inline-flex items-center px-4 py-3 min-h-[44px]" href="...">Acción</a>Cómo lo aplicamos en smedialab.es
Estos elementos cumplen 44×44 px:
- CTAs principales y botones del header.
- Botón de WhatsApp.
- Campos del formulario de contacto.
- Enlaces del mega-menú.
Algunos enlaces densos del bloque “Trabajamos en los 31 municipios” del footer pueden quedar por debajo en móviles muy pequeños. Lo declaramos honestamente como AAA parcial, pero conservan separación suficiente para evitar activaciones accidentales.
En proyectos de diseño web auditamos tap target con DevTools antes de pasar a desarrollo. Usamos el modo “Show area names” del Inspector.