Accesibilidad en Aplicaciones Móviles - Guía Completa con Ejemplos

[La teoría de la accesibilidad es hermosa, pero lo que los desarrolladores y diseñadores realmente necesitan son ejemplos. Ver cómo funciona el código, cómo se comporta la interfaz y dónde las empresas cometen errores (y hacen las cosas bien) es la mejor manera de aprender.

En esta guía práctica saldremos del campo de las ideas y profundizaremos en ejemplos reales de implementación de accesibilidad en aplicaciones móviles (iOS y Android), analizando patrones de UI y mostrando cómo hacerlos inclusivos.

Ejemplo 1: El botón "fantasma" (botones de iconos)

¿Conoces ese ícono de lupa en la esquina de la pantalla para buscar algo? ¿O el ícono de ajustes para la configuración? Para un usuario vidente, el icono es suficiente. Para un usuario ciego que usa un lector de pantalla (VoiceOver/TalkBack), si ese botón no tiene una etiqueta (etiqueta), solo escuchará: "Botón".

"Botón" no dice nada. ¿Botón qué? ¿Para eliminar la cuenta? ¿Comprar?

El camino equivocado (inaccesible)

<!-- Android Layout -->
<ImageButton
    android:id="@+id/btn_settings"
    android:src="@drawable/ic_gear"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

El lector de pantalla leerá el nombre de la clase o simplemente el "botón sin etiqueta".

El camino correcto (accesible)

<!-- Android Layout -->
<ImageButton
    android:id="@+id/btn_settings"
    android:src="@drawable/ic_gear"
    android:contentDescription="@string/settings_button_description"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

En iOS (SwiftUI):

// Acessível
Button(action: openSettings) {
    Image(systemName: "gear")
}
.accessibilityLabel("Configurações")

Resultado: el usuario escuchará "Configuración, botón". Sencillo pero imprescindible.

Ejemplo 2: Comentarios de error en formularios

Completa un formulario, hace clic en "Enviar" y no sucede nada. El campo de contraseña se volvió rojo, pero no lo viste porque eres daltónico (Protanopia).

Regla de oro: Nunca uses solo color para transmitir información.

El camino correcto

Además de hacer que el borde sea rojo, agregue un ícono de alerta y un mensaje de texto explicativo debajo del campo.

❌ Malo: Borde rojo.
✅ Bueno: Borde rojo + Icono ⚠️ + Texto "La contraseña debe tener 8 caracteres".

Además, para los lectores de pantalla, el foco debe ir al campo de error o se debe anunciar el error.

// Android: Anunciar erro para TalkBack
passwordInputLayout.error = "Senha muito curta"
passwordInputLayout.announceForAccessibility("Erro: Senha muito curta")

Ejemplo 3: objetivos táctiles

¿Alguna vez intentó hacer clic en esa pequeña "x" para cerrar un anuncio y terminó haciendo clic en el anuncio? Esto es frustrante para todos, pero imposible para quienes tienen temblores en las manos (Parkinson, por ejemplo).

Las pautas WCAG y Apple/Google recomiendan un área táctil mínima de 44x44 dp (iOS) o 48x48 dp (Android).

Consejo de implementación: No es necesario agrandar visualmente el icono. Sólo puedes aumentar el relleno invisible a su alrededor.

/* CSS (React Native / Web App) */
.close-button {
  width: 20px;   /* Ícone visual pequeno */
  height: 20px;
  padding: 12px; /* Área de toque grande */
  box-sizing: content-box; /* Garante que o padding some ao tamanho */
}

Ejemplo 4: Imágenes decorativas versus información

No todas las imágenes necesitan una descripción. Si describe todo, contaminará la experiencia auditiva del usuario.

Imagen informativa: Una foto de un producto que estás vendiendo.
- Acción: alt="Tênis de corrida azul com solado branco".
Imagen decorativa: un icono de flecha junto al texto "Leer más" o una onda gráfica en la parte inferior del encabezado.
- Acción: Ocultar del lector de pantalla.

En aleteo:

// Imagem Decorativa (Invisível para Semântica)
ExcludeSemantics(
  child: Image.asset('background_wave.png'),
)

// Imagem Informativa
Semantics(
  label: 'Logo da Empresa',
  image: true,
  child: Image.asset('logo.png'),
)

Ejemplo 5: Estado de carga

El usuario hace clic en "Pagar". La pantalla se congela. Aparece una ruleta girando. Para cualquiera que lo vea, está claro: "Se está cargando". Para quienes no lo ven, el silencio es angustioso. "¿Se bloqueó? ¿La aplicación se cerró? ¿Se me cayó Internet?"

Proporcione siempre retroalimentación auditiva para los estados de carga.

Android: Utilice ProgressBar con android:stateDescription="Carregando pagamento...".
iOS: Utilice UIAccessibility.post(notification: .announcement, argument: "Processando pagamento, aguarde.").

Conclusión

La accesibilidad no se trata de memorizar reglas abstractas. Se trata de comprender cómo el código se traduce en experiencia para diferentes humanos.

Al aplicar estos estándares (etiquetas de botones, colores redundantes, áreas táctiles generosas, semántica correcta y retroalimentación de estado), resuelve el 90 % de las barreras que impiden que las personas usen su aplicación.

El mejor código no es el más complejo. Es el que funciona para el mayor número de personas.