2.5.5 Tamaño del objetivo (mejorado)
Criterio de éxito oficial
El tamaño del objetivo para las entradas del puntero es de al menos 44 por 44 píxeles CSS, excepto cuando:
- Equivalente
- El objetivo está disponible a través de un enlace o control equivalente en la misma página que cumple este criterio.
- En línea
- El objetivo está en una oración o su tamaño está limitado por la altura de la línea de texto que lo rodea.
- Control del agente de usuario
- El tamaño del objetivo lo determina el agente de usuario y el autor no lo modifica.
- Esencial
- Una presentación particular del objetivo es esencial o legalmente requerida para la información que se transmite.
¿Qué es?
Los botones, enlaces y controles interactivos deben tener al menos 44 × 44 píxeles CSS de área de clic o toque. Este tamaño se basa en las guías de Apple y Google para interfaces táctiles, y garantiza que los usuarios con destreza reducida puedan activarlos de forma fiable.
A diferencia del CE 2.5.8 (AA), que permite cumplir por tamaño o espaciado, este criterio AAA exige el tamaño de 44px como único camino, sin alternativas de espaciado.
Comparación de tamaños a escala real
Comparación: 2.5.5 (AAA) vs 2.5.8 (AA)
2.5.5 Mejorado
44pxTamaño mínimo de 44×44px. Sin opción de cumplir por espaciado. Mayor nivel de accesibilidad táctil.
2.5.8 Mínimo
24pxMínimo de 24×24px, pero se puede cumplir también garantizando que los círculos de 24px de cada objetivo no se intersequen.
¿Por qué es importante?
Las personas con temblores, artritis, parálisis parcial o destreza reducida necesitan áreas de activación más grandes. Un botón de 20px puede ser fácil de activar para alguien sin discapacidad, pero prácticamente imposible para alguien con limitaciones motoras finas.
El tamaño de 44px fue establecido por Apple (iOS Human Interface Guidelines) y Google (Material Design) como el estándar mínimo para interfaces táctiles cómodas. La WCAG adoptó este valor para el nivel AAA.
¿Quién se ve afectado?
Personas con temblores o artritis: Los objetivos grandes permiten una zona de error mayor, haciendo que la activación sea fiable incluso con movimientos imprecisos.
Personas mayores: La destreza fina disminuye con la edad. Objetivos de 44px reducen la frustración y los errores al usar pantallas táctiles.
Usuarios en movimiento: Al usar dispositivos en transporte o en condiciones desfavorables, objetivos grandes compensan los movimientos involuntarios del cuerpo.
Cómo implementar 2.5.5
CSS: padding para alcanzar 44px
Si el elemento visual es más pequeño (por ejemplo, un icono de 24px), usa padding para ampliar el área de clic/toque hasta 44×44px sin cambiar el aspecto visual.
/* Objetivo mínimo 44×44px para CE 2.5.5 (AAA) */
button, a[role="button"] {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Icono pequeño con área de clic ampliada */
.icon-btn {
padding: 10px; /* 24px icono + 20px padding = 44px total */
line-height: 1;
}Excepciones a recordar
Los enlaces dentro de párrafos de texto están exentos (excepción «en línea»). Las casillas de verificación y botones de radio del navegador también están exentos si el autor no modifica su tamaño predeterminado.
Ejemplos prácticos
Correcto Botón de icono con padding
Un botón de papelera muestra un icono de 20px, pero tiene padding suficiente para que el área de clic sea de 44×44px. Visualmente parece pequeño, pero el área de activación es generosa.
Correcto Ítem de menú de navegación
Los ítems de un menú de navegación tienen una altura de al menos 44px cada uno, garantizando que sean fáciles de activar tanto con ratón como con pantalla táctil.
Excepción Enlace en un párrafo
Un enlace dentro de un párrafo de texto hereda la altura de línea del texto. Puede ser menor de 44px pero está exento por la excepción «en línea».
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| G213 | Proporcionar objetivos de al menos 44×44px CSS para entradas del puntero | Suficiente |
Errores comunes
- Botones de icono (cerrar, editar, eliminar) con área de clic menor de 44×44px.
- Controles de paginación con tamaño insuficiente.
- Botones de radio o casillas personalizadas sin área de activación extendida.
- Confundir el tamaño del icono visible con el tamaño del objetivo — el área de clic debe ser de 44px aunque el icono sea más pequeño.