Título da Tela

O que Verificamos

Toda tela em uma aplicação deve fornecer um título exclusivo e descritivo para ser anunciado por tecnologia assistiva.

Exemplo de Falha ❌

screen title = {somente nome do app}

VoiceOver anuncia apenas o nome do app quando a tela é aberta
"ShopEase"

Exemplo de Sucesso ✅

screen title = "ShopEase, Carrinho"

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

Resumo

• 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 da aplicação
• UIKit: defina navigationController?.title ou a propriedade title no ViewController
• SwiftUI: adicione um modificador .navigationTitle() ao corpo da visão
• 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 com memória de curto prazo limitada, determinem onde estão na aplicação, identifiquem o conteúdo de uma tela pelo título e naveguem entre telas quando o modo de operação do usuário depende de áudio.

Quando uma tela não tem título, o VoiceOver não anunciará um título de tela ao navegar para essa tela. Isso torna impossível para usuários de tecnologia assistiva distinguirem uma tela de outra sem explorar o conteúdo completo.

Confirmar Problema de Título de Tela

1. Ativar o VoiceOver
2. Navegar até a tela no app
3. Uma das seguintes opções acontecerá:
   • Inacessível: o VoiceOver não anunciará um título de tela
   • Acessível: o VoiceOver anunciará o título da tela

Corrigir Problemas

Para resolver problemas de Título de 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.

UIKit

Encontre o ViewController que está falhando a regra e defina a propriedade do título do navigationController.

navigationController?.title = "Screen Title Here"

Alternativamente, você pode definir a propriedade title no ViewController diretamente.

title = "Screen Title Here"

SwiftUI

Adicione um modificador de vista .navigationTitle ao final do último elemento dentro da propriedade body da vista.

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

React Native

Certifique-se de que cada componente Stack.Screen tenha um nome descritivo. Adicione options={{title: 'Screen Title'}} para definir um título de tela significativo.

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

Barras de Navegação Personalizadas

Para uma experiência verdadeiramente acessível em aplicações construídas com React Native, o cabeçalho de navegação deve usar <Stack.Navigator> com uma opção de 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 visão regular. Isso altera como a tecnologia assistiva anuncia e interage com o elemento. Observe que definir um atributo header, como muitas vezes recomendado, não satisfaz os critérios para Título de Tela.

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

Posso Ignorar Esta Regra?

Título de Tela tem um impacto moderado para os usuários, e recomendamos definir um título descritivo em cada tela. Em casos raros — como um app de tela única em que o próprio nome da aplicação 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. Apps Flutter falham universalmente na regra de Título de Tela porque o Flutter expõe AppBar.title como um elemento de título no árvore semântica, ao invés de mapeá-lo para o título nativo da tela, UIViewController.title. Isso resulta em falhas inatingíveis para desenvolvedores.
Leitores de tela nunca anunciam o título automaticamente 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 de Tela (WCAG 2.4.2) independentemente de um AppBar.title descritivo estar presente.

Recursos

Páginas do Curso da Deque University

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

Nota: O acesso completo aos recursos da 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 Titulada - Nível A
• Documentos de Entendimento WCAG 2.0
  • Entendendo SC 2.4.2 - Página Titulada (Nível A)