2.5.8 Tamaño objetivo (mínimo)
Criterio de éxito oficial
El tamaño del objetivo para las entradas del puntero es de al menos 24 por 24 píxeles CSS, excepto cuando:
- Espaciado
- Los objetivos de tamaño insuficiente se posicionan de manera que si un círculo de 24px de diámetro está centrado en cada uno, los círculos no intersecan otro objetivo ni el círculo de otro objetivo insuficiente.
- Equivalente
- La función se puede lograr a través de un control diferente en la misma página que cumple este criterio.
- En línea
- El objetivo está en una oración o su tamaño está restringido por la altura de línea del texto.
- Control del agente de usuario
- El tamaño lo determina el navegador y no lo modifica el autor.
- Esencial
- Una presentación particular del objetivo es esencial o legalmente requerida.
¿Qué es?
Los botones, enlaces y otros elementos interactivos deben tener al menos 24 × 24 píxeles CSS. Si no es posible, deben tener suficiente espacio libre a su alrededor. Este criterio establece el requisito mínimo a nivel AA que la mayoría de organizaciones deben cumplir.
A diferencia del CE 2.5.5 (mejorado, AAA) que exige 44×44px, este criterio ofrece una doble vía para cumplir: alcanzar el tamaño mínimo o garantizar espaciado suficiente.
Vía 1: Tamaño
El objetivo mide al menos 24 × 24 píxeles CSS.
Vía 2: Espaciado
Un círculo de 24px centrado en el objetivo no interseca ningún otro objetivo.
2.5.8 Mínimo
Mínimo absoluto. Puede cumplirse por tamaño o por espaciado. Obligatorio para conformidad AA en WCAG 2.2.
2.5.5 Mejorado
Objetivo mejorado. Sin opción de cumplir por espaciado. Recomendado para experiencia óptima.
Regla de espaciado
Cuando un objetivo es menor de 24×24px, se evalúa dibujando un círculo imaginario de 24px de diámetro centrado en el cuadro delimitador de cada objetivo. Si el círculo no interseca otro objetivo ni el círculo de otro objetivo insuficiente, cumple la excepción de espaciado.
Tamaño vs. espaciado — a escala real
Con 8px de separación, los círculos imaginarios de 24px no se intersecan
Con solo 1px de separación, los círculos de 24px se intersecan → falla
¿Por qué es importante?
Para usuarios con temblores, artritis, parálisis parcial o dificultades de destreza fina, los objetivos pequeños y juntos son prácticamente imposibles de activar con precisión. Activar el objetivo incorrecto en una aplicación crítica puede tener consecuencias graves.
En pantallas táctiles, el dedo es mucho más grande que un cursor de ratón y oculta parcialmente el objetivo. Un tamaño mínimo de 24×24px con espaciado adecuado reduce significativamente las activaciones accidentales.
¿Quién se ve afectado?
Personas con temblores y artritis: Necesitan objetivos más grandes para poder activarlos de forma fiable sin golpear elementos adyacentes accidentalmente.
Usuarios de pantallas táctiles: El dedo es un dispositivo de entrada impreciso. Los objetivos pequeños y apiñados provocan errores frecuentes incluso en personas sin discapacidad.
Personas con limitaciones cognitivas: Los objetivos de mayor tamaño reducen la carga mental al no tener que apuntar con tanta precisión. El margen de error mayor genera menos ansiedad.
Cómo implementar 2.5.8
Hay dos estrategias principales: aumentar el tamaño del objetivo o garantizar suficiente espaciado.
Estrategia 1: aumentar el tamaño del objetivo
/* Tamaño mínimo de 24×24px para cumplir 2.5.8 */
button, a, [role="button"] {
min-width: 24px;
min-height: 24px;
}
/* Aumentar área de clic sin cambiar tamaño visual */
.small-icon-btn {
padding: 12px; /* Área total: icono + padding */
}Estrategia 2: garantizar espaciado suficiente
/* Si el objetivo es menor de 24px, asegurar separación */
.icon-group {
display: flex;
gap: 8px; /* Separación entre iconos pequeños */
}
/* Verificar: círculo de 24px centrado en cada botón */
/* no debe intersecar el círculo del botón adyacente */Ejemplos prácticos
Correcto Botones de acción de 24×24px
Una tabla de datos tiene botones de editar y eliminar. Cada botón tiene un padding que garantiza que el área total de clic sea de al menos 24×24px, aunque el icono visible sea más pequeño.
Correcto Iconos pequeños con espaciado suficiente
Una barra de herramientas tiene iconos de 16×16px pero con 8px de separación entre ellos. Los círculos imaginarios de 24px centrados en cada icono no se intersecan → cumple por espaciado.
Excepción Enlace en línea en un párrafo
Un enlace dentro de un párrafo de texto hereda la altura de línea del texto. Su altura puede ser menor de 24px pero está exento porque está «en línea» en un bloque de texto.
Fallo Botones de cierre de 12×12px sin espaciado
Una aplicación muestra etiquetas con botones de cierre de 12×12px situados a 2px entre sí. Los círculos de 24px se intersecan ampliamente. No cumple ni por tamaño ni por espaciado.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| C42 | Uso de min-height y min-width en CSS para garantizar el tamaño mínimo del objetivo | CSS |
| G221 | Proporcionar controles de mayor tamaño para el mismo propósito como alternativa | Suficiente |
Errores comunes
- Iconos de acción (editar, eliminar, cerrar) menores de 24×24px sin padding adicional.
- Grupos de botones pequeños sin separación suficiente entre ellos.
- Controles de paginación (1, 2, 3...) con tamaño insuficiente y sin espaciado adecuado.
- Casillas de verificación e interruptores menores de 24px sin área de clic extendida.