¿Qué es un tap target?
Un tap target o objetivo táctil es el área activa que el usuario debe pulsar (con el dedo en pantalla táctil o con el cursor en escritorio) para activar un botón, un enlace o cualquier control interactivo. Cuando el área es demasiado pequeña, los usuarios cometen errores de pulsación: pulsan el botón equivocado, fallan al primer intento o renuncian a la interacción.
Esto afecta especialmente a:
- Personas con temblor, baja precisión motora o dificultades de coordinación.
- Personas mayores con menor agudeza visual o reflejos.
- Cualquier persona usando un 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, p. ej. la barra de scroll).
- Essential (cuando una presentación específica del control es esencial para la información que transmite, p. ej. un teclado QWERTY virtual).
- Equivalente (cuando hay otro control del tamaño correcto que 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> en lugar de 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
CTAs principales, botones del header, botón de WhatsApp, campos del formulario de contacto y enlaces del mega-menú cumplen 44×44 px. Algunos enlaces densos del bloque “Trabajamos en los 31 municipios” del footer pueden quedar por debajo en móviles muy pequeños, lo que 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 (modo “Show area names” del Inspector) antes de pasar a desarrollo.