Distancia entre elementos interactivos

Silktide mide el tamaño y el espaciado de los botones, enlaces y controles de formulario en tus páginas. Los controles pequeños y muy juntos se pulsan fácilmente por error, así que cada uno debería tener al menos 24 por 24 píxeles o contar con suficiente espacio libre a su alrededor.

Por qué importa

Cualquiera puede fallar al pulsar un botón pequeño, pero para las personas con temblores, artritis o motricidad fina limitada, los controles muy juntos hacen que una página sea realmente difícil de usar: tocar el enlace equivocado, enviar el formulario equivocado o rendirse por completo. El problema es peor en las pantallas táctiles, donde una yema del dedo es mucho menos precisa que un puntero del ratón.

Este es el criterio de éxito 2.5.8 de las (Tamaño del objetivo: mínimo), un requisito de en WCAG 2.2, por lo que forma parte del objetivo de conformidad al que aspiran la mayoría de organizaciones.

Cómo solucionarlo

Haz que cada elemento interactivo tenga al menos 24 por 24 píxeles . Establecer min-width y min-height, o añadir padding, suele ser suficiente.
Como alternativa, añade espacio entre los controles de modo que un área de 24 por 24 píxeles centrada en cada control no se solape con sus vecinos; se admiten objetivos más pequeños cuando no hay nada cerca.
Presta especial atención a los botones de icono, los enlaces de paginación y los iconos de redes sociales, que a menudo son demasiado pequeños y están muy agrupados.

\/* Problema: botones de icono de 16px pegados entre sí *\/
.toolbar button {
  width: 16px;
  height: 16px;
}

\/* Solución: ampliar el área clicable al menos a 24x24 *\/
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Cómo lo comprueba Silktide

Prueba tanto la versión móvil como la de escritorio de cada página; los resultados pueden diferir entre ambas.
Encuentra los elementos interactivos: enlaces, botones, campos de formulario y áreas de mapas de imagen.
Ignora los elementos que no son visibles normalmente, como el contenido colocado fuera de pantalla para , y cualquier elemento que hayas excluido de la comprobación.
Aprueba cualquier elemento de al menos 24 píxeles de ancho y 24 píxeles de alto.
Ignora los controles que están dentro de una frase o bloque de texto, que las WCAG eximen de esta norma.
Para cada elemento pequeño restante, mide el hueco hasta cada otro elemento interactivo. El hueco requerido es 24 píxeles menos el ancho del elemento (horizontalmente) y 24 píxeles menos su alto (verticalmente).
Informa del elemento si otro control cae dentro de ese hueco, a menos que ambos sean enlaces al mismo destino. Los elementos anclados a la pantalla, como los encabezados fijos, se comparan con otros elementos anclados en lugar de con el contenido que se desplaza por debajo.

Resolución de problemas

Un control pequeño ha superado la comprobación

El tamaño por sí solo no supone un fallo: un control pequeño supera la comprobación cuando tiene suficiente espacio libre a su alrededor, está en línea dentro del texto o solo está junto a enlaces que apuntan al mismo lugar. Esto refleja las excepciones que permiten las propias WCAG.

Solo se muestran algunos fallos

Silktide informa de hasta los 10 ejemplos más graves por página. Corregir un estilo compartido suele resolver muchos problemas a la vez.

Quiero el estándar más estricto

Esta comprobación verifica el mínimo de Nivel AA de 24 por 24 píxeles. La comprobación relacionada Controles lo bastante grandes verifica la recomendación más estricta de Nivel AAA de 44 por 44 píxeles.