Herramientas CSS

Gratis Comprobador de tamaño táctil

Verifica elementos interactivos según WCAG 2.2 tamaño mínimo (2.5.8) con resultados AA/AAA y recomendaciones CSS.

Cargando herramienta...

Qué es Comprobador de tamaño táctil?

WCAG 2.2 Criterio de Éxito 2.5.8 Tamaño del Objetivo requiere que los elementos interactivos tengan un área objetivo de al menos 24x24 píxeles CSS (AA). El nivel AAA requiere 44x44px. Estos tamaños aseguran que las personas con discapacidades motoras o que usan dispositivos táctiles puedan tocar o hacer clic en elementos interactivos de manera confiable.

Respuesta rápida

WCAG 2.2 requiere que los elementos interactivos tengan un tamaño objetivo de al menos 24x24px (AA) o 44x44px (AAA). Cuatro excepciones aplican: enlaces en línea, controles nativos, elementos esenciales y elementos con 24px+ de espaciado a objetivos adyacentes.

Last updated: 2026-05-28

Limitaciones

  • Esta herramienta verifica dimensiones estáticas solamente. No considera diseños dinámicos o niveles de zoom.
  • La excepción de espaciado requiere verificación manual del espaciado real entre objetivos adyacentes.
  • WCAG 2.5.8 es un requisito de Nivel AA. La interpretación de las excepciones puede variar.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Ingrese el ancho y alto de su elemento interactivo en píxeles CSS.
  2. Ingrese el espaciado al elemento interactivo adyacente más cercano si se conoce.
  3. Seleccione el tipo de elemento — diferentes excepciones aplican a enlaces en línea, controles nativos y elementos esenciales.
  4. Revise el resultado de aprobación/rechazo y las recomendaciones de corrección CSS.

Para qué puedes usarla

  • Verificar que los botones de navegación móvil cumplan el requisito de tamaño objetivo AA de 24px.
  • Verificar que los botones pequeños de solo icono tengan suficiente espaciado para calificar para la excepción de espaciado.
  • Auditar una página para accesibilidad táctil antes de una revisión de cumplimiento WCAG.

Casos de uso

Ejemplos prácticos

Ejemplo

Botones de icono de navegación móvil

Una navegación móvil tiene botones de icono de 20x20px. La herramienta reporta fallo AA. Agregar 4px de padding para alcanzar 24x24px pasa AA.

Ejemplo

Enlaces de texto en línea

Un artículo tiene enlaces de texto en línea de solo 18px de alto. La herramienta aplica la excepción en línea y pasa AA porque los enlaces dentro de bloques de texto están exentos.

Errores comunes

  • Asumir que el espaciado solo arregla el tamaño objetivo — la excepción requiere al menos 20px con 24px de espaciado.
  • Aplicar la excepción en línea a elementos no en línea como botones independientes.
  • Verificar dimensiones de escritorio en lugar de píxeles CSS.

Verificación

  1. Use DevTools para inspeccionar el ancho y alto calculados del elemento en píxeles CSS.
  2. Verifique el espaciado entre elementos interactivos adyacentes usando la medición de distancia de DevTools.

FAQ

Preguntas sobre Comprobador de tamaño táctil

¿Qué cuenta como espaciado a un objetivo adyacente?

El espaciado se mide desde el borde de un objetivo hasta el borde del siguiente elemento interactivo más cercano. Espacio en blanco, márgenes, padding o contenido no interactivo entre objetivos cuenta como espaciado.

¿Esta verificación aplica a escritorio además de móvil?

WCAG 2.5.8 aplica a todos los dispositivos con entrada de puntero. Aunque el criterio fue motivado por la accesibilidad táctil móvil, el requisito es independiente del dispositivo.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también