WCAG 2.5.8: Tamaño del objetivo (mínimo)

Qué significa esta regla

WCAG 2.5.8 Tamaño del objetivo (mínimo) es un criterio de éxito de nivel AA introducido en WCAG 2.2. Establece que el tamaño del objetivo para las entradas de puntero debe ser de al menos 24×24 píxeles CSS, con una excepción importante: si el propio objetivo es más pequeño que 24×24 píxeles CSS, entonces debe haber suficiente espacio de separación a su alrededor de modo que el área total —incluido ese espacio— cumpla el umbral de 24×24 en todas las direcciones. En otras palabras, el cuadro delimitador del objetivo más cualquier espacio en blanco adyacente libre de otros objetivos debe alcanzar colectivamente 24 píxeles CSS en sentido horizontal y 24 píxeles CSS en sentido vertical.

El criterio se aplica a cualquier elemento que pueda recibir un evento de puntero: enlaces (<a>), botones (<button>), casillas de verificación, botones de opción, controles select, deslizadores, widgets personalizados con listeners de eventos de puntero y cualquier elemento al que se le haya asignado un rol ARIA que implique interactividad. No se aplica a elementos no interactivos como imágenes decorativas o texto estático, incluso si son grandes.

Un objetivo cumple este criterio cuando se cumple al menos una de las siguientes condiciones:

• El tamaño renderizado del objetivo es de al menos 24×24 píxeles CSS en ambas dimensiones.
• El objetivo es más pequeño que 24 píxeles CSS en una o ambas dimensiones, pero la separación entre el borde del objetivo y el elemento interactivo adyacente más cercano es lo suficientemente grande como para que el área combinada objetivo más separación sea de al menos 24×24 píxeles CSS.
• El objetivo es un elemento en línea dentro de una frase o bloque de texto, lo cual se excluye explícitamente porque reajustar el flujo de estos objetivos interrumpiría la lectura.
• El tamaño visual del objetivo está determinado por completo por la hoja de estilos predeterminada del agente de usuario del navegador y la persona autora no lo ha modificado; esta es la excepción de control nativo.
• Existe una presentación no interactiva de la misma información y el objetivo pequeño es simplemente una alternativa, no el único medio de activación.

Un objetivo no cumple cuando es más pequeño que 24×24 píxeles CSS y no hay suficiente espacio de separación para compensarlo, y ninguna de las excepciones anteriores aplica. Fallos habituales en el mundo real incluyen pequeños botones solo de icono (como un icono de cierre de 16×16 en un modal), enlaces de navegación muy juntos con un relleno mínimo y filas de iconos para compartir en redes sociales donde cada icono se renderiza a 20×20 píxeles con solo 2px de margen entre ellos.

Vale la pena señalar que WCAG 2.5.8 es un requisito mínimo. El criterio AAA relacionado 2.5.5 Tamaño del objetivo (mejorado) exige al menos 44×44 píxeles CSS sin excepción de espacio de separación, y muchas guías de usabilidad recomiendan 44–48 píxeles CSS como un objetivo táctil cómodo. Cumplir 2.5.8 es el suelo, no el techo.

Por qué es importante

Las discapacidades motoras afectan la precisión del puntero de una gran variedad de maneras. Las personas con enfermedad de Parkinson, temblor esencial, parálisis cerebral, esclerosis múltiple, hemiplejia relacionada con un accidente cerebrovascular o lesiones por esfuerzo repetitivo pueden ser incapaces de situar un puntero de forma fiable sobre un objetivo pequeño. Las personas mayores también experimentan un declive natural en el control motor fino: aproximadamente el 15% de las personas mayores de 65 años reportan una dificultad significativa para usar un ratón o una pantalla táctil. Más allá de las condiciones clínicas, incluso las personas con discapacidad situacional —alguien que sostiene un smartphone con una mano en un autobús en movimiento, o alguien cuyo dedo es grande en relación con una pantalla de teléfono pequeña— tienen dificultades con objetivos diminutos.

Según la Organización Mundial de la Salud, más de 1,3 mil millones de personas en todo el mundo viven con algún tipo de discapacidad, y la discapacidad motora se encuentra entre las categorías más comunes. Cuando los elementos interactivos son demasiado pequeños o están demasiado juntos, estas personas experimentan activaciones accidentales, toques fallidos y errores repetidos que hacen que un sitio sea prácticamente inutilizable. La frustración se agrava en los dispositivos táctiles donde no hay estado hover que confirme la posición del cursor antes de hacer clic.

Consideremos un escenario concreto: un sitio turco de comercio electrónico que vende productos electrónicos muestra una fila de cinco iconos para compartir en redes sociales en la parte superior de cada página de producto, cada uno de 18×18 píxeles con 3px de separación entre ellos. Una persona usuaria con temblor esencial que intenta compartir un producto en WhatsApp toca repetidamente el icono equivocado, activando compartidos no deseados en Facebook. No tiene forma de deshacer rápidamente estos compartidos y la tarea se vuelve tan propensa a errores que la abandona por completo. Aumentar cada icono a 24×24 píxeles CSS, o añadir relleno para que el área clicable alcance 24×24, resolvería el problema sin cambiar significativamente el diseño visual.

Más allá de la accesibilidad, un tamaño de objetivo adecuado se correlaciona con mayores tasas de conversión, menores tasas de rebote y mejores puntuaciones de Core Web Vitals relacionadas con la preparación para la interacción. La indexación mobile-first por parte de los motores de búsqueda también favorece las páginas que ofrecen una buena usabilidad táctil, lo que convierte el tamaño de los objetivos en un factor que cruza accesibilidad y SEO.

Reglas relacionadas de Axe-core

• target-size (experimental): Esta regla comprueba si los elementos interactivos tienen un tamaño renderizado de al menos 24×24 píxeles CSS o, para elementos más pequeños, si existe suficiente espacio de separación para que el área total alcanzable cumpla el umbral. La regla consulta las dimensiones calculadas y los rectángulos delimitadores de los elementos enfocables e interactivos con puntero y marca aquellos que no superan la prueba de tamaño o separación. Dado que actualmente está marcada como experimental, no se incluye en el conjunto de reglas predeterminado de axe-core y debe habilitarse explícitamente con runOnly: { type: 'tag', values: ['wcag22aa', 'experimental'] } o activando las reglas experimentales en axe DevTools. La regla puede producir falsos positivos para enlaces de texto en línea y controles nativos que los navegadores dimensionan de forma diferente entre plataformas, por lo que siempre se recomienda una revisión manual después de un escaneo automatizado. No puede detectar de forma fiable los cumplimientos basados en el espacio de separación cuando intervienen diseños CSS complejos, transformaciones o contextos de apilamiento z-index superpuestos, razón por la cual la inspección manual de los estilos calculados en DevTools sigue siendo esencial.

Dado que el tamaño del objetivo depende del renderizado visual, el CSS calculado, las dimensiones del viewport y la proximidad de elementos interactivos vecinos, las herramientas automatizadas pueden señalar fallos evidentes pero no pueden sustituir el juicio humano. Una herramienta puede medir el cuadro delimitador de un botón, pero determinar si el espacio de separación entre dos objetivos adyacentes está realmente libre de otros elementos interactivos —especialmente en interfaces dinámicas o impulsadas por JavaScript— requiere verificación manual.

Cómo hacer las pruebas

1. Escaneo automatizado con axe DevTools: Instala la extensión de navegador axe DevTools. Abre la página que se va a probar. En el panel de axe DevTools, habilita las reglas experimentales antes de ejecutar el escaneo (busca el filtro de etiquetas de reglas y añade experimental). Una vez completado el escaneo, filtra los resultados por el ID de regla target-size. Para cada elemento marcado, toma nota de las dimensiones reportadas. Verifica el hallazgo manualmente antes de registrarlo como un fallo confirmado, ya que las reglas experimentales tienen una tasa más alta de falsos positivos.
2. Escaneo automatizado con Lighthouse: Ejecuta una auditoría de accesibilidad de Lighthouse en Chrome DevTools o mediante la CLI. Lighthouse incluye una auditoría de objetivos táctiles que comprueba si hay objetivos más pequeños que 48×48 píxeles CSS con espacio de separación insuficiente; ten en cuenta que esto utiliza un umbral más estricto que WCAG 2.5.8, por lo que los fallos de Lighthouse son un superconjunto de los fallos de WCAG. Revisa los elementos marcados en el informe y contrástalos con el umbral de 24×24 de WCAG para determinar cuáles constituyen fallos reales de nivel AA frente a recomendaciones de buenas prácticas.
3. Medición manual con las DevTools del navegador: Abre DevTools e inspecciona cada elemento interactivo. En el panel Computed, comprueba width y height. Si alguna de las dos es inferior a 24px, cambia a la vista del modelo de caja (Box Model) y comprueba el padding. Si el relleno lleva el objetivo a 24×24, cumple. Si no, mide la separación con el elemento interactivo adyacente más cercano usando el rectángulo delimitador del elemento: ejecuta document.querySelector('your-selector').getBoundingClientRect() en la consola y compara las coordenadas de los elementos vecinos. Si la separación combinada en cada dimensión lleva el área alcanzable efectiva a 24px, cumple.
4. Simulación táctil: En Chrome DevTools, habilita la emulación de dispositivos y cambia a un perfil de dispositivo optimizado para táctil. Intenta tocar cada elemento interactivo pequeño. Anota cualquier caso en el que sea difícil activar el elemento deseado o en el que se activen accidentalmente elementos adyacentes.
5. Pruebas con teclado y lector de pantalla (para contexto): Aunque WCAG 2.5.8 es específicamente un criterio para puntero, confirmar que los objetivos pequeños también tienen indicadores de foco visibles y son alcanzables mediante teclado ayuda a identificar problemas compuestos. Usa NVDA con Firefox o JAWS con Chrome para navegar por los elementos interactivos y confirmar que son alcanzables y activables independientemente de su tamaño.
6. Pruebas en dispositivos reales: Haz pruebas en un dispositivo móvil físico —idealmente tanto en un Android de pantalla grande como en un dispositivo iOS más pequeño— para confirmar que los objetivos que cumplen en escritorio también cumplen en tamaños de viewport móviles, ya que la densidad de píxeles CSS y el comportamiento de zoom pueden afectar la percepción del tamaño del objetivo.

Cómo corregir

Botón pequeño solo de icono — Incorrecto

<!-- El botón de cierre tiene solo 16x16 píxeles CSS, sin padding, adyacente a otros controles -->
<button class='close-btn' aria-label='Close dialog'>
  <svg width='16' height='16' aria-hidden='true'></svg>
</button>

<style>
  .close-btn {
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
</style>

Botón pequeño solo de icono — Correcto

<!-- Añadir padding aumenta el área interactiva a 24x24 píxeles CSS
     mientras el icono visual sigue siendo de 16x16. min-width/min-height
     garantiza que el objetivo cumpla el umbral de WCAG 2.5.8. -->
<button class='close-btn' aria-label='Close dialog'>
  <svg width='16' height='16' aria-hidden='true'></svg>
</button>

<style>
  .close-btn {
    min-width: 24px;
    min-height: 24px;
    padding: 4px;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
</style>

Enlaces de navegación muy juntos — Incorrecto

<!-- Cada enlace se renderiza con aproximadamente 20px de alto y 1px de margen,
     dejando un espacio de separación insuficiente entre objetivos -->
<nav aria-label='Main navigation'>
  <ul class='nav-list'>
    <li><a href='/about'>About</a></li>
    <li><a href='/services'>Services</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>

<style>
  .nav-list li { margin: 1px 0; }
  .nav-list a { font-size: 12px; line-height: 1.4; display: block; }
</style>

Enlaces de navegación muy juntos — Correcto

<!-- El padding en cada enlace garantiza que el área del objetivo tenga al menos 24px de alto.
     El espacio entre elementos ahora es lo suficientemente grande para cumplir la regla de separación
     incluso si el texto en sí es más pequeño que 24px. -->
<nav aria-label='Main navigation'>
  <ul class='nav-list'>
    <li><a href='/about'>About</a></li>
    <li><a href='/services'>Services</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>

<style>
  .nav-list { list-style: none; padding: 0; margin: 0; }
  .nav-list a {
    display: block;
    padding: 6px 8px; /* el padding vertical lleva la altura del bloque a >= 24px */
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
  }
</style>

Casilla de verificación con área de impacto diminuta — Incorrecto

<!-- La casilla de verificación predeterminada es visualmente de 13px en muchos navegadores y no tiene
     una etiqueta asociada que proporcione un área de objetivo adicional -->
<input type='checkbox' id='agree'>
<span>I agree to the terms</span>

Casilla de verificación con etiqueta asociada — Correcto

<!-- Envolver el input en una <label> hace que todo el texto de la etiqueta sea también
     un objetivo de puntero válido. La line-height y el padding de la etiqueta garantizan
     que el área de impacto combinada supere fácilmente los 24x24 píxeles CSS.
     Al propio input se le da min-width/min-height como medida de respaldo. -->
<label class='checkbox-label'>
  <input type='checkbox' id='agree' class='checkbox-input'>
  I agree to the terms
</label>

<style>
  .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    min-height: 24px;
  }
  .checkbox-input {
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
  }
</style>

Fila de iconos para compartir en redes sociales — Incorrecto

<!-- Cada icono es de 18x18px con solo 2px de separación; el área
     alcanzable combinada para cada icono es de solo 20px, por debajo del umbral de 24px -->
<div class='share-row'>
  <a href='#' aria-label='Share on Twitter'>
    <img src='twitter.svg' width='18' height='18' alt=''>
  </a>
  <a href='#' aria-label='Share on Facebook'>
    <img src='facebook.svg' width='18' height='18' alt=''>
  </a>
</div>

<style>
  .share-row { display: flex; gap: 2px; }
  .share-row a { display: inline-block; line-height: 1; }
</style>

Fila de iconos para compartir en redes sociales — Correcto

<!-- Cada enlace ahora tiene min-width y min-height de 24px mediante padding,
     y la separación entre enlaces es de al menos 3px, por lo que la regla de separación
     se cumple de forma independiente incluso sin el padding. -->
<div class='share-row'>
  <a href='#' class='share-link' aria-label='Share on Twitter'>
    <img src='twitter.svg' width='18' height='18' alt=''>
  </a>
  <a href='#' class='share-link' aria-label='Share on Facebook'>
    <img src='facebook.svg' width='18' height='18' alt=''>
  </a>
</div>

<style>
  .share-row { display: flex; gap: 6px; }
  .share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 3px;
  }
</style>

Errores comunes

• Establecer width y height en el icono dentro de un botón en lugar de en el propio botón: Las personas desarrolladoras a menudo limitan el SVG o la imagen a 16–20px pero olvidan que el elemento <button> necesita min-width: 24px; min-height: 24px y un padding adecuado para crear un objetivo táctil suficiente.
• Eliminar el padding predeterminado del navegador de botones e inputs con padding: 0 o un reset global: Los resets de CSS que ponen a cero el padding de los elementos de formulario eliminan el margen de seguridad que mantiene los controles nativos en un tamaño utilizable. Vuelve a añadir siempre un padding explícito después de un reset.
• Confiar solo en line-height para aumentar la altura del enlace sin display: block o display: inline-block: Los elementos en línea no responden a height ni al padding vertical de la misma manera que los elementos de bloque, por lo que un enlace puede parecer visualmente más alto mientras que su cuadro delimitador clicable sigue siendo pequeño.
• Usar pointer-events: none en un contenedor y adjuntar los manejadores de clic a un elemento interno diminuto: Esto anula cualquier padding o tamaño mínimo aplicado al contenedor, reduciendo el objetivo efectivo al tamaño renderizado del elemento interno.
• Aplicar overflow: hidden a un contenedor de botón que recorta el padding del botón: El área visual de clic se recorta a los límites del contenedor, haciendo que el objetivo efectivo sea más pequeño de lo que sugieren las propias dimensiones del botón.
• Olvidar tener en cuenta las transformaciones CSS como scale(): Un botón reducido visualmente mediante transform: scale(0.7) sigue teniendo su cuadro delimitador original para los eventos de puntero en la mayoría de los navegadores, pero este comportamiento es inconsistente y poco fiable; dimensiona siempre los objetivos en su escala final renderizada.
• Suponer que una <label> grande compensa un <input> diminuto cuando la etiqueta y el input no están asociados de forma programática: Si la <label> no usa for que coincida con el id del input, o si el input no está envuelto dentro de la etiqueta, hacer clic en el texto de la etiqueta no activa el input, por lo que solo el área de objetivo pequeña del propio input es funcional.
• No probar en los tamaños de viewport en los que los objetivos se renderizan realmente: Un botón que mide 32×32 píxeles CSS en escritorio puede renderizarse a 22×22 píxeles CSS en un viewport móvil estrecho debido a la escala fluida o a unidades relativas al viewport (vw, vmin), creando un fallo que solo aparece en móvil.
• Tratar la excepción de WCAG 2.5.8 para enlaces de texto en línea de forma demasiado amplia: La excepción se aplica solo a enlaces que son genuinamente en línea dentro de un fragmento de texto (por ejemplo, un hipervínculo dentro de un párrafo). Los enlaces independientes con estilo de texto —como un enlace de "Forgot password?" debajo de un formulario— no son enlaces en línea y deben cumplir el umbral de 24×24.
• No auditar widgets de terceros y componentes incrustados: Los banners de consentimiento de cookies, widgets de chat y superposiciones de analítica incluyen con frecuencia botones diminutos (aceptar, cerrar, minimizar) inyectados por scripts externos. Estos siguen formando parte de la postura de accesibilidad de la página y deben cumplir con WCAG 2.5.8 incluso si el código no se ha desarrollado internamente.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial 2025/10 de Turquía, publicada en el Boletín Oficial n.º 32933 el 21 de junio de 2025, establece requisitos de accesibilidad vinculantes para una amplia gama de proveedores de servicios digitales que operan en Turquía. La Circular hace referencia explícita a WCAG 2.2 como estándar técnico, y la conformidad de nivel AA es necesaria para poder optar al Erişilebilirlik Logosu (Logotipo de Accesibilidad) emitido por el Ministerio de Familia y Servicios Sociales (Aile ve Sosyal Hizmetler Bakanlığı). Dado que WCAG 2.5.8 es un criterio de nivel AA en WCAG 2.2, entra directamente en el ámbito de este marco obligatorio.

Los tipos de entidades cubiertas por la Circular incluyen instituciones públicas y organismos gubernamentales a nivel central y local, bancos y empresas de servicios financieros, hospitales y proveedores de atención sanitaria privados, operadores de telecomunicaciones con 200,000 o más abonados, plataformas de comercio electrónico, agencias de viajes, empresas de transporte privadas y escuelas privadas autorizadas por el Ministerio de Educación Nacional (Milli Eğitim Bakanlığı). Para todas estas organizaciones, el cumplimiento de WCAG 2.5.8 no es simplemente una recomendación de buenas prácticas: es una obligación normativa vinculada a la posibilidad de mostrar el Logotipo de Accesibilidad y de demostrar el cumplimiento legal durante las auditorías.

En términos prácticos, esto significa que la aplicación web adaptable a móviles de un banco turco debe garantizar que sus botones de confirmación de transferencias, campos de entrada de contraseñas de un solo uso y controles de navegación cumplan todos el tamaño mínimo de objetivo de 24×24 píxeles CSS. Del mismo modo, un sitio de comercio electrónico debe verificar que sus botones de añadir al carrito, selectores de cantidad y controles de filtrado tengan un tamaño adecuado en todos los perfiles de dispositivo. Los portales de salud deben auditar los calendarios de reserva de citas, que son notoriamente conocidos por tener celdas de fecha pequeñas, y ampliar esas celdas o proporcionar suficiente espacio de separación. Los portales de autoservicio de telecomunicaciones deben comprobar que sus enlaces de gestión de cuentas y los controles de conmutación en los selectores de planes de datos cumplan el umbral.

El incumplimiento de la Circular puede dar lugar a sanciones administrativas y puede impedir que una organización muestre el Logotipo de Accesibilidad, que cada vez se utiliza más como señal de confianza por parte de las personas consumidoras turcas. Más allá de las sanciones, el incumplimiento expone a las organizaciones a quejas presentadas ante los organismos supervisores pertinentes. Dado que Turquía tiene una población de personas mayores en crecimiento —el Instituto de Estadística de Turquía proyecta que las personas de 65 años o más constituirán el 16,3% de la población para 2040—, el impacto práctico de los objetivos pequeños solo aumentará con el tiempo, lo que convierte el cumplimiento temprano tanto en una prioridad ética como en una estrategia empresarial sólida a largo plazo.