Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Barrierefreiheit
¿Qué tan grande debe ser un botón en un sitio web como mínimo?
Un botón debe tener al menos 24 por 24 píxeles — así lo requiere el criterio 2.5.8 "Tamaño de objetivo (Mínimo)" recién introducido con WCAG 2.2. Los objetivos más pequeños regularmente son fallados por personas con manos temblorosas o dedos anchos, especialmente en el teléfono. Excepto enlaces en texto corriente y objetivos pequeños con suficiente espacio libre a objetivos vecinos.
24 por 24 píxeles: el límite inferior para acertar
Un toque de dedo es menos preciso que un clic de ratón, y con temblor o destreza fina limitada, la dispersión aumenta. Si el objetivo es demasiado pequeño, el toque cae al lado — en el mejor caso no pasa nada, en el peor se abre el enlace vecino. Las zonas problemáticas típicas son barras de herramientas con iconos apretados, pequeñas cruces de cierre en ventanas de alerta y campos de fecha en calendarios. Los 24 por 24 píxeles son el límite inferior, no una medida de comodidad. El criterio prevé dos excepciones: los enlaces en texto corriente pueden seguir el tamaño del texto, y los objetivos pequeños están permitidos si hay suficiente espacio libre alrededor para que ningún objetivo vecino sea accidentalmente golpeado.
Así mide el servicio de comprobación los tamaños de objetivo
El servicio de comprobación mide los elementos de control visibles de la página — enlaces, botones, campos de formulario — en su tamaño realmente mostrado, hasta 300 objetivos por página. A cada objetivo demasiado pequeño aplica las excepciones del criterio: si está como enlace en texto corriente, no cuenta; si permanece un círculo suficiente alrededor de su centro libre de objetivos vecinos, tampoco cuenta. Si después de eso permanece al menos un objetivo bajo 24 por 24 píxeles, el criterio se considera violado — el informe nombra la cantidad, el primer elemento afectado y adjunta una captura de pantalla de evidencia. El tamaño de la muestra está como nota de medición en el informe.
Beispiele
Symbol-Links in einer Zeile
.symbol { width: 16px; height: 16px; margin: 0; }.symbol { width: 24px; height: 24px; }
/* oder: 16 px Symbol mit 8 px Abstand zum Nachbarn */Auf Stufe AA sind 24 × 24 CSS-Pixel die Grenze, oder ein Abstand, der einen 24-Pixel-Kreis um das Ziel frei hält. Links im Fließtext sind ausgenommen.
- Pruebe su sitio web en el teléfono con el pulgar: ¿golpea cada símbolo en el área de encabezado al primer intento?
- Aumentar la superficie de toque de símbolos pequeños a través del espaciado interno invisible — el símbolo puede verse pequeño, la superficie debe ser grande.
- Verifique las cruces de cierre de ventanas de alerta y banners de cookies — son entre los objetivos más pequeños frecuentes.
- Dejar suficiente espacio libre entre objetivos pequeños vecinos si la ampliación no es posible por razones de diseño.