Target Size, el gran ignorado de la accesibilidad.

Cuando hablamos de accesibilidad web, solemos pensar en contrastes de color, subtítulos o navegación por teclado. Pero hay un aspecto igual de importante y a menudo olvidado: el tamaño del objetivo interactivo, o lo que en las Pautas de Accesibilidad al Contenido Web (WCAG) se conoce como Target Size.

Este criterio se refiere al tamaño mínimo que deben tener los elementos interactivos (botones, enlaces, iconos, controles táctiles) para que todas las personas (incluidas aquellas con limitaciones motrices o visuales) puedan utilizarlos sin dificultad.

¿Qué es el Target Size?

El Target Size (tamaño del objetivo) define lo grande que debe ser la superficie clicable o tocable de un elemento interactivo.

Un objetivo demasiado pequeño puede provocar errores al interactuar, especialmente para:

• Personas con temblores o dificultades motrices.
• Usuarios de pantallas táctiles (móviles, tablets…).
• Personas con baja visión o que amplían la pantalla.

Por tanto, un buen tamaño de objetivo mejora la usabilidad para todo el mundo, no solo para quienes dependen de tecnologías de asistencia.

WCAG 2.2: criterio 2.5.8: Target Size (Minimum) (Nivel AA)

En WCAG 2.2, el criterio 2.5.8 Target Size (Minimum) establece lo siguiente:

Los objetivos deben tener, al menos, 24 × 24 píxeles CSS de tamaño, excepto cuando:

• El objetivo está dentro de una frase o bloque de texto (por ejemplo, enlaces dentro de un párrafo).
• Existe otro método alternativo para lograr la misma función.
• El tamaño del objetivo está determinado por el agente de usuario (como los controles del navegador).
• El espacio entre objetivos es suficiente para evitar activaciones accidentales.

En otras palabras, cada botón o enlace debe tener un área interactiva mínima de 24×24 píxeles, ya sea por su propio tamaño o por el espacio libre alrededor.

Nota: la excepción para enlaces dentro de texto solo aplica si el texto es legible y los enlaces se pueden distinguir y seleccionar fácilmente.

Ejemplo 1: iconos pequeños con área ampliada

Un ícono de “cerrar” de 16×16 px puede parecer demasiado pequeño, pero puede cumplir la norma si su área clicable se amplía a 24×24 px mediante padding o un contenedor invisible.

.close-btn {
  width: 16px;
  height: 16px;
  padding: 4px;
}

✅ Cumple el criterio AA, aunque visualmente el icono siga siendo pequeño.

Ejemplo 2: enlaces de texto demasiado juntos

Visita nuestro <a href="#">blog</a>, <a href="#">foro</a> y <a href="#">soporte</a>.

En pantallas táctiles, estos enlaces tan próximos pueden provocar errores al pulsar.

Solución: añadir separación o convertirlos en botones con mayor área táctil.

  <a class="link-btn" href="#">Blog</a>
  <a class="link-btn" href="#">Foro</a>
  <a class="link-btn" href="#">Soporte</a>

.link-btn {
  display: inline-block;
  padding: 6px 10px;
  margin-right: 8px;
  border-radius: 6px;
}

Esto reduce errores de toque y mejora la experiencia en móviles.

WCAG 2.2: Criterio 2.5.5: Target Size (Nivel AAA)

Para el nivel AAA, el estándar es más exigente: los objetivos deben tener, al menos, 44 × 44 píxeles CSS.

Este criterio ya existía desde WCAG 2.1 y se mantiene igual en WCAG 2.2. Garantiza una interacción más cómoda y tolerante al error, especialmente útil en interfaces táctiles o productos de uso público (banca, salud, administración, etc.).

Ejemplo 3: botones de formulario

Muchos formularios presentan botones demasiado pequeños o pegados. Un botón de envío de 32×18 px puede ser difícil de pulsar correctamente.

✅ Una buena práctica sería diseñarlo así:

button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
}

Esto cumple el nivel AAA y, además, mejora la estética y la usabilidad general.

Buenas prácticas para cumplir este criterio

1. Aumenta el área clicable: usa relleno (padding) en lugar de agrandar solo el icono.
2. Deja espacio entre elementos interactivos: no hay una medida exacta en las WCAG, pero una separación mínima de 8 píxeles suele ser efectiva.
3. Evita agrupar enlaces o iconos demasiado juntos, especialmente en menús móviles.
4. Prueba con usuarios reales o simulaciones táctiles: lo que funciona con el ratón puede fallar al tocar con el dedo.
5. Usa unidades relativas (em, rem) para mantener la escalabilidad al aplicar zoom.
6. Verifica en distintos dispositivos: el tamaño visual varía entre pantallas de alta densidad (retina) y pantallas estándar.

Consejo: herramientas como Axe DevTools, Lighthouse o Accessibility Insights permiten visualizar y medir las áreas clicables directamente en el navegador. Además, he creado para este post una extensión para Chrome/Firefox que comento a continuación.

Target Size Analyzer

Debido a la necesidad que me surgió en un proyecto en el que he estado trabajando en el apartado de accesibilidad, necesitaba resaltar por pantalla de forma rápida y clara los elementos que no cumplían con estos criterios, por lo que he creado una extensión de navegador para poder realizar este cometido:

Con esta extensión instalada, no tienes más que ejecutarla dentro de la página a analizar y clicar en “Analyze”, pudiendo indicar tanto el nivel AA como AAA e, incluso, seleccionar elementos o atributos específicos.

Puedes encontrar esta app para Chrome y para Firefox en los enlaces que os dejo a continuación. Si tenéis curiosidad por cómo desarrollar extensiones, os invito a leer este post sobre cómo crear tus propias extensiones de navegador.

• Target Size Analyzer en Chrome Web Store
• Target Size Analyzer en Firefox addons
• Código fuente en GitHub

Beneficios más allá de la accesibilidad

Cumplir con el criterio de tamaño de objetivo no solo ayuda a las personas con discapacidades:

• Mejora la experiencia móvil y reduce errores de toque.
• Incrementa la tasa de conversión al facilitar la interacción.
• Reduce la frustración en todas las edades y habilidades.
• Aporta consistencia visual y jerarquía clara en los elementos interactivos.

En resumen: lo que es más accesible, también es más usable.

Conclusión

El tamaño del objetivo puede parecer un detalle menor, pero es clave para lograr una interacción inclusiva, cómoda y sin errores. Adoptar el criterio 2.5.8 (AA) o, aún mejor, 2.5.5 (AAA) garantiza una interfaz que respeta la diversidad de usuarios y contextos de uso.

La accesibilidad no limita el diseño; lo hace más humano.