Titolo dello Schermo

Cosa Controlliamo

Ogni schermata all'interno di un'applicazione deve fornire un titolo unico e descrittivo per essere annunciato dalla tecnologia assistiva.

Esempio Errato ❌

screen title = {solo nome dell'app}

VoiceOver annuncia solo il nome dell'app quando si apre la schermata
"ShopEase"

Esempio Corretto ✅

screen title = "ShopEase, Carrello"

VoiceOver annuncia il titolo descrittivo quando si apre la schermata
"ShopEase, Carrello"

In Sintesi

• Questa regola ha un impatto moderato per gli utenti
• Ogni schermata ha bisogno di un titolo unico e descrittivo, non solo del nome dell'applicazione
• UIKit: imposta navigationController?.title o la proprietà title sul ViewController
• SwiftUI: aggiungi un modificatore .navigationTitle() al corpo della vista
• React Native: aggiungi options={{title: 'Screen Title'}} a ogni Stack.Screen

Impatto sugli Utenti

I titoli delle schermate permettono agli utenti con disabilità visive, cognitive e motorie e con memoria a breve termine limitata di determinare dove si trovano nell'applicazione, identificare i contenuti di una schermata dal titolo e navigare tra le schermate quando la modalità operativa di un utente dipende dall'audio.

Quando una schermata non ha un titolo, VoiceOver non annuncia un titolo di schermata quando si naviga verso quella schermata. Questo rende impossibile per gli utenti della tecnologia assistiva distinguere una schermata dall'altra senza esplorare il contenuto completo.

Conferma Problema con il Titolo dello Schermo

1. Attiva VoiceOver
2. Naviga alla schermata nell'app
3. Accadrà una delle seguenti cose:
   • Inaccessibile: VoiceOver non annuncerà un titolo di schermata
   • Accessibile: VoiceOver annuncerà il titolo della schermata

Risolvi i Problemi

Per risolvere i problemi con i Titoli delle Schermate, imposta un titolo unico e descrittivo su ogni schermata affinché la tecnologia assistiva possa annunciarlo all'apertura della schermata. Questo aiuta gli utenti a orientarsi senza dover esplorare l'intero contenuto di ogni schermata.

UIKit

Trova il ViewController che viola la regola e imposta la proprietà del titolo di navigationController.

navigationController?.title = "Screen Title Here"

In alternativa, puoi impostare direttamente la proprietà title su ViewController.

title = "Screen Title Here"

SwiftUI

Aggiungi un modificatore di vista .navigationTitle alla fine dell'ultimo elemento all'interno della proprietà body della vista.

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

React Native

Assicurati che ogni componente Stack.Screen abbia un nome descrittivo. Aggiungi options={{title: 'Screen Title'}} per definire un titolo di schermata significativo.

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

Barre di Navigazione Personalizzate

Per un'esperienza veramente accessibile nelle applicazioni costruite con React Native, l'intestazione di navigazione deve utilizzare <Stack.Navigator> con un'opzione title. Una barra di navigazione personalizzata non può essere codificata in modo programmatico per indicare che è un elemento di navigazione corretto e non solo una vista normale. Ciò cambia il modo in cui la tecnologia assistiva annuncia e interagisce con l'elemento. Nota che impostare un attributo header, come spesso consigliato, non soddisfa i criteri per il Titolo della Schermata.

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

Posso Ignorare Questa Regola?

Il Titolo dello Schermo ha un Impatto moderato per gli utenti, e consigliamo di impostare un titolo descrittivo su ogni schermata. In rari casi – come un'app a schermo singolo dove il nome dell'applicazione identifica chiaramente la schermata – potresti considerare di ignorare la regola. Scopri di più su ignorare le regole.

Domande Frequenti

Ci sono limitazioni note con questa regola?
Sì. Le app Flutter non rispettano universalmente la regola del Titolo dello Schermo perché Flutter espone AppBar.title come elemento intestazione nell'albero della semantica anziché mappandolo al titolo nativo dello schermo, UIViewController.title. Questo comporta fallimenti non correggibili per i sviluppatori.
I lettori di schermo non annunciano mai automaticamente il titolo alla navigazione; gli utenti devono focalizzare manualmente la barra superiore per udirlo. Questo influisce su tutte le app Flutter e causa fallimenti del Titolo dello Schermo (WCAG 2.4.2) indipendentemente dal fatto che sia presente un AppBar.title descrittivo.

Risorse

Pagine del Corso della Deque University

• Struttura Semantica e Navigazione (WCAG 2.1) - Video Tutorial
• Criterio di Successo 2.4.2 - Pagina Intitolata
• Requisiti - 2.4.2.a Titoli sulle Pagine

Nota: L'accesso completo alle risorse della Deque University richiede un abbonamento.

Altre Risorse

• Linee guida per l'accessibilità dei contenuti Web (WCAG) 2.0, Raccomandazione W3C
  • 2.4.2 Pagina Intitolata - Livello A
• Documenti di Comprensione WCAG 2.0
  • Comprendere SC 2.4.2 - Pagina Intitolata (Livello A)