Técnica CSS WCAG 2.2
C44Usar CSS para garantizar que los objetivos tengan al menos 44 por 44 píxeles CSS
En resumen
Esta técnica consiste en dar a los enlaces de los componentes de paginación un tamaño mínimo de 44 por 44 píxeles CSS mediante propiedades como min-inline-size y min-block-size. Beneficia a las personas con dificultades de precisión motora o que usan pantallas táctiles, porque reduce las activaciones accidentales de objetivos contiguos. Úsela cuando quiera alcanzar el nivel AAA del tamaño del objetivo.
Ejemplo práctico
La paginación de listados de noticias, resultados de búsqueda o catálogos suele tener números pequeños y muy juntos. Esta técnica garantiza objetivos de al menos 44 × 44 px (criterio 2.5.5, nivel AAA) usando min-inline-size y min-block-size.
Así no: Paginación con enlaces de unos 20 px
Cada enlace mide solo lo que ocupa el número más un relleno de 2 × 6 px, unos 22 × 22 px, y están separados por 2 px. En una pantalla táctil es fácil pulsar la página 3 cuando se quería ir a la 4.
<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>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Enlaces de paginación de al menos 44 × 44 px
Se añade min-inline-size: 44px y min-block-size: 44px con inline-flex para centrar el número, y se amplía la separación. Todo el recuadro es pulsable y el texto se mantiene legible.
<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>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Dar el tamaño al
lien lugar de al enlace, de modo que el recuadro se ve grande pero la zona pulsable es solo el número. - Flechas de «anterior» y «siguiente» hechas con un icono de 12 px sin relleno alrededor.
- Usar
widthyheightfijos de 44 px que cortan el texto al ampliar o al aumentar el espaciado, en lugar de tamaños mínimos. - Reducir el tamaño de la paginación en la versión móvil, justo donde más se usa el dedo.
Técnica completa: traducción al español del texto 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 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 C44 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.
