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 cuyo rol se resuelve en button o link (el primer rol real del atributo role, sin distinguir mayúsculas de minúsculas) que sean alcanzables con el puntero: renderizados, no suprimidos por pointer-events:none, y con algo que un puntero pueda alcanzar (un objetivo recortado por completo no tiene nada; en uno con display: contents, lo es su contenido). 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: no tiene caja propia que medir. Un elemento personalizado cuyos ElementInternals le dan el rol button o link (this.attachInternals().role), sin un atributo role que nombre otro, cuenta como lo hace un elemento nativo con ese rol.

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. Un objetivo es la región que un puntero puede alcanzar: su border box con sus esquinas redondeadas y sus transformaciones 2D, recortada por clip y clip-path: inset() en su cadena de bloques contenedores y no mayor que una caja de esa cadena que recorta su desbordamiento, con el contenido que sobresale de ella. Lo que se pinta encima de un objetivo no le quita nada, tampoco otro objetivo: que una capa decorativa, una superposición o una fila fija cubra un objetivo depende del momento y de la posición de desplazamiento del análisis, así que no dice nada del tamaño del objetivo, y el 2.5.8 mide el propio objetivo. Dos objetivos que se superponen están cada uno dentro del círculo del otro, así que uno de tamaño insuficiente sigue estando demasiado cerca. Una caja que recorta su desbordamiento (overflow distinto de visible, o contain: paint), desplazada por quien lee o por un script, no lo corta donde está ahora su borde: el objetivo se mide entero, como si se hubiera desplazado hasta él, no mayor que la caja, y solo las cajas y objetivos dentro de la caja están cerca de un objetivo que esta mantiene fuera de la vista. Es lo bastante grande cuando un cuadrado de 24 por 24 alineado con la página cabe en esa región, como lo mide Understanding 2.5.8. Las excepciones: espaciado (un círculo de 24 px de diámetro centrado en el rectángulo delimitador de la región no alcanza la región de ningún objetivo no relacionado, ni el círculo de otro de tamaño insuficiente), la excepción en línea para un objetivo dentro de una frase, un enlace o un botón escrito dentro del texto (el tramo de su bloque contenedor entre saltos de línea contiene texto con una letra o un dígito fuera de cualquier objetivo), 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 no puede confirmarse (dos enlaces en línea que se apiñan entre sí separados solo por separadores, como en "Edit | Delete", 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. Margen (target-size-px): de entre los objetivos que miden al menos 24 por 24, el más pequeño, como el lado del mayor cuadrado que cabe en él frente a 24 (en un rectángulo, el menor de su ancho y su alto); context.widthPx y context.heightPx dan su extensión. Un objetivo de menos de 24 que pasa gracias a la excepción de espaciado no es candidato. Solo cuenta como cercano un objetivo que está a menos de 6px de 24 (hasta 30), así que una página cuyo objetivo más pequeño es mayor no da margen. measuredCount cuenta todos los objetivos medidos.

Margen. Esta regla mide target-size-px en píxeles CSS, y el valor debe alcanzar el umbral. Cuando un resultado correcto quedó cerca del umbral, el campo margin del resultado indica el elemento que más se acercó sin dejar de cumplirlo, así que un resultado que un cambio pequeño haría cambiar se ve antes de que cambie. A diferencia de los campos de un hallazgo, es un contrato estable. Consulta Esquema de salida.

Ejemplos

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

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

Cómo comprobarlo

Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.

Ver código fuente