target-size-minimum

Los objetivos de puntero deben medir al menos 24 × 24 px o mantener una separación suficiente

Comprueba que los objetivos operables mediante puntero tienen una región de impacto efectiva de al menos 24 por 24 píxeles CSS, o cumplen una excepción permitida (por ejemplo, espaciado suficiente).

Ámbito de aplicación. Se aplica a <button>, <summary>, <a href>, <area href>, <input>, <select>, <textarea> y elementos con role="button"/"link" que sean alcanzables con el puntero: renderizados, no suprimidos por pointer-events:none, y con una caja medible de tamaño distinto de cero. La exclusión del árbol de accesibilidad no es un filtro aquí: un control con aria-hidden sigue siendo un objetivo que un puntero puede alcanzar. <area> coincide con el selector pero nunca se evalúa, por la razón indicada más abajo.

Resultado esperado. Cada objetivo mide al menos 24 por 24 píxeles CSS, o cumple una de las excepciones del SC 2.5.8 que esta regla puede establecer a partir de la geometría: espaciado (un círculo de 24 px de diámetro centrado en el objetivo no alcanza ningún objetivo no relacionado), la excepción en línea para un enlace dentro de un fragmento de texto corrido, o el dimensionado del agente de usuario (una casilla o botón de radio nativo sin estilizar, detectado porque appearance no se ha restablecido a none). Un objetivo de tamaño insuficiente demasiado cerca de un vecino incumple la condición. Cuando una excepción podría aplicarse pero la geometría no puede confirmarlo (dos enlaces en línea dentro del mismo fragmento de texto, o un objetivo dentro de un SVG, canvas o mapa de imagen que podría ser esencial), el resultado es `cantTell` en lugar de una suposición. Notas (intención del motor):

• Esta regla se basa en el DOM y mide las regiones de impacto de puntero disponibles para usuarios de puntero videntes.
• Los elementos pueden ser "operables mediante puntero" incluso si están excluidos del árbol de accesibilidad (por ejemplo, aria-hidden="true").
• Excluye los objetivos que no son alcanzables mediante puntero debido a la supresión de renderizado (display:none, etc.), a la supresión de puntero (pointer-events:none), o a una geometría nula (por ejemplo, scale(0) -> rectángulos de tamaño cero).

Excepciones del WCAG 2.5.8 implementadas, y cómo:

• Espaciado: un círculo de 24 px de diámetro centrado en un objetivo de tamaño insuficiente no debe intersecar la caja de otro objetivo (no relacionado) ni el propio círculo de otro objetivo de tamaño insuficiente. Dos pasadas: una comprobación rápida de distancia entre centros (exacta para el caso insuficiente-contra-insuficiente, una aproximación razonable en los demás casos) y un muestreo de 16 puntos del perímetro mediante elementFromPoint como alternativa más precisa para los casos que la comprobación de distancia detecta de forma insuficiente (por ejemplo, un objetivo pequeño adyacente a un vecino grande y alargado). Las relaciones ancestro/descendiente entre el objetivo y el elemento "otro" nunca se tratan como un conflicto (ver isRelated): una forma interactiva anidada, un control pequeño dentro de su propio enlace/botón contenedor, es una sola región visual, no dos objetivos independientes. Ese patrón es competencia de nested-interactive-controls-absent, no del espaciado.
• En línea: un enlace dentro de un contenedor de bloque de texto cumple la excepción directamente (isInlineTextExceptionTarget). Un enlace en línea cuyo único conflicto de espaciado es otro enlace en línea en el mismo fragmento la regla devuelve `cantTell` (isInlineLinkTarget), ya que la excepción en línea podría cubrirlo pero la geometría no puede confirmarlo.
• Control del agente de usuario: una casilla o botón de radio nativo sin estilizar, detectado mediante que `appearance` no se ha restablecido a `none` (ver isUserAgentSizedControl). Limitado estrictamente a checkbox/radio en concreto, no a todos los controles de formulario, ya que esos son los únicos tipos con renderizado nativo inequívoco.
• Esencial/Equivalente: solo se afirma un subconjunto reducido y de alta confianza (controles incrustados en SVG/canvas/mapa, ver isPlausiblyEssentialOrEquivalent); todo lo demás recurre a `cantTell` en lugar de adivinar "esencial" a partir de un contenedor de maquetación.

Carencia conocida, dejada sin implementar a propósito: los elementos `<area>` (zona activa de mapa de imagen) no se evalúan. `area[href]` está en CANDIDATE_SELECTOR por compatibilidad futura, pero actualmente no hace nada. `<area>` no tiene caja CSS propia (`display: none` por la hoja de estilos del agente de usuario por defecto de la especificación HTML, confirmado contra la especificación y no como una peculiaridad de jsdom), por lo que `getBoundingClientRect()` siempre devuelve una geometría nula y la comprobación de `display:none` ya existente en `isPointerReachable` lo rechaza antes de que se ejecute ninguna lógica de tamaño/excepción. Una región de impacto real de `<area>` la calcula el navegador a partir de sus atributos `shape`/`coords` sobre el tamaño *renderizado* de la `<img>` asociada, una vía de medición completamente distinta a la de cualquier otro candidato aquí. Implementar eso correctamente (analizar `coords`, resolver la `<img>` propietaria mediante su `usemap`, tener en cuenta el tamaño de renderizado escalado por CSS de la imagen) es una funcionalidad aparte y más grande, no abordada en esta iteración. Esta es una aproximación automática y determinista pensada para ser:

• estricta en los fallos claros,
• conservadora cuando las excepciones no se pueden determinar de forma fiable.

Ejemplos

<button style="width:24px; height:24px;">+</button>

<button style="width:10px; height:10px;">A</button>
<button style="width:10px; height:10px; margin-left:5px;">B</button>

Ver código fuente