Técnica CSS WCAG 2.2
C42Usar min-height y min-width para separar los enlaces pequeños
Nombre oficial en el W3C: Usar min-height y min-width en el contenedor del objetivo para garantizar una separación suficiente entre objetivos
En pocas palabras
Los enlaces pequeños, como los números de una paginación, son difíciles de pulsar sin acertar en el de al lado. Si cada uno se coloca dentro de una caja de al menos 24 por 24 píxeles, queda espacio libre a su alrededor. Así se evitan pulsaciones por error.
Por qué es importante
Las personas con temblor en las manos, poca precisión o dedos grandes en una pantalla táctil fallan a menudo con objetivos pequeños y juntos.
En una paginación «1 2 3 4», pulsar el número equivocado obliga a volver atrás y repetir. Con un ratón o un dedo poco preciso, la web se vuelve frustrante.
Cómo se hace
- Coloque cada enlace dentro de un elemento contenedor, por ejemplo cada
<li>de la lista. - Dé a ese contenedor
min-width: 24pxymin-height: 24px. - Centre el enlace dentro con
display: flex,align-items: centeryjustify-content: center. - No reduzca esas medidas con márgenes negativos ni solape las cajas.
- Mejor aún: haga que el propio enlace mida 24 por 24 píxeles o más.
Cómo comprobarlo
- Localice los enlaces y botones pequeños, sobre todo en menús y paginaciones.
- Imagine un círculo de 24 píxeles de diámetro centrado en cada uno. Puede medir con las herramientas del navegador (tecla F12) o con una regla de pantalla.
- Compruebe que ese círculo no toca ningún otro enlace o botón.
- Compruebe también que no se cruza con el círculo de otro objetivo pequeño.
Ejemplo
Paginación de resultados con cada número dentro de una caja mínima de 24 por 24 píxeles.
<style>
.paginas { display: flex; list-style: none; padding: 0; }
.paginas li { display: flex; align-items: center; justify-content: center;
min-width: 24px; min-height: 24px; }
</style>
<nav aria-label="Páginas de resultados">
<ul class="paginas">
<li><a href="?p=1">1</a></li>
<li><a href="?p=2">2</a></li>
</ul>
</nav>Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica C42 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Todas las tecnologías compatibles con CSS y con la entrada mediante puntero.
Descripción
El objetivo de esta técnica es garantizar que los enlaces de los menús de navegación o de paginación estén separados de forma que queden dentro de un área que mida al menos 24 por 24 píxeles CSS, cuando el área del propio objetivo sea menor que eso. La finalidad es ofrecer un margen libre adecuado alrededor del objetivo, de modo que la distancia a los objetivos adyacentes sea suficiente para evitar la activación accidental con el puntero de un objetivo contiguo.
Ejemplos
El siguiente ejemplo puede verse en el ejemplo práctico.
Usar el valor flex de display junto con min-height y min-width
Este ejemplo utiliza min-height y min-width en los elementos de lista que contienen los enlaces de paginación. Los enlaces no cumplen el requisito de tamaño de 24 por 24 píxeles CSS, pero centrarlos dentro de contenedores de al menos 24 por 24 píxeles CSS garantiza una separación suficiente. Los círculos de 24 píxeles CSS de diámetro de cada enlace quedarán completamente dentro de su elemento de lista contenedor, por lo que no se intersecarán entre sí.
El HTML
<nav aria-label="pagination">
<ol>
<li><a class="previous">previous</a></li>
<li><a aria-current="page">1</li>
<li><a href="/page-2">2</a></li>
<li><a href="/page-3">3</a></li>
<li><a href="/page-4">4</a></li>
<li><a href="/page-5">5</a></li>
<li><a href="/pages-6-10">next</a></li>
</ol>
</nav>El CSS
ol {
display: flex;
flex-wrap: wrap;
list-style: none;
}
li {
margin: 3px;
min-height: 24px;
min-width: 24px;
text-align: center;
}Pruebas
Procedimiento
Para cada objetivo de tamaño insuficiente que no tenga un equivalente lo bastante grande, que no esté en una frase ni
esté limitado de otro modo por el line-height de un texto que no sea objetivo, cuyo tamaño haya sido modificado por el autor y cuya
presentación no sea esencial:
- Dibujar un círculo de 24 px de diámetro centrado en la caja delimitadora del objetivo.
- Comprobar que el círculo del paso n.º 1 no interseca ningún otro objetivo.
- Comprobar que el círculo del paso n.º 1 no interseca el círculo de ningún otro objetivo de tamaño insuficiente.
Resultados esperados
- Las comprobaciones n.º 2 y n.º 3 son verdaderas.
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica C42 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.