SC 2.4.2 Livello A WCAG 2.0

Titolo della pagina

Ogni pagina deve avere un elemento `<title>` che ne descriva l'argomento o lo scopo. Il titolo è ciò che gli screen reader annunciano al caricamento della pagina e ciò che gli utenti vedono nelle schede, nei segnalibri, nella cronologia e nei risultati di ricerca.

Cosa richiede

L’elemento <title> nell’intestazione del documento deve descrivere l’argomento della pagina. Gli utenti di screen reader lo sentono non appena la pagina viene caricata — è il primo segnale di orientamento che ricevono. Gli utenti vedenti lo visualizzano nella scheda del browser, nella cronologia, nei segnalibri e nella pagina dei risultati di ricerca. Un titolo che non soddisfa questo criterio lascia tutti questi utenti a indovinare dove si trovano.

Il titolo non deve essere poetico. Deve essere specifico. «Home» non è sufficiente. «Prezzi — Acme CRM» è corretto.

Come soddisfarlo

Scrivere un titolo che nomini prima la pagina e poi il sito: "Hotel accessibili in carrozzina a Berlino — Disability World".
Aggiornare il titolo lato client al cambio di rotta nelle SPA. Next.js, React Router e Vue Router richiedono tutti aggiornamenti espliciti a document.title o l’utilizzo di helper specifici del framework.
Riflettere errori di modulo e risultati di ricerca nel titolo: "3 errori — Impostazioni account" oppure "Ricerca: stanchezza cronica — 47 risultati".
Collocare le informazioni più distintive all’inizio. In una barra delle schede larga 30 caratteri, «Disability World — Come richiedere l’INPS» nasconde l’argomento principale.
Per i moduli a più passaggi, includere il passaggio corrente: "Passaggio 2 di 4: Indirizzo — Richiedi prestazione".

Errori comuni

Titoli generici validi per l’intero sito: ogni pagina mostra "Acme Inc." perché il template non sovrascrive mai il valore predefinito.
<title></title> vuoto — sorprendentemente frequente quando i template dei CMS assumono che il redattore lo compili sempre.
Percorsi di SPA senza titolo: l’HTML iniziale ha un titolo generico e il router non lo aggiorna mai durante la navigazione.
Il titolo è esclusivamente il nome del brand senza il tema della pagina ("Acme" sulle pagine di contatto, prezzi e prodotto).
«Documento senza titolo» rimasto dall’esportazione di un editor WYSIWYG.

Perché è importante

Per un utente di screen reader, il titolo della pagina è l’equivalente di guardare la parte superiore della finestra del browser — indica se si trova dove voleva arrivare. Senza di esso, ogni pagina suona uguale al caricamento. È anche fondamentale per la SEO e le anteprime dei link, quindi correggere questo criterio tende ad essere una proposta facile da far accettare a team di prodotto, marketing e contenuti.