jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

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 Success Criterion 2.5.8 Target Size requires that interactive elements have a target area of at least 24x24 CSS pixels (AA). The AAA level requires 44x44px. These sizes ensure that people with motor impairments or using touch devices can reliably tap or click interactive elements without accidentally activating adjacent elements.

Respuesta rápida

WCAG 2.2 requires interactive elements to have a target size of at least 24x24px (AA) or 44x44px (AAA). Four exceptions apply: inline links, native controls, essential elements, and elements with 24px+ spacing to adjacent targets. Use CSS min-width/min-height and gap/padding to fix undersized targets.

Limitaciones

  • This tool checks static dimensions only. It does not account for dynamic layouts, responsive breakpoints, or zoom levels that may change the effective target size at different screen sizes.
  • The spacing exception requires manual verification of actual spacing between adjacent targets. This tool checks the spacing value you enter but cannot measure actual DOM layout distances.
  • WCAG 2.5.8 is a Level AA requirement in WCAG 2.2. Some enforcement bodies may apply it more strictly than others, and interpretation of exceptions varies.

Cómo usar esta herramienta

  1. Enter the width and height of your interactive element in CSS pixels.
  2. Enter the spacing to the nearest adjacent interactive element if known.
  3. Select the element type — different exceptions apply to inline links, native controls, and essential elements.
  4. Review the pass/fail result and CSS fix recommendations.

Para qué puedes usarla

  • Check that mobile navigation buttons meet the 24px AA target size requirement.
  • Verify that small icon-only buttons have sufficient spacing to adjacent elements to qualify for the spacing exception.
  • Audit a page for touch accessibility before a WCAG compliance review.

Casos de uso

Ejemplos prácticos

Ejemplo

Mobile nav icon buttons

A mobile nav has 20x20px icon buttons. The tool reports AA failure. Adding 4px padding to reach 24x24px passes AA, or adding 24px spacing between buttons qualifies for the spacing exception.

Ejemplo

Inline text links

An article has inline text links that are only 18px tall. The tool applies the inline exception and passes AA because links within text blocks are exempt from minimum target size.

Errores comunes

  • Assuming spacing alone fixes target size — the spacing exception requires the element to be at least 20px and have 24px spacing to adjacent targets.
  • Applying the inline exception to non-inline elements like standalone buttons or navigation links — the inline exception only applies to links within text blocks.
  • Checking desktop dimensions instead of CSS pixels — CSS pixels may differ from device pixels on high-DPI screens. Always use computed CSS values from DevTools.

Verificación

  1. Use browser DevTools to inspect the computed width and height of the element in CSS pixels.
  2. Verify spacing between adjacent interactive elements using DevTools distance measurement or by inspecting the gap, margin, and padding properties.

FAQ

Preguntas sobre Comprobador de tamaño táctil

What counts as spacing to an adjacent target?

Spacing is measured from the edge of one target to the edge of the next nearest interactive element. This includes buttons, links, inputs, and any other clickable element. White space, margins, padding, or non-interactive content between targets counts as spacing. The spacing exception requires at least 24px of clearance.

Does this check apply to desktop as well as mobile?

WCAG 2.5.8 applies to all devices with pointer inputs, including desktop mouse pointers. While the criterion was motivated by mobile touch accessibility, the requirement is device-agnostic. Desktop users with motor impairments or using alternative pointing devices also benefit from larger targets.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también