Toque el comprobador de tamaño objetivo
Compruebe si los elementos de su interfaz de usuario cumplen con el requisito de tamaño objetivo WCAG 2.5.8 (mínimo 24 × 24 píxeles CSS). Ingrese las dimensiones de los elementos, el relleno y los valores de los márgenes para calcular el área objetivo táctil efectiva y obtenga un resultado instantáneo de pasa/falla con orientación detallada y una vista previa visual. Totalmente privado, 100% gratuito y no es necesario registrarse.
Quick Select
Element Dimensions
Padding
Margin / Spacing
Pass - Meets WCAG 2.5.8
Effective target area: 56 × 48px
The effective touch target size is 56×48px, which meets the WCAG 2.5.8 minimum of 24×24px. Consider adding at least 4px spacing around this target for better usability.
Visual Preview
¿Por qué utilizar nuestro verificador de tamaño de objetivo táctil?
- Verificación instantánea de cumplimiento de WCAG 2.5.8: Touch Target Size Checker evalúa las dimensiones, el relleno y los márgenes de sus elementos según el requisito de WCAG 2.5.8 (mínimo 24 × 24 píxeles CSS) en tiempo real. Ajuste cualquier valor y vea cómo el resultado se actualiza instantáneamente con un estado claro de aprobación/rechazo.
- Vista previa del objetivo visual: vea una representación visual de su objetivo táctil con zonas codificadas por colores: área de contenido (índigo), área efectiva en la que se puede hacer clic, incluido el relleno (verde/ámbar/rojo), espacio entre márgenes (discontinuo azul) y la superposición mínima de × px WCAG para una referencia rápida.
- 100% privado - Sin carga: todos los cálculos se realizan localmente en su navegador. Sus datos de diseño nunca salen de su dispositivo y nunca se envían a ningún servidor: son seguros para proyectos de clientes, sistemas de diseño y auditorías de accesibilidad patentadas.
- Gratis y sin límites: consulte configuraciones de elementos ilimitadas sin registro, suscripción ni límites de uso. Touch Target Size Checker es completamente gratuito para siempre y no hay anuncios que bloqueen la interfaz.
Casos de uso comunes para el verificador de tamaño de objetivo táctil
- Auditoría de la interfaz de usuario de aplicaciones móviles: los diseñadores de dispositivos móviles utilizan Touch Target Size Checker para auditar cada elemento interactivo (botones, enlaces, íconos) con respecto a WCAG 2.5.8. Garantizar que todos los objetivos táctiles tengan al menos 24 × 24 px mejora la usabilidad para usuarios con discapacidades motoras y reduce los toques accidentales.
- Revisión del cumplimiento de la accesibilidad: los especialistas en accesibilidad utilizan Touch Target Size Checker durante las auditorías de cumplimiento de las WCAG. La herramienta proporciona explicaciones detalladas de los resultados de aprobación/rechazo, lo que facilita documentar los hallazgos de accesibilidad y recomendar ajustes de dimensiones específicos.
- Auditoría de componentes del sistema de diseño: los mantenedores del sistema de diseño utilizan Touch Target Size Checker para validar que todos los componentes interactivos (botones, palancas, chips, insignias) cumplan con los requisitos mínimos de tamaño objetivo antes de enviarlos a los equipos de desarrollo.
- Validación del diseño responsivo: los desarrolladores utilizan el Comprobador de tamaño de objetivo táctil para verificar que los objetivos táctiles sigan siendo lo suficientemente grandes en todos los puntos de interrupción responsivos. Los elementos que son grandes en el escritorio pueden volverse demasiado pequeños en el móvil, y esta herramienta ayuda a detectar esos problemas a tiempo.
- Accesibilidad de formularios y campos de entrada: los diseñadores de formularios utilizan el Comprobador de tamaño de destino táctil para garantizar que los campos de entrada, casillas de verificación, botones de opción y botones de envío tengan áreas de destino táctiles adecuadas. Los controles de formato pequeño son una barrera de accesibilidad común que esta herramienta ayuda a identificar.
- Navegación y usabilidad del menú: los diseñadores de navegación utilizan Touch Target Size Checker para auditar elementos del menú, íconos de hamburguesas, enlaces de ruta de navegación y elementos de pestañas. Los objetivos de navegación pequeños son uno de los fallos más frecuentes de WCAG 2.5.8 en el diseño web moderno.
¿Qué es el tamaño del objetivo táctil WCAG 2.5.8?
WCAG 2.5.8 Tamaño objetivo (mínimo) es una pauta de accesibilidad al contenido web que requiere que los objetivos interactivos tengan al menos × píxeles CSS. Esto garantiza que los usuarios con discapacidades motoras, destreza reducida o aquellos que utilizan interfaces táctiles en dispositivos móviles puedan tocar o hacer clic con precisión en elementos interactivos sin activar accidentalmente objetivos adyacentes.
Cómo funciona nuestro verificador de tamaño de objetivo táctil
- Ingrese las dimensiones del elemento: especifique el ancho y alto del contenido de su elemento de interfaz de usuario (el área de contenido visible, sin incluir el relleno). Luego ingrese los valores de relleno: se puede hacer clic en el área de relleno y cuenta para el tamaño objetivo efectivo.
- Agregar margen/espaciado (opcional): ingrese valores de margen para verificar la excepción de espaciado WCAG 2.5.8. Si los objetivos adyacentes tienen al menos px de espacio entre ellos, los objetivos pueden ser más pequeños que × px y aun así pasar.
- Revise los resultados: la herramienta calcula el área objetivo táctil efectiva (elemento + relleno), la compara con el mínimo de × px y proporciona un resultado claro de pasa/falla/condicional con recomendaciones detalladas para mejorar.
Área objetivo efectiva explicada
- Área de contenido: el contenido visible del elemento (texto, icono o imagen). Esta suele ser la parte más pequeña del área en la que se puede hacer clic y no incluye ningún relleno.
- Área efectiva en la que se puede hacer clic: el área de contenido más todo el relleno. Este es el objetivo real de toque/clic con el que interactúan los usuarios. El área efectiva debe ser de al menos × px para pasar WCAG 2.5.8.
- Margen/espaciado: el espacio entre este objetivo y los objetivos adyacentes. Si bien no se puede hacer clic en el margen en sí, un espacio adecuado ( px+) entre objetivos pequeños puede satisfacer la excepción WCAG 2.5.8.
- Área visual versus interactiva: en muchos marcos CSS, el relleno se incluye en el área en la que se puede hacer clic, pero el clip de fondo puede hacer que aparezca de manera diferente. La herramienta siempre asume que se puede hacer clic en el relleno, lo que coincide con el comportamiento del navegador.
WCAG 2.5.8 Excepciones y regla de espaciado
La excepción de espaciado: si un objetivo es más pequeño que × px, aún puede pasar WCAG 2.5.8 si hay al menos px de espacio en todos los lados entre él y los objetivos adyacentes. Esta excepción reconoce que los objetivos pequeños bien espaciados son más fáciles de alcanzar con precisión que los que están muy juntos.
Limitaciones importantes: la excepción de espaciado no se aplica a destinos que están en línea (como enlaces dentro de un párrafo) porque el espacio entre líneas de texto no proporciona el mismo beneficio de usabilidad. La norma también exige que el espaciado sea consistente: el espaciado esporádico alrededor de algunos lados no es suficiente para cumplir con los criterios de excepción.
Preguntas frecuentes
WCAG 2.5.8 (Tamaño mínimo de destino) es un criterio de éxito de nivel AA que requiere que los elementos interactivos de la interfaz de usuario tengan un área de destino de al menos 24 × 24 píxeles CSS. Esto garantiza que los objetivos táctiles y de clic sean lo suficientemente grandes para usuarios con discapacidades motoras, usuarios de dispositivos móviles y cualquier persona que utilice la entrada táctil o de puntero. El requisito se aplica a todos los elementos interactivos: botones, enlaces, controles de formulario y componentes interactivos personalizados.
El tamaño efectivo del objetivo táctil se calcula agregando las dimensiones de contenido del elemento a su relleno. La fórmula es: ancho efectivo = ancho del elemento + relleno izquierdo + relleno derecho, y altura efectiva = alto del elemento + relleno superior + relleno inferior. El margen y el espacio entre elementos NO cuentan para el tamaño objetivo, pero afectan si el elemento pasa la verificación condicional de "espaciado suficiente": si el objetivo está ligeramente por debajo de 24 × 24 px pero tiene al menos 4 px de espacio en cada lado, aún puede pasar condicionalmente.
No. El margen/espaciado NO cuenta para el tamaño efectivo del objetivo táctil. Solo el área de contenido del elemento más el relleno se considera el objetivo táctil. Sin embargo, la excepción WCAG 2.5.8 permite objetivos de menos de 24 × 24 píxeles si hay un espacio suficiente de al menos 4 píxeles alrededor del objetivo en todos los lados. El Comprobador de tamaño de objetivo táctil evalúa ambas condiciones: si el objetivo cumple con el tamaño mínimo de 24×24px y si pasa condicionalmente con espaciado.
Sí. WCAG 2.5.8 define varias excepciones: (1) Objetivo equivalente: hay otro objetivo disponible con la misma función que cumple con el requisito en la misma página. (2) En línea: el objetivo está dentro de una oración o línea de texto donde el tamaño lo determina el texto. (3) Control del agente de usuario: el tamaño objetivo lo determina el agente de usuario (controles predeterminados del navegador). (4) Esencial: la presentación específica del objetivo es esencial para la información que se transmite. Touch Target Size Checker le ayuda a evaluar el requisito de tamaño principal y proporciona orientación para estas excepciones.
Un pase condicional significa que el elemento objetivo en sí es más pequeño que 24×24px, pero tiene al menos 4px de espacio en cada lado, lo que satisface la excepción de espaciado de WCAG 2.5.8. El elemento que pasa condicionalmente muestra una advertencia ámbar que indica que, si bien cumple con los requisitos actuales, se recomienda aumentar el tamaño objetivo siempre que sea posible para una mejor usabilidad. Las versiones futuras de WCAG pueden endurecer estos requisitos, por lo que diseñar para un mínimo de 24×24px es la mejor práctica.
Sí. Touch Target Size Checker es 100% gratuito, no requiere registro, no tiene funciones premium ni límites de uso. Verifique configuraciones ilimitadas de elementos de UI sin restricciones ni costos ocultos. No hay anuncios que bloqueen la interfaz.
Sí. Si bien el estándar WCAG 2.5.8 utiliza píxeles CSS que se adaptan bien al desarrollo web, el principio subyacente de un tamaño de objetivo mínimo de 9 a 10 mm se aplica a todas las plataformas. Para aplicaciones móviles, HIG de Apple recomienda al menos 44×44pt para objetivos táctiles, y Material Design de Google recomienda al menos 48×48dp. El Touch Target Size Checker se puede utilizar como referencia para cualquier plataforma al convertir unidades específicas de la plataforma a píxeles CSS.
Sí. Los objetivos táctiles que cumplen con WCAG 2.5.8 en el tamaño de una computadora de escritorio pueden volverse demasiado pequeños en dispositivos móviles o cuando los elementos se redistribuyen. Se recomienda probar su interfaz de usuario en múltiples tamaños de ventana gráfica, especialmente el ancho más pequeño admitido. Touch Target Size Checker ayuda mostrando tanto el tamaño objetivo efectivo como una vista previa visual: puede ingresar las dimensiones esperadas más pequeñas y verificar el cumplimiento en todos sus puntos de interrupción receptivos.