Product Craft Bible
Accesibilidad Mobile
Inicio Accesibilidad Accesibilidad Mobile
Accesibilidad

Accesibilidad Mobile

4 reglas investigacion 2026
65

Accesibilidad Mobile

4 reglas
558

VoiceOver/TalkBack: toda accion etiquetada

VoiceOver en iOS y TalkBack en Android leen el aria-label de cada elemento interactivo. Iconos sin texto visible, botones con solo imagen y controles personalizados deben tener etiqueta explicita. El texto debe describir la accion, no el elemento: "Eliminar tarea Comprar cafe" no "boton de basura".

investigacion 2026
Preferir
Ajustes
Eliminar tarea
Editar perfil
Compartir enlace
VoiceOver anuncia:
"Eliminar tarea, button"
"Editar perfil, button"
"Compartir enlace, button"
Cada boton describe la accion y el elemento preciso
Evitar
Ajustes
Eliminar tarea
Editar perfil
Compartir enlace
VoiceOver anuncia:
"button" · "button" · "button"
"button" · "button" · "button"
"button" · "button" · "button"
9 botones identicos, imposible distinguir accion ni fila
559

Tipo dinamico: layouts que se adaptan

El tipo dinamico (Dynamic Type en iOS, Font Scale en Android) permite al usuario ajustar el tamano de fuente del sistema. Los layouts deben usar unidades relativas (rem, em) y contenedores flexibles para absorber texto 50-200% mas grande sin truncar ni romper el diseno. Nunca fijar alturas de elementos con texto.

investigacion 2026
Preferir
Tareas
Revisar propuesta de diseno
Hoy · Diseno
Llamar al cliente Pedro Garcia sobre el proyecto de rediseno
Manana · Clientes
Subir archivos al servidor de produccion
Jueves · DevOps
Layout adaptable, Dynamic Type 175%
min-height:60px deja que la card crezca; texto siempre completo
Evitar
Tareas
Revisar propuesta de diseno
Hoy · Diseno
Llamar al cliente Pedro Garcia sobre el pro...
Manana · Clientes
Subir archivos al servidor de produccion...
Jueves · DevOps
Texto truncado, Dynamic Type 175%
height:60px corta el contenido cuando el usuario aumenta la fuente del sistema
560

Switch control: orden predecible

Switch Control (iOS) y Access Switch (Android) permiten navegar la interfaz con un switch fisico en lugar de tocar la pantalla. El orden de enfoque debe ser logico (izquierda a derecha, arriba a abajo) y nunca saltar entre secciones sin relacion. Usar accessibilityActivate() y agrupar elementos relacionados con contenedores accesibles.

investigacion 2026
Preferir
Editar perfil
1
2
3
4-5
Evitar
Editar perfil
↑ enfoque 2
3
4
enfoque 1 ← PRIMERO!
561

Redundancia sensorial: haptico+visual+sonoro

Las notificaciones importantes deben comunicarse por al menos dos canales sensoriales para cubrir distintas condiciones de uso: haptico (el telefono vibra), visual (UI cambia de estado) y sonoro (tono de confirmacion). Sin redundancia, un usuario con audicion reducida pierde alertas sonoras, y uno en silencio pierde el sonido.

investigacion 2026
Preferir
Transferencia
Enviado
$2,400 a Ana Torres
Ref TXN-4829
Tres canales:
Haptico: 2 pulsos cortos
Visual: check verde + fondo tintado
Sonoro: tono ascendente 200ms
Evitar
Transferencia
$2,400 enviados a Ana Torres
Sin cambio visual, igual que antes
Solo canal activo:
Sonido (silenciado = sin confirmacion)