Título da Tela

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

WCAG 2.0 - 2.4.2 Moderate Impact - Moderate

Cada tela dentro de um aplicativo deve fornecer um título para ser anunciado por tecnologia assistiva.

Impacto

Os 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 no aplicativo, identifiquem o conteúdo de uma tela pelo seu título e naveguem entre telas em casos em que o modo de operação de um usuário dependa do áudio.

Confirmação

  1. Vá para uma nova tela no aplicativo
  2. 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

Como Corrigir

Esse problema ocorre quando uma tela não recebe um título.

UIKit

No código:

Encontre o ViewController que está falhando na regra e defina a propriedade title do Navigation Controller.

navigationController?.title = "Screen Title Here"

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

title = "Screen Title Here"

SwiftUI

Adicione um modificador de visualização .navigationTitle ao final do último elemento dentro da propriedade body da visualização.

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

React Native

Certifique-se de que cada Stack.Screen componente tenha um nome descritivo. Se necessário, adicione options={{title: 'New Screen Title'}} para definir um melhor título de tela.

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

Barras de Navegação Personalizadas

O que encontramos em aplicativos construídos com React Native é que, para uma experiência verdadeiramente acessível, o cabeçalho de navegação deve ser definido com <Stack.Navigator> com opções de título. 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 de cabeçalho, como frequentemente recomendado, não satisfaz os critérios para Título da Tela.