Título de la Pantalla

Qué Verificamos

Cada pantalla dentro de una aplicación debería tener un título único y descriptivo para ser anunciado por la tecnología asistiva.

Ejemplo Fallido ❌

screen title = {solo nombre de la aplicación}

TalkBack anuncia solo el nombre de la aplicación cuando la pantalla se abre
"ShopEase"

Ejemplo Exitoso ✅

screen title = "ShopEase, Carrito"

TalkBack anuncia el título descriptivo de la pantalla cuando se abre
"ShopEase, Carrito"

De un Vistazo

• Esta regla tiene un impacto moderado para los usuarios
• Cada pantalla necesita un título único y descriptivo — no solo el nombre de la aplicación
• Android Nativo: usa Activity.setTitle() para establecer el título de la pantalla
• React Native: añade options={{title: 'Screen Title'}} a cada Stack.Screen

Impacto para los Usuarios

Los títulos de pantalla permiten a los usuarios con discapacidades visuales, cognitivas y motoras y memoria a corto plazo limitada determinar dónde se encuentran en la aplicación, identificar el contenido de una pantalla por su título y navegar entre pantallas cuando el modo de operación del usuario depende del audio.

Cuando una pantalla no tiene título, TalkBack anuncia solo el nombre de la aplicación en cada pantalla. Esto hace imposible que los usuarios de tecnología asistiva distingan una pantalla de otra sin explorar el contenido completo.

Confirmar Problema de Título de Pantalla

1. Activar TalkBack
2. Abre la aplicación y navega hasta la pantalla
3. Ocurrirá una de las siguientes situaciones:
   • Inaccesible: TalkBack anuncia solo el nombre de la aplicación
   • Accesible: TalkBack anuncia el título específico de la pantalla en lugar del nombre de la aplicación

Corregir Problemas

Para resolver problemas de Título de Pantalla, establece un título único y descriptivo en cada pantalla para que la tecnología asistiva pueda anunciarlo cuando la pantalla se abra. Esto ayuda a los usuarios a orientarse sin necesidad de explorar todo el contenido de cada pantalla.

Android Nativo

Establece el título de la pantalla dentro de la Activity. El título debe describir el propósito o contenido de la pantalla.

Activity.this.setTitle("Settings");

React Native

Para resolver problemas de Título de Pantalla, intenta los siguientes enfoques:

1. Establece el título de la pantalla en las opciones de pantalla de React Navigation. Al usar React Navigation, establecer el título en la prop options de la pantalla actualiza el encabezado nativo. En Android, esto se corresponde con el título de Activity/Fragment y activa un evento de accesibilidad TYPE_WINDOW_STATE_CHANGED que TalkBack anuncia automáticamente. Esto se puede establecer de manera estática o dinámica en función de los parámetros de la ruta.
2. Usa navigation.setOptions() desde dentro de la pantalla si el título necesita ser establecido o actualizado después de de que la pantalla se monte. Llamar a setOptions con un valor de título dentro del componente de pantalla también actualiza el título del encabezado nativo y activa un anuncio de TalkBack.
3. Usa AccessibilityInfo.announceForAccessibility() si los enfoques anteriores no activan el anuncio de TalkBack. Combinar announceForAccessibility con el gancho useFocusEffect de React Navigation asegura que el anuncio se dispare cada vez que el usuario navegue a esa pantalla.
4. Como último recurso, establece el título nativo de Activity mediante un módulo nativo. Si el encabezado de React Navigation no está activando el anuncio, puedes conectarte a la capa nativa de Android y llamar a activity.setTitle() directamente, lo cual dispara el evento TYPE_WINDOW_STATE_CHANGED que escucha TalkBack.

Barras de Navegación Personalizadas

Para una experiencia verdaderamente accesible en aplicaciones construidas con React Native, el encabezado de navegación debe usar <Stack.Navigator> con una opción title. Una barra de navegación personalizada no tiene forma de ser programada para indicar que es un elemento de navegación adecuado y no solo una vista regular. Esto altera cómo la tecnología asistiva anuncia e interactúa con el elemento. Nota que establecer un atributo header, como a menudo se recomienda, no satisface los criterios para Título de Pantalla.

<Stack.Navigator>
      <Stack.Screen
          name="CartScreen"
          component={CartScreen}
          options={{title: 'Cart'}}
      />
</Stack.Navigator>

¿Puedo Ignorar Esta Regla?

El Título de Pantalla tiene un impacto moderado para los usuarios, y recomendamos establecer un título descriptivo en cada pantalla. Aunque no bloquea el acceso al contenido, degrada significativamente la navegación para los usuarios de lectores de pantalla. En casos raros, como en una aplicación de una sola pantalla donde el nombre de la aplicación identifica claramente la pantalla, puedes considerar ignorar la regla. Aprende más sobre ignorando reglas.

Preguntas Frecuentes

¿Hay alguna limitación conocida con esta regla?
Sí. Las aplicaciones de Flutter fallan universalmente en la regla de Título de Pantalla porque Flutter expone AppBar.title como un elemento de encabezado en el árbol semántico en lugar de mapearlo al título nativo de la pantalla, Activity.setTitle. Esto resulta en fallas no accionables para los desarrolladores.
Los lectores de pantalla nunca anuncian el título automáticamente al navegar; los usuarios deben enfocar manualmente la AppBar para escucharlo. Esto afecta a todas las aplicaciones de Flutter y causa fallas de Título de Pantalla (WCAG 2.4.2) independientemente de si un AppBar.title descriptivo está presente.

Recursos

Páginas del Curso de Deque University

• Estructura Semántica y Navegación (WCAG 2.1) - Tutorial en Video
• Criterio de Éxito 2.4.2 - Página Titulada
• Requisitos - 2.4.2.a Títulos en Páginas

Nota: El acceso completo a los recursos de Deque University requiere una suscripción.

Otros recursos

• Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0, Recomendación del W3C
  • 2.4.2 Página Titulada - Nivel A
• Documentos de Comprensión de WCAG 2.0
  • Comprendiendo SC 2.4.2 - Página Titulada (Nivel A)