Tamaño de botones y enlaces en móvil (WCAG 2.2)

Por qué importa

Los objetivos diminutos provocan toques equivocados: abrir el producto de al lado, cerrar lo que querías ver o no conseguir cambiar de talla. Para personas con temblores o poca destreza, o simplemente con prisa y el móvil en una mano, pueden hacer la web casi imposible de usar.

Por eso lo contamos en la usabilidad móvil dentro de la velocidad, aunque el dato venga de la auditoría de accesibilidad de Lighthouse. Los 24 px son el mínimo: WCAG pide 44×44 px en su nivel más exigente (AAA), y las guías de diseño de Apple y Google recomiendan tamaños parecidos. Arreglarlo suele ser cuestión de CSS: más relleno y más separación, sin rediseñar nada.

Cómo lo comprueba Posiciona

Usamos la auditoría de tamaño de objetivos táctiles de Lighthouse 13 (target-size), que aplica el criterio 2.5.8 de WCAG 2.2 en la prueba móvil de PageSpeed Insights: cada objetivo debe medir al menos 24×24 píxeles o tener espacio libre alrededor. Si ninguno falla, la nota es 100; con hasta 3 elementos que fallan, 70; hasta 10, 50; y con más, 30. En el informe te mostramos ejemplos de los elementos afectados.

En la nota de Velocidad esta comprobación cuenta como “detalle” (peso 1 de 5).

Cómo solucionarlo

Revisa los ejemplos del informe: suelen repetirse los iconos de redes sociales, los enlaces del pie, los selectores de talla y color, los puntos de las presentaciones de diapositivas y los botones de cerrar.
Amplía el área táctil con padding en lugar de agrandar el icono: el dibujo puede seguir siendo pequeño si el enlace o botón que lo rodea mide al menos 24×24 px (mejor 44×44).
Separa los objetivos pequeños con margin o gap, sobre todo en listas de enlaces y menús.
En menús y listas, haz que el enlace ocupe toda la fila (display: block) y no solo el texto.
Los enlaces dentro de un párrafo de texto están exentos en WCAG: céntrate en botones, iconos y controles.
Comprueba el resultado en un móvil real, con el pulgar, además de volver a analizar la página.

CSS para ampliar el área táctilTexto

/* Iconos de la cabecera y de redes sociales */
.icono-enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Enlaces del pie en lista */
.footer a {
  display: inline-block;
  padding: 12px 0;
}

En WordPress

Añade las reglas en Apariencia → Personalizar → CSS adicional o, si usas un tema de bloques, en el CSS adicional de los estilos del editor del sitio, sin tocar los archivos del tema.
Los bloques Iconos sociales y Navegación tienen ajustes de tamaño y espaciado: súbelos antes de recurrir al CSS.

En Shopify

En Shopify, añade las reglas CSS desde Tienda online → Temas → Editar código, en el archivo CSS principal del tema (en muchos temas, base.css), o en el campo de CSS personalizado del editor del tema si tu tema lo permite.
Revisa sobre todo los selectores de variantes, los iconos de la cabecera (buscar, cuenta, carrito) y los enlaces del pie en la vista móvil del editor del tema.

Preguntas frecuentes

¿Qué tamaño deben tener los botones en móvil?

WCAG 2.2 fija como mínimo 24×24 píxeles CSS (criterio 2.5.8, nivel AA), o una separación que deje ese espacio libre alrededor. Es un mínimo: para botones importantes como “Añadir al carrito” o el menú, apunta a 44×44 px o más, que es lo que pide el nivel AAA de WCAG y lo que recomiendan las guías de diseño de Apple y Google.

¿Cuenta el tamaño del icono o el del área que se puede pulsar?

El del área que se puede pulsar, es decir, la caja del enlace o botón con su relleno. Un icono de 16 px dentro de un botón de 44 px cumple sin problema. Por eso la solución habitual es añadir padding o una altura mínima al elemento clicable, no agrandar el dibujo ni cambiar el diseño.