Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Responsive
¿Cuál es el tamaño mínimo de los botones en un sitio web?
Los botones y enlaces deben tener al menos 24 por 24 píxeles —la regla WCAG 2.5.8 de accesibilidad lo exige. Superficies más pequeñas son difíciles de golpear con el dedo: Quien toca al lado en el móvil, aterrizará en el enlace incorrecto o abandonará. El servicio de comprobación mide cada superficie de control en cuatro tamaños de dispositivo y muestra ejemplos de superficies demasiado pequeñas con el tamaño medido.
Estas superficies cuentan como superficies de control
Se mide todo lo que los visitantes pueden hacer clic o tocar: botones, enlaces, campos de entrada y listas de selección. Los enlaces en el texto corrido están excluidos —su altura se determina por la línea de texto, que la norma también permite explícitamente. También excluidos están los elementos de ayuda invisibles de unos pocos píxeles de tamaño que algunos sitios web incorporan para lectores de pantalla o estadísticas; no son destinos para el dedo, y contarlos causaría falsas alarmas. Lo que queda son exactamente las superficies que una persona realmente debe golpear: el botón de pedido, el elemento de menú, el símbolo de búsqueda, el campo para la dirección de correo. Para cada una de estas superficies se aplica un límite inferior de 24 por 24 píxeles.
Así mide el servicio de comprobación el tamaño
La página se construye en cuatro tamaños de dispositivo en un navegador real: Smartphone con 390, Tablet con 768, Desktop con 1440 y Wide con 1920 píxeles de ancho. En cada tamaño, la comprobación mide el ancho y alto reales mostrados de cada superficie de control. Esto es decisivo, porque el mismo botón puede ser lo suficientemente grande en el escritorio y encogerse en el móvil. Cada hallazgo se realiza dos veces; solo se reporta lo que ambas mediciones ven consistentemente. El informe muestra hasta tres ejemplos con tamaño medido —por ejemplo, un botón con 18 por 18 píxeles— y una captura de pantalla de la zona afectada, para que la superficie sea encontrada sin búsqueda.
Lo que trae el tamaño mínimo a sus visitantes
Las superficies de control grandes ayudan primero a personas con temblores, destreza fina limitada o dedos más grandes. Pero ayudan a todos: en un tren en movimiento, con guantes, con el pulgar de la única mano libre. Quien golpea un botón al primer intento, permanece en flujo —quien toca al lado tres veces, abandona el sitio. Para una empresa, esto significa prácticamente: El botón „Solicitar oferta” se presiona más a menudo si es fácil de golpear. Los 24 píxeles son el límite inferior de la norma y no un valor ideal; muchos diseñadores eligen deliberadamente superficies mucho más grandes, especialmente para el botón más importante de una página.
- Toque los botones más importantes de su sitio web en el móvil con el pulgar y observe si los golpea al primer intento.
- Preste especial atención a símbolos pequeños: lupa, menú, auricular, flechas en galerías de imágenes.
- Pase los ejemplos del informe de comprobación a su agencia —allí está el tamaño medido de cada superficie demasiado pequeña.
- Deje que los botones nuevos se planifiquen desde el principio con al menos 24 por 24 píxeles.