Técnica CSS WCAG 2.2
C44Dar a enlaces y botones un tamaño mínimo de 44 × 44 píxeles
Nombre oficial en el W3C: Usar CSS para garantizar que los objetivos tengan al menos 44 por 44 píxeles CSS
En pocas palabras
Los enlaces y botones pequeños y muy juntos provocan pulsaciones por error, sobre todo con el dedo. Esta técnica usa CSS para que cada objetivo (la zona que se pulsa) mida al menos 44 × 44 píxeles. Es lo que pide el criterio 2.5.5, de nivel AAA. Se suele aplicar en la paginación, en iconos y en botones de cerrar.
Por qué es importante
Acertar en un enlace diminuto cuesta a mucha gente. Por ejemplo, a personas con temblor en las manos, con poca precisión al mover el ratón o con mala vista. También a cualquiera que use el móvil con una mano o vaya de pie en el autobús.
En una paginación con números de 20 píxeles, es fácil ir a la página 3 en vez de a la 4. La persona tiene que volver atrás y repetir. Con objetivos más grandes, esos errores casi desaparecen.
Cómo se hace
- Aplique el tamaño al propio elemento que se pulsa (
aobutton), no a su contenedor. - Use tamaños mínimos:
min-inline-size: 44pxymin-block-size: 44px. Equivalen amin-widthymin-height, y dejan crecer el elemento si el texto es largo o se amplía. - Centre el contenido con
display: inline-flex,align-items: centeryjustify-content: center. - Deje un hueco entre objetivos con
gapo con margen, para que no se toquen. - No hace falta en los enlaces que están dentro de una frase de texto. Tampoco cuando hay otro control de 44 × 44 píxeles que hace lo mismo.
Ejemplo práctico
En listados de noticias, resultados de búsqueda o catálogos, la paginación suele tener números pequeños y muy juntos. Esta técnica usa min-inline-size y min-block-size para que cada enlace mida al menos 44 × 44 px. Es lo que pide el criterio 2.5.5 (nivel AAA).
Así no: Paginación con enlaces de unos 22 × 22 px
Cada enlace mide solo lo que ocupa el número más un relleno de 2 × 6 px. El resultado son unos 22 × 22 px, con 2 px de separación. En una pantalla táctil es fácil pulsar la página 3 cuando se quería ir a la 4.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<style>
.paginacion ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.paginacion a { display: inline-block; padding: 2px 6px; font-size: 14px; color: #744E9A; border: 1px solid #744E9A; border-radius: 4px; text-decoration: none; }
.paginacion a[aria-current="page"] { background: #744E9A; color: #fff; }
</style>
<nav class="paginacion" aria-label="Paginación de noticias">
<ul>
<li><a href="#">Anterior</a></li>
<li><a href="#">1</a></li>
<li><a href="#" aria-current="page">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Siguiente</a></li>
</ul>
</nav>Así sí: Enlaces de paginación de al menos 44 × 44 px
Se añaden min-inline-size: 44px y min-block-size: 44px. Con inline-flex, el número queda centrado. También se amplía la separación entre enlaces. Todo el recuadro se puede pulsar y el texto sigue siendo legible.
Pruébelo aquí:
Ver el código del ejemplo correcto
<style>
.paginacion ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.paginacion a { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-inline-size: 44px; min-block-size: 44px; padding: 0 10px; font-size: 16px; color: #744E9A; border: 1px solid #744E9A; border-radius: 4px; text-decoration: none; }
.paginacion a[aria-current="page"] { background: #744E9A; color: #fff; }
</style>
<nav class="paginacion" aria-label="Paginación de noticias">
<ul>
<li><a href="#">Anterior</a></li>
<li><a href="#">1</a></li>
<li><a href="#" aria-current="page">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Siguiente</a></li>
</ul>
</nav>Cómo comprobarlo
Errores frecuentes en auditorías
- Dar el tamaño al
liy no al enlace. El recuadro se ve grande, pero solo se puede pulsar el número. - Flechas de «anterior» y «siguiente» hechas con un icono de 12 px, sin relleno alrededor.
- Usar
widthyheightfijos de 44 px en lugar de tamaños mínimos. El texto se corta al ampliar la página o al aumentar el espaciado. - Reducir la paginación en la versión móvil, justo donde más se usa el dedo.
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 C44 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 que admiten CSS y entrada mediante puntero.
Descripción
El objetivo de esta técnica es garantizar que los enlaces de los componentes de paginación sean lo bastante grandes para cumplir los requisitos del criterio de conformidad 2.5.5 Tamaño del área de interacción. La finalidad es proporcionar un tamaño del objetivo adecuado que evite la activación accidental con el puntero de los objetivos contiguos.
Ejemplos
El siguiente ejemplo puede verse como ejemplo práctico.
Hacer que los enlaces de paginación tengan al menos 44 px de ancho y 44 px de alto
Este ejemplo utiliza min-inline-size y min-block-size en los objetivos.
El HTML
<nav aria-label="pagination">
<ol class="pagination-list">
<li><a>previous</a></li>
<li><a aria-current="page"><span class="visually-hidden">page </span>1</a></li>
<li><a href="/page-2"><span class="visually-hidden">page </span>2</a></li>
<li><a href="/page-3"><span class="visually-hidden">page </span>3</a></li>
<li><a href="/page-4"><span class="visually-hidden">page </span>4</a></li>
<li><a href="/page-5"><span class="visually-hidden">page </span>5</a></li>
<li><a href="/page-2">next</a></li>
</ol>
</nav>El CSS
.pagination-list{
display: flex;
gap: 0.5em;
list-style: none;
padding: 0;
}
.pagination-list li{
padding: 0.25em;
}
.pagination-list a{
align-items: center;
display: flex;
justify-content: center;
min-block-size: 44px;
min-inline-size: 44px;
padding: 0.5em;
}Pruebas
Procedimiento
Para cada objetivo que no tenga un equivalente suficientemente grande, que no esté en una frase ni condicionado de otro modo
por el line-height de texto que no es objetivo, cuyo tamaño haya sido modificado por el autor y cuya
presentación no sea esencial:
- Comprobar que el objetivo tiene un tamaño de al menos 44 px de ancho y 44 px de alto.
Resultados esperados
- La comprobación n.º 1 es verdadera.
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 C44 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.