Técnica CSS WCAG 2.2
C42Usar min-height y min-width en el contenedor del objetivo para garantizar una separación suficiente entre objetivos
En resumen
Esta técnica explica cómo aplicar min-height y min-width de al menos 24 píxeles CSS a los contenedores de enlaces pequeños (por ejemplo, en una paginación) para que, aunque el enlace en sí sea menor, quede suficiente separación con los objetivos vecinos y no se pulse uno por error. Beneficia a quienes usan pantallas táctiles o tienen dificultades motrices, y ayuda a cumplir el criterio 2.5.8 Tamaño del Objetivo (Mínimo).
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 las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica C42 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
