Título de Pantalla

Qué Verificamos

Cada pantalla dentro de una aplicación debe proporcionar un título único y descriptivo para que sea anunciado por la tecnología de asistencia.

Ejemplo Fallido ❌

screen title = {solo nombre de la app}

VoiceOver anuncia solo el nombre de la app cuando se abre la pantalla
"ShopEase"

Ejemplo Aprobado ✅

screen title = "ShopEase, Carrito"

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

En Resumen

• 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
• UIKit: establezca navigationController?.title o la propiedad title en el ViewController
• SwiftUI: agregue un modificador .navigationTitle() al cuerpo de la vista
• React Native: agregue 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, motoras y con 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 de un usuario depende del audio.

Cuando una pantalla no tiene título, VoiceOver no anunciará un título de pantalla al navegar a esa pantalla. Esto hace que sea imposible para los usuarios de tecnología de asistencia distinguir una pantalla de otra sin explorar el contenido completo.

Confirmar Problema de Título de Pantalla

1. Encienda VoiceOver
2. Navegue a la pantalla en la aplicación
3. Ocurrirá una de las siguientes:
   • Inaccesible: VoiceOver no anunciará un título de pantalla
   • Accesible: VoiceOver anunciará el título de la pantalla

Solucionar Problemas

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

UIKit

Encuentre el ViewController que está fallando en la regla y establezca la propiedad de título del navigationController.

navigationController?.title = "Screen Title Here"

Alternativamente, puede establecer la propiedad title directamente en el ViewController.

title = "Screen Title Here"

SwiftUI

Agregue un modificador de vista .navigationTitle al final del último elemento dentro de la propiedad body de la vista.

var body: some View {
    VStack {
        Text("Below is a stepper in SwiftUI")
        StepperView()
    }.navigationTitle("Screen Title")
}

React Native

Asegúrese de que cada componente Stack.Screen tenga un nombre descriptivo. Agregue options={{title: 'Screen Title'}} para definir un título de pantalla significativo.

<Stack.Screen
    name="SettingsScreen"
    component={SettingsScreen}
    options={{title: 'Settings'}}
/>

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 de manera que indique que es un elemento de navegación adecuado y no solo una vista regular. Esto altera cómo la tecnología de asistencia anuncia e interactúa con el elemento. Tenga en cuenta 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. En casos raros — como una aplicación de una sola pantalla donde el nombre de la aplicación por sí mismo identifica claramente la pantalla — puede considerar ignorar la regla. Aprenda más sobre ignorando reglas.

Preguntas Frecuentes

¿Existen limitaciones conocidas con esta regla?
Sí. Las aplicaciones de Flutter fallan universalmente 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 de pantalla nativo, UIViewController.title. Esto resulta en fallos inaccionables 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 provoca fallos en Título de Pantalla (WCAG 2.4.2) independientemente de si hay un AppBar.title descriptivo presente.

Recursos

Páginas de Cursos de Deque University

• Estructura Semántica y Navegación (WCAG 2.1) - Video Tutorial
• 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 al Contenido Web (WCAG) 2.0, Recomendación del W3C
  • 2.4.2 Página Titulada - Nivel A
• Comprender los Documentos de WCAG 2.0
  • Comprensión del SC 2.4.2 - Página Titulada (Nivel A)