Botones grandes en el móvil: qué dicen realmente las reglas de accesibilidad
WCAG 2.2 no dice simplemente «haga botones grandes». El criterio AA de tamaño mínimo considera un objetivo de al menos 24×24 píxeles CSS o, en condiciones definidas, espacio alrededor de uno menor. El criterio AAA mejorado usa 44×44. Son umbrales técnicos, no garantía de que toda persona pulse sin errores.
Mida el área activa, no solo el dibujo visible
El objetivo es la región que acepta un toque u otra entrada de puntero. Un icono pequeño puede tener área activa mayor; una tarjeta grande puede contener una parte accionable pequeña. Se mide en píxeles CSS, distintos de los píxeles físicos.
Zoom, tamaño del dedo y diagonal del móvil no crean conformidad automáticamente. Revise el área efectiva en cada estado, incluidos menús, superposiciones y orientaciones.
Mínimo AA: 24×24 píxeles CSS o separación cualificada
WCAG 2.2 SC 2.5.8 exige al menos 24×24 píxeles CSS. Un objetivo menor solo usa la excepción de separación cuando círculos imaginarios de 24 píxeles CSS centrados en los objetivos pequeños no cortan otros objetivos ni sus círculos.
Otras excepciones cubren control equivalente, enlaces en línea, tamaño del agente de usuario y presentación esencial o legalmente requerida. Superar por excepción no implica comodidad; W3C recomienda alcanzar la dimensión mínima como buena práctica.
AAA eleva la referencia a 44×44
SC 2.5.5 Target Size (Enhanced) suele exigir 44×44 píxeles CSS y tiene sus excepciones. Es un criterio AAA más exigente, no el mínimo AA ni una cifra universal.
Puede ser una meta útil para una acción importante. Pero área, etiqueta y espacio no bastan con acciones confusas, diseño cambiante, confirmación poco clara u otro método de entrada.
Tamaño, distancia y cancelación trabajan juntos
La distancia reduce activaciones vecinas con temblor, movimiento del vehículo, uso a una mano o menor precisión. Son necesidades y condiciones posibles, no diagnósticos que deducir de un error.
SC 2.5.2 Pointer Cancellation trata el momento de activación: muchas acciones deben completarse al soltar y permitir cancelar o deshacer, con excepciones. En señales importantes revise también confirmación comprensible y recuperación.
Matriz: conformidad y experiencia
La columna práctica requiere el producto real y no sustituye una auditoría WCAG.
| Aspecto | Regla o umbral | Comprobación práctica |
|---|---|---|
| Área activa | Objetivo real, no solo icono | ¿Responde toda el área esperada? |
| Mínimo AA | 24×24 CSS px | ¿Sigue siendo fácil alcanzarlo? |
| Separación | Círculos de 24 px no se cortan | ¿Se toca el vecino por error? |
| AAA mejorado | 44×44 CSS px | ¿Conviene a la acción principal? |
| Etiquetas | No lo resuelve el tamaño | ¿Significado y resultado se distinguen? |
| Activación | Considerar Pointer Cancellation | ¿Puede cancelarse antes de soltar? |
| Confirmación | Depende de riesgo y flujo | ¿Evita errores sin bloquear? |
| Adaptación | Texto y sistema cambian | ¿Resiste zoom, giro y texto grande? |
| Entrada | El tacto es un método | ¿Funciona con tecnología de apoyo? |
| Contexto | WCAG no predice a la persona | ¿Probado con usuarios y dispositivos pertinentes? |
Aplicar WCAG a una app nativa con prudencia
WCAG es un estándar de contenido web. WCAG2ICT explica cómo trasladar principios y criterios a software y documentos no web, pero por sí solo no declara conforme toda app o ley. Revise el contexto contractual y jurídico aplicable.
En My Safe Circle examine las acciones principales en el dispositivo real junto con etiquetas, confirmaciones, destinatarios y reserva. La app facilita comunicación con personas de confianza; no detecta sucesos automáticamente, no llama a emergencias ni garantiza entrega o actuación.
- ¿Área activa medida en CSS px o equivalente adecuado?
- ¿Objetivos pequeños revisados con la regla de separación?
- ¿Excepciones documentadas sin llamarlas buena UX?
- ¿Activación accidental, cancelación y confirmación probadas?
- ¿Usuarios, dispositivos, zoom y entradas pertinentes incluidos?
Preguntas frecuentes
¿24×24 píxeles CSS significa botón accesible?
Significa que puede cumplir el umbral dimensional AA si se satisfacen los demás requisitos. No demuestra lectura, comprensión o facilidad para toda persona.
¿44×44 es obligatorio para WCAG 2.2 AA?
No. 44×44 corresponde al criterio mejorado 2.5.5 de nivel AAA; el mínimo 2.5.8 de nivel AA usa 24×24 con excepciones definidas.
¿Un botón mayor elimina toques accidentales?
No. Puede ayudar, pero cuentan separación, acciones vecinas, activación, confirmación, postura, dispositivo y variabilidad individual.
Fuentes consultadas
La información técnica y de seguridad se ha comprobado en las siguientes fuentes oficiales.
- W3C — Target Size (Minimum), SC 2.5.8
- W3C — Target Size (Enhanced), SC 2.5.5
- W3C — Pointer Cancellation, SC 2.5.2
- W3C — WCAG2ICT para software no web
- W3C — personas mayores y accesibilidad
- My Safe Circle — funciones y límites
Transparencia editorial: esta guía la publica el equipo de My Safe Circle. Describe criterios W3C y límites del producto sin afirmar que la interfaz sirva para todas las personas o cumpla un régimen jurídico concreto.
MIDA Y OBSERVE
Use el umbral como base y pruebe la experiencia.
Revise área activa, distancia, errores y métodos de entrada.
Descubre My Safe CircleInformación general, no certificación de conformidad ni asesoramiento jurídico o médico. Necesidades y precisión varían; un umbral técnico no garantiza uso sin errores.