Título da Tela

O que Verificamos

Cada tela dentro de um aplicativo deve fornecer um título único e descritivo para ser anunciado pela tecnologia assistiva.

Exemplo de Falha ❌

screen title = {apenas o nome do aplicativo}

TalkBack anuncia apenas o nome do aplicativo quando a tela é aberta
"ShopEase"

Exemplo de Aprovação ✅

screen title = "ShopEase, Carrinho"

TalkBack anuncia o título descritivo da tela quando a tela é aberta
"ShopEase, Carrinho"

Visão Geral

• Esta regra tem um impacto moderado para os usuários
• Cada tela precisa de um título único e descritivo — não apenas o nome do aplicativo
• Android nativo: use Activity.setTitle() para definir o título da tela
• React Native: adicione options={{title: 'Screen Title'}} a cada Stack.Screen

Impacto para os Usuários

Títulos de tela permitem que usuários com deficiências visuais, cognitivas e motoras e memória de curto prazo limitada determinem onde estão no aplicativo, identifiquem o conteúdo de uma tela pelo seu título e naveguem entre as telas quando o modo de operação do usuário depende de áudio.

Quando uma tela não tem título, o TalkBack anuncia apenas o nome do aplicativo em cada tela. Isso torna impossível para os usuários de tecnologia assistiva distinguirem uma tela da outra sem explorar o conteúdo completo.

Confirme o Problema do Título da Tela

1. Ative o TalkBack
2. Abra o aplicativo e navegue até a tela
3. Um dos seguintes cenários ocorrerá:
   • Inacessível: o TalkBack anuncia apenas o nome do aplicativo
   • Acessível: o TalkBack anuncia o título específico da tela em vez do nome do aplicativo

Corrigir Problemas

Para resolver problemas de Título da Tela, defina um título único e descritivo em cada tela para que a tecnologia assistiva possa anunciá-lo quando a tela for aberta. Isso ajuda os usuários a se orientarem sem precisar explorar o conteúdo completo de cada tela.

Android Nativo

Defina o título da tela dentro do Activity. O título deve descrever o propósito ou conteúdo da tela.

Activity.this.setTitle("Settings");

React Native

Para resolver problemas de Título da Tela, experimente as seguintes abordagens:

1. Defina o título da tela nas opções de tela do React Navigation. Ao usar o React Navigation, definir o título na propriedade options da tela atualiza o cabeçalho nativo. No Android, isso mapeia para o título da Activity/Fragment e aciona um evento de acessibilidade TYPE_WINDOW_STATE_CHANGED que o TalkBack anuncia automaticamente. Isso pode ser definido de forma estática ou dinâmica com base nos parâmetros de rota.
2. Use navigation.setOptions() de dentro da tela se o título precisar ser definido ou atualizado depois o componente da tela for montado. Chamar setOptions com um valor de título dentro do componente da tela também atualiza o título do cabeçalho nativo e aciona um anúncio do TalkBack.
3. Use AccessibilityInfo.announceForAccessibility() se as abordagens anteriores não acionarem o anúncio do TalkBack. Combinar announceForAccessibility com o gancho useFocusEffect do React Navigation garante que o anúncio seja acionado sempre que o usuário navega para essa tela.
4. Como último recurso, defina o título nativo da Activity por meio de um módulo nativo. Se o cabeçalho do React Navigation não estiver acionando o anúncio, você pode fazer a ponte para a camada nativa do Android e chamar activity.setTitle() diretamente, o que dispara o evento TYPE_WINDOW_STATE_CHANGED que o TalkBack escuta.

Barras de Navegação Personalizadas

Para uma experiência verdadeiramente acessível em aplicativos construídos com React Native, o cabeçalho de navegação deve usar <Stack.Navigator> com uma opção title. Uma barra de navegação personalizada não tem como ser programada para indicar que é um elemento de navegação adequado e não apenas uma visualização regular. Isso altera como a tecnologia assistiva anuncia e interage com o elemento. Note que definir um atributo header, como frequentemente recomendado, não satisfaz os critérios para o Título da Tela.

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

Posso Ignorar Esta Regra?

O Título da Tela tem um Impacto moderado para os usuários, e recomendamos definir um título descritivo em cada tela. Embora não bloqueie o acesso ao conteúdo, degrada significativamente a navegação para usuários de leitores de tela. Em casos raros - como um aplicativo de tela única onde o nome do aplicativo identifica claramente a tela - você pode considerar ignorar a regra. Saiba mais sobre ignorando regras.

Perguntas Frequentes

Existem limitações conhecidas com esta regra?
Sim. Aplicativos Flutter falham universalmente na regra do Título da Tela porque o Flutter expõe AppBar.title como um elemento de cabeçalho na árvore de semântica em vez de mapeá-lo para o título nativo da tela, Activity.setTitle. Isso resulta em falhas inacessíveis para desenvolvedores.
Leitores de tela nunca anunciam automaticamente o título na navegação; os usuários devem focar manualmente na AppBar para ouvi-lo. Isso afeta todos os aplicativos Flutter e causa falhas no Título da Tela (WCAG 2.4.2) independentemente de um AppBar.title descritivo estar presente.

Recursos

Páginas do Curso Deque University

• Estrutura Semântica e Navegação (WCAG 2.1) - Tutorial em Vídeo
• Critério de Sucesso 2.4.2 - Página Com Título
• Requisitos - 2.4.2.a Títulos nas Páginas

Nota: O acesso total aos recursos do Deque University requer uma assinatura.

Outros Recursos

• Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0, Recomendação W3C
  • 2.4.2 Página Com Título - Nível A
• Documentos de Compreensão WCAG 2.0
  • Compreendendo SC 2.4.2 - Página Com Título (Nível A)