Titolo dello Schermo

Cosa Verifichiamo

Ogni schermo all'interno di un'applicazione deve fornire un titolo unico e descrittivo da annunciare tramite le tecnologie assistive.

Esempio Non Correto ❌

screen title = {solo nome dell'app}

TalkBack annuncia solo il nome dell'app quando si apre lo schermo
"ShopEase"

Esempio Corretto ✅

screen title = "ShopEase, Carrello"

TalkBack annuncia il titolo descrittivo dello schermo quando si apre
"ShopEase, Carrello"

In Sintesi

• Questa regola ha un impatto moderato per gli utenti
• Ogni schermo necessita di un titolo unico e descrittivo — non solo il nome dell'applicazione
• Android Nativo: usa Activity.setTitle() per impostare il titolo dello schermo
• React Native: aggiungi options={{title: 'Screen Title'}} a ciascun Stack.Screen

Impatto sugli Utenti

I titoli degli schermi consentono agli utenti con disabilità visive, cognitive, motorie e con memoria a breve termine limitata di determinare dove si trovano nell'applicazione, identificare il contenuto di uno schermo dal suo titolo e navigare tra gli schermi quando il loro modo di operare dipende dall'audio.

Quando uno schermo non ha un titolo, TalkBack annuncia solo il nome dell'applicazione su ogni schermo. Questo rende impossibile per gli utenti di tecnologie assistive distinguere uno schermo dall'altro senza esplorare l'intero contenuto.

Conferma Problema del Titolo dello Schermo

1. Attiva TalkBack
2. Apri l'applicazione e naviga fino allo schermo
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: TalkBack annuncia solo il nome dell'applicazione
   • Accessibile: TalkBack annuncia il titolo specifico dello schermo invece del nome dell'applicazione

Correggi i Problemi

Per risolvere i problemi di Titolo dello Schermo, imposta un titolo unico e descrittivo su ciascun schermo in modo che le tecnologie assistive possano annunciarlo quando lo schermo viene aperto. Questo aiuta gli utenti a orientarsi senza dover esplorare l'intero contenuto di ogni schermo.

Android Nativo

Imposta il titolo dello schermo all'interno del Activity. Il titolo dovrebbe descrivere lo scopo o il contenuto dello schermo.

Activity.this.setTitle("Settings");

React Native

Per risolvere i problemi di Titolo dello Schermo, prova i seguenti approcci:

1. Imposta il titolo dello schermo nelle opzioni dello schermo di React Navigation. Usando React Navigation, impostando il titolo nel prop options dello schermo si aggiorna l'intestazione nativa. Su Android, questo corrisponde al titolo dell'Activity/Fragment e attiva un evento di accessibilità TYPE_WINDOW_STATE_CHANGED che TalkBack annuncia automaticamente. Questo può essere impostato in modo statico o dinamico basato sui parametri di instradamento.
2. Usa navigation.setOptions() all'interno dello schermo se il titolo deve essere impostato o aggiornato dopo il montaggio dello schermo. Chiamare setOptions con un valore di titolo all'interno del componente dello schermo aggiorna anche il titolo dell'intestazione nativa e attiva un annuncio di TalkBack.
3. Usa AccessibilityInfo.announceForAccessibility() se i precedenti approcci non attivano le annunciazioni di TalkBack. Combinando announceForAccessibility con il hook useFocusEffect di React Navigation assicura che l'annuncio venga emesso ogni volta che l'utente naviga fino a quello schermo.
4. Come ultima risorsa, imposta il titolo dell'Activity nativa tramite un modulo nativo. Se l'intestazione di React Navigation non attiva l'annuncio, puoi connetterti al livello nativo Android e chiamare direttamente activity.setTitle(), il quale attiva l'evento TYPE_WINDOW_STATE_CHANGED che TalkBack ascolta.

Barre di Navigazione Personalizzate

Per un'esperienza davvero accessibile in applicazioni costruite con React Native, l'intestazione di navigazione deve usare <Stack.Navigator> con un'opzione title. Una barra di navigazione personalizzata non può essere programmata per indicare che è un vero elemento di navigazione e non solo una vista regolare. Ciò modifica il modo in cui le tecnologie assistive annunciano e interagiscono con l'elemento. Nota che impostare un attributo header, come spesso raccomandato, non soddisfa i criteri per il Titolo dello Schermo.

<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 schermo. Sebbene non blocchi l'accesso al contenuto, degrada significativamente la navigazione per gli utenti che usano lettori di schermo. In rari casi - come in un'app a schermo singolo dove il nome dell'applicazione identifica chiaramente lo schermo - puoi considerare di ignorare la regola. Scopri di più su ignorare regole.

Domande Frequenti

Ci sono limitazioni note con questa regola?
Sì. Le app Flutter falliscono universalmente la regola del Titolo dello Schermo perché Flutter espone AppBar.title come elemento di intestazione nell'albero semantico anziché mappandolo al titolo nativo dello schermo, Activity.setTitle. Questo risulta in fallimenti non risolvibili per gli sviluppatori.
I lettori di schermo non annunciano mai automaticamente il titolo alla navigazione; gli utenti devono focalizzare manualmente l'AppBar per ascoltarlo. Ciò riguarda tutte le app Flutter e causa fallimenti del Titolo dello Schermo (WCAG 2.4.2) indipendentemente dalla presenza di un AppBar.title descrittivo.

Risorse

Pagine dei Corsi di Deque University

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

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

Altre Risorse

• Linee guida per l'accessibilità dei contenuti Web (WCAG) 2.0, Raccomandazione W3C
  • 2.4.2 Pagine titolate - Livello A
• Documenti esplicativi WCAG 2.0
  • Comprendere SC 2.4.2 - Pagine titolate (Livello A)