Tamaño del objetivo (mínimo)
Los objetivos interactivos — botones, enlaces, controles de formulario — deben tener al menos 24×24 píxeles CSS, salvo que un objetivo equivalente en la misma página sea suficientemente grande o el objetivo esté integrado en una oración. Nuevo en WCAG 2.2.
Qué exige este criterio
Todo control interactivo de la página debe ocupar un área de pulsación de al menos 24×24 píxeles CSS, o bien disponer de espacio suficiente a su alrededor de modo que un círculo de 24×24 centrado en el objetivo no intersecte con ningún otro objetivo. La finalidad es evitar que los usuarios con control motor limitado, temblor o uso de pantalla táctil en movimiento fallen el objetivo y activen la acción equivocada.
WCAG 2.2 establece el mínimo en 24×24; el criterio de nivel AAA 2.5.5 mantiene el objetivo más ambicioso de 44×44.
Cómo cumplirlo
- Establecer un
min-widthymin-heightde 24 px en botones con solo icono, botones de cierre y cualquier objetivo de pulsación más pequeño que un botón típico. - En el caso de los enlaces en línea dentro de párrafos, existe exención: el criterio de conformidad permite explícitamente los objetivos «en una oración».
- En filas de iconos (botones de barra de herramientas, acciones de fila de tabla), usar relleno para ampliar el área de pulsación hasta 24×24 aunque el glifo del icono sea más pequeño.
- En los controles que deben permanecer visualmente pequeños (una «x» diminuta en una etiqueta), añadir un margen o espacio intermedio para que los objetivos adyacentes se encuentren al menos a 24 px de distancia entre centros.
- Auditar primero la paginación, las migas de pan, las acciones de fila de tabla y los iconos de la barra de herramientas: ahí es donde se concentran los fallos.
Fallos habituales
- Botones de icono de 16×16 (cerrar, editar, eliminar) sin relleno, especialmente en tablas y barras de herramientas.
- Filas de paginación comprimidas donde Anterior / 1 / 2 / 3 / Siguiente se disponen en cajas de 18 px pegadas entre sí.
- Casillas de verificación y botones de opción personalizados con un tamaño inferior al del control nativo por razones «minimalistas».
- Botones de acción flotantes en móvil que superan los 24×24 px pero se sitúan demasiado cerca de otros objetivos de pulsación.
- Botones «×» de eliminación de etiquetas con un tamaño de 10–14 píxeles: muy frecuentes en interfaces de filtro basadas en chips.
Exenciones que conviene conocer
El criterio de conformidad contempla cinco excepciones: equivalente (un objetivo más grande en la misma página realiza la misma función), en línea (integrado en una oración), control del agente de usuario (por defecto del navegador, por ejemplo, un <select> nativo), esencial (el tamaño pequeño es necesario para transmitir la información, como un pin en un mapa) y conforme (una regla más general impone el tamaño, poco frecuente).
Por qué es importante
Los fallos de tamaño de objetivo aparecen de forma desproporcionada en las pruebas con dispositivos móviles y entre los usuarios con párkinson, temblor esencial, esclerosis múltiple o cualquier persona que use una pantalla táctil con una sola mano en el transporte público. El cambio de «sin mínimo» en la versión 2.1 a un umbral de 24×24 en la versión 2.2 pilló desprevenida a la mayoría de los sitios en producción: cabe esperar que este sea el nuevo criterio de conformidad más citado en las auditorías de 2026.