El tamaño de los botones de la web de tu despacho decide si un cliente que te busca desde el móvil consigue llamar a la primera o abandona tras dos toques fallidos. WCAG 2.2, el estándar de accesibilidad web, fijó en octubre de 2023 un número concreto a algo que antes se dejaba al criterio de cada diseñador: 24 píxeles CSS como mínimo para cualquier botón, enlace o icono con el que se interactúa con el dedo. Afecta igual al botón de llamada, al menú móvil y al acordeón de la FAQ.
WCAG 2.2 exige que cualquier botón, enlace o icono pulsable mida al menos 24 por 24 píxeles CSS, con cinco excepciones muy concretas: espaciado suficiente, alternativa equivalente, texto en línea, control nativo del navegador o elemento esencial. Por debajo de esa medida, un dedo adulto falla el objetivo con facilidad, y el botón que más se nota es el de llamada en el móvil.
El tamaño de los botones que exige WCAG 2.2
La versión 2.2 de las Pautas de Accesibilidad para el Contenido Web, publicada por el W3C, incorporó un criterio que no existía antes: el 2.5.8, «Tamaño del objetivo (mínimo)». Exige que cualquier elemento pulsable con el dedo o con un puntero —botón, enlace, casilla, icono— tenga como mínimo 24 por 24 píxeles CSS, medidos sobre el área completa que activa la acción, no solo sobre el icono visible. Es un criterio de nivel AA, el mismo que persigue cualquier auditoría de accesibilidad seria.
La intención, según la propia documentación del W3C, es evitar que un usuario active por error el control de al lado: afecta sobre todo a personas con temblor en las manos, con movilidad reducida o que usan el móvil con una sola mano mientras caminan. En la web de un despacho, ese usuario con prisa suele ser el que más interesa: el que busca el teléfono desde fuera de la oficina.
Las cinco excepciones que libran a un botón pequeño
No todo lo que mide menos de 24 píxeles incumple el criterio. El W3C recoge cinco excepciones y cuatro aparecen a diario en una web jurídica. La de espaciado libra a un icono pequeño si queda rodeado de suficiente aire para que un círculo de 24 píxeles centrado en él no toque al vecino: el caso típico de los iconos de redes sociales del pie, casi siempre bien separados. La de alternativa equivalente permite una «x» diminuta para cerrar el banner de cookies si al lado existe un botón de «Rechazar» de tamaño normal que hace lo mismo. La de texto en línea cubre un enlace suelto dentro de un párrafo legal. La de control del navegador excluye los widgets que renderiza el propio sistema, como un selector de fecha. Y la de elemento esencial cubre los casos en que agrandar el objetivo rompería la información, como las chinchetas de un mapa con varias sedes.
Cómo se mide un objetivo táctil con el inspector del navegador
No hace falta saber programar para comprobarlo. Basta abrir las herramientas de desarrollo del navegador (clic derecho, «Inspeccionar»), seleccionar el botón y mirar el recuadro del panel de estilos: ahí aparece el ancho y el alto reales, incluido el relleno (padding), que es lo que cuenta para el criterio 2.5.8, no el tamaño del icono dibujado dentro. Un botón de llamada con un auricular de 16 por 16 píxeles y sin relleno incumple la norma aunque se vea nítido; el mismo icono con 4 píxeles de relleno en cada lado ya suma los 24 por 24 exigidos, sin tocar el diseño visual. El modo de dispositivo móvil del propio navegador sirve además para repetir la prueba con el tamaño de pantalla real desde el que llega la mayoría del tráfico de un despacho.
Google pide el doble de tamaño legal
Un objetivo táctil (o tap target) es el área completa sobre la que un dedo puede pulsar para activar un botón, enlace o icono: no es solo el dibujo que se ve, sino todo el espacio clicable que lo rodea, incluido el relleno.
El mínimo de 24 píxeles de WCAG 2.2 es un suelo legal, no una recomendación de diseño. La propia guía de objetivos táctiles accesibles de Google pide prácticamente el doble: alrededor de 48 píxeles independientes del dispositivo, medida que corresponde a los 9 milímetros que ocupa la yema de un dedo adulto, con al menos 8 píxeles de separación entre un botón y el siguiente. WCAG marca el punto a partir del cual un objetivo deja de ser discriminatorio; Google mide el punto a partir del cual deja de generar fallos de pulsación, un listón más alto.
Esa segunda métrica importa porque el LCP y el resto de Core Web Vitals miden la velocidad de carga, pero no corrigen el coste de un dedo que falla tres veces el botón de llamada: cada toque fallido es una interacción que el visitante vive como una web que no responde, aunque cargue rápido.
Dónde suele fallar el tamaño en tu despacho
El patrón se repite en casi cualquier web jurídica sin revisar con esta regla en la mano: los textos y las imágenes se cuidan, pero los botones de acción se dejan al tamaño por defecto que trae la plantilla o el tema de WordPress. El formulario de contacto suele ser el primer sitio donde se nota: el botón de «Enviar» comparte el mismo tamaño pequeño que el resto de los campos, y en el móvil queda apretado junto al pie de página, con el margen de error que eso supone para alguien que escribe con el dedo de camino a una cita.
El botón de llamada en el móvil, el primero que falla
Es, además, el que más duele: un despacho que invierte en que su número de teléfono aparezca fijo en la cabecera del móvil pierde parte de esa inversión si el botón es solo el icono de un auricular de 18 o 20 píxeles, sin relleno alrededor, pegado al logo o al icono del menú. El usuario que llega buscando un abogado con intención de llamar ya, no de leer, es justo el que menos tolera un segundo intento. Ensanchar ese botón —aunque sea solo con relleno invisible, sin tocar el icono— es el cambio de más impacto por minuto de trabajo de toda esta lista: no requiere rediseñar nada, solo ampliar el área que responde al toque.
El menú móvil y el acordeón de preguntas frecuentes también cuentan
El icono de las tres rayas que abre el menú en el móvil y las flechas que despliegan cada pregunta de un bloque de FAQ comparten el mismo defecto: suelen dibujarse pequeños porque visualmente pesan menos, y ese criterio estético es justo el que incumple la pauta. Un acordeón con flechas de 14 píxeles obliga a acertar varias veces seguidas para leer las cuatro o cinco respuestas, y cada fallo es una razón más para cerrar la pestaña. La solución no cambia el tamaño visible del icono: se amplía el área clicable del elemento que lo contiene, normalmente con unas líneas de CSS sobre el propio tema, sin tocar la plantilla completa.
Qué revisar antes de perder un cliente
La revisión no exige rehacer la web, y por eso conviene hacerla antes de plantearse un rediseño completo. Los puntos que más rentan, de más a menos frecuente:
- El botón de llamada de la cabecera y el que se queda fijo al hacer scroll en el móvil.
- El botón de «Enviar» del formulario de contacto, comparado con el resto de campos.
- Los botones de «Aceptar» y «Rechazar» del banner de cookies, sobre todo si uno se diseñó más pequeño a propósito.
- El icono del menú móvil y las flechas del acordeón de la FAQ.
- La separación entre los iconos de redes sociales del pie, para no depender solo de la excepción de espaciado.
Todo se corrige casi siempre con un cambio de relleno en CSS, sin tocar el icono ni la maqueta: de los ajustes de accesibilidad más baratos de aplicar.
Preguntas frecuentes sobre el tamaño de los botones
¿Qué tamaño mínimo exige la ley para los botones de una web?
El estándar WCAG 2.2, la referencia técnica que usa cualquier ley de accesibilidad web, fija 24 por 24 píxeles CSS como mínimo para cualquier botón, enlace o icono pulsable, con cinco excepciones concretas como el espaciado suficiente o la existencia de una alternativa del mismo tamaño que cumple la misma función.
¿Qué pasa si los botones de mi despacho son más pequeños?
No hay sanción automática para la mayoría de despachos, porque esta norma se dirige primero al sector público y a ciertos servicios privados concretos. El coste real es otro: cada toque fallido en el botón de llamada o en el formulario es una visita que se va a otro despacho sin dejar sus datos.
¿Cómo compruebo el tamaño de un botón sin saber programar?
Con el inspector del navegador: clic derecho sobre el botón, «Inspeccionar» y mirar el recuadro de tamaño en el panel de estilos, que muestra el ancho y el alto reales incluido el relleno. Si el resultado baja de 24 por 24 píxeles, el botón incumple el criterio.
¿El tamaño de los botones afecta al posicionamiento de mi web?
No es un factor de ranking directo, pero sí influye en señales que Google sí observa: un dedo que falla el botón genera más retrocesos y sesiones más cortas, y eso se nota en el comportamiento de los usuarios que miden los Core Web Vitals de interactividad.
Fuente: W3C — WCAG 2.2, Success Criterion 2.5.8 Target Size (Minimum)