WCAG 2.4.2: Pagina intitolata

WCAG 2.4.2 richiede che ogni pagina web abbia un titolo descrittivo e significativo che ne identifichi l’argomento o lo scopo. Questo garantisce che gli utenti — in particolare coloro che si affidano ai lettori di schermo o che gestiscono più schede — possano orientarsi rapidamente e navigare in modo efficiente.

Cosa Significa Questa Regola

WCAG 2.4.2 Page Titled è un criterio di successo di Livello A sotto il principio Operable. Afferma: "Web pages have titles that describe topic or purpose." In termini pratici, questo significa che ogni documento HTML fornito a un utente deve includere un elemento <title> all'interno della sezione <head>, e tale elemento deve contenere testo che identifichi in modo significativo il contenuto della pagina, la sua funzione o il suo contesto all'interno del sito.

Il criterio si applica a ogni singola pagina web — che si tratti di un file HTML statico, di una vista di una single-page application (SPA) renderizzata dinamicamente, di una pagina modale o di un passaggio in una procedura guidata multi-step. Ogni "schermata" distinta a cui un utente può navigare direttamente o che sostituisce la vista corrente dovrebbe avere un proprio titolo univoco e descrittivo.

Una pagina supera questo criterio quando il suo elemento <title> è presente, non vuoto e contiene testo che descrive adeguatamente l’argomento o lo scopo della pagina. Il titolo non deve essere univoco in tutto internet, ma dovrebbe essere sufficientemente specifico affinché un utente che sente o legge solo il titolo possa capire di cosa tratta la pagina senza bisogno di ulteriore contesto.

Una pagina non supera questo criterio quando si verifica una delle seguenti condizioni: l’elemento <title> è completamente assente dal <head>; l’elemento <title> è presente ma vuoto (non contiene testo); il titolo contiene solo testo generico segnaposto come "Untitled Document", "New Page" o il semplice nome di dominio senza alcun contenuto descrittivo; oppure una single-page application passa a una nuova vista logica senza aggiornare dinamicamente il titolo del documento.

WCAG non definisce eccezioni esplicite per questo criterio a Livello A. Ogni pagina web — indipendentemente da dimensioni, pubblico o scopo — deve avere un titolo descrittivo. Tuttavia, il documento Understanding chiarisce che il titolo non deve essere l’unico mezzo di identificazione; deve semplicemente esistere ed essere sufficientemente descrittivo da fungere da indicazione di orientamento di base.

Perché È Importante

Il titolo della pagina è una delle primissime informazioni che un utente incontra quando arriva su una pagina web o quando naviga tra pagine diverse. La sua assenza o inadeguatezza crea barriere per diversi gruppi distinti di utenti.

Utenti di screen reader — la maggior parte dei quali è cieca o ha una significativa ipovisione — sentono il titolo della pagina annunciato immediatamente quando la pagina viene caricata o quando il focus si sposta su un nuovo documento. Per circa 2,2 miliardi di persone nel mondo che hanno una qualche forma di disabilità visiva (secondo l’Organizzazione Mondiale della Sanità), questo annuncio è il modo principale per confermare che la pagina corretta è stata caricata e per capire cosa contiene prima di esplorare oltre. Senza un titolo significativo, una persona cieca che naviga tra le schede o ritorna su una pagina dopo una pausa deve leggere l’intero contenuto della pagina solo per ri-orientarsi — un compito che può richiedere minuti in presenza di un layout complesso.

Utenti con disabilità cognitive e di apprendimento traggono enorme beneficio da titoli di pagina chiari e coerenti. Quando un utente con difficoltà di memoria apre più schede durante una sessione di ricerca, il titolo della scheda è spesso l’unica etichetta visibile per ciascuna scheda. Un titolo come "Account Settings — Accsible Dashboard" consente di identificare istantaneamente la scheda corretta; un titolo come "Page" o un titolo vuoto costringe a fare clic su ogni scheda per scoprirne il contenuto, creando carico cognitivo e potenziale confusione.

Utenti con disabilità motorie che si affidano a software di controllo vocale (come Dragon NaturallySpeaking) possono usare i titoli di pagina per verificare di aver raggiunto la destinazione desiderata dopo aver impartito comandi di navigazione. Titoli chiari riducono la necessità di correzioni ripetute e di ri-navigazione, facendo risparmiare tempo e sforzo fisico.

Consideriamo questo scenario concreto: un paziente di un ospedale in Turchia sta usando uno screen reader assistivo per compilare un modulo di prenotazione online articolato in più passaggi. Se ogni passaggio non aggiorna il titolo della pagina per riflettere lo step corrente — ad esempio, "Step 2 of 4: Personal Information — Appointment Booking — Hospital Name" — il paziente non ha modo di confermare rapidamente i propri progressi dopo un ricaricamento della pagina o dopo essere passato a un’altra finestra del browser. Deve rileggere l’intero modulo per capire dove si trova, il che è particolarmente gravoso per chi potrebbe già essere malato o stressato.

Oltre all’accessibilità, i titoli di pagina hanno un notevole valore SEO. I motori di ricerca usano l’elemento <title> come etichetta principale per i risultati di ricerca. Un titolo descrittivo e ricco di parole chiave migliora il tasso di clic e la reperibilità. I siti web che implementano correttamente WCAG 2.4.2 quindi avvantaggiano non solo i loro utenti con disabilità, ma anche la loro presenza organica complessiva nei motori di ricerca — rendendo l’accessibilità al contempo una vittoria per il business e per la tecnica.

Regole Axe-core Correlate

document-title: Questa è la regola axe-core principale associata a WCAG 2.4.2. Verifica se il documento HTML corrente contiene un elemento <title> all’interno del <head> e se tale elemento contiene almeno un po’ di testo non composto solo da spazi. La regola segnala una violazione quando l’elemento <title> manca del tutto, quando esiste ma è vuoto o quando contiene solo caratteri di spaziatura. Axe-core riporta questo come una violazione critica mappata a WCAG 2.4.2 Livello A. La regola viene eseguita automaticamente al caricamento della pagina e rileva in modo affidabile omissioni strutturali.
Perché è necessario anche il test manuale: Strumenti automatici come axe-core possono confermare che un elemento <title> esiste e non è vuoto, ma non possono valutare se il titolo è significativo o descrittivo. Una pagina con <title>aaa</title> o <title>Untitled Document</title> supererà la regola automatizzata perché l’elemento è presente e non vuoto, ma fallisce chiaramente lo spirito di WCAG 2.4.2. È necessaria una revisione umana per valutare se il titolo riflette accuratamente l’argomento e lo scopo della pagina. Allo stesso modo, nelle single-page application, le scansioni automatiche in genere catturano solo il titolo al primo caricamento e possono non rilevare i casi in cui il titolo non viene aggiornato sui cambi di route lato client — tali transizioni richiedono test di navigazione manuali.

Come Testare

Scansione automatizzata con axe DevTools o Lighthouse: Apri la pagina web di destinazione in Chrome o Firefox. Apri DevTools (F12), vai al pannello axe DevTools (se installato) o alla scheda Lighthouse. Esegui un audit di accessibilità. Nei risultati di axe, cerca in particolare eventuali violazioni della regola document-title nella categoria "Critical" o "Serious". Lighthouse segnalerà allo stesso modo un titolo mancante o vuoto nel suo audit di Accessibilità. Annota l’URL esatto della pagina e il testo del titolo (o la sua assenza) per il tuo report. Ripeti questo test per ogni route o vista univoca dell’applicazione, incluse le pagine di errore (404, 500) e le pagine di conferma.
Ispezione manuale nel browser: In qualsiasi browser, esamina l’etichetta della scheda del browser — dovrebbe mostrare un titolo significativo e descrittivo che identifichi la pagina. Fai clic con il tasto destro sulla pagina e scegli "View Page Source" oppure apri DevTools e vai al pannello Elements. Individua la sezione <head> e verifica che sia presente un elemento <title> con un contenuto testuale appropriato e non generico. Controlla che il titolo sia pertinente al contenuto visibile della pagina e — per i siti multi-pagina — che differisca dai titoli delle altre pagine in modo da riflettere lo scopo specifico della pagina.
Test con screen reader usando NVDA + Firefox: Apri la pagina con Firefox e attiva NVDA. Quando la pagina si carica, NVDA dovrebbe annunciare immediatamente il titolo della pagina. Naviga via e poi torna alla pagina (usando Alt+Freccia Sinistra e poi Alt+Freccia Destra) e conferma che il titolo corretto viene annunciato di nuovo. In una single-page application, attiva un cambio di route lato client e ascolta l’annuncio del titolo aggiornato. Se NVDA non legge nulla o legge una stringa generica/inutile al caricamento della pagina, si tratta di un errore.
Test con screen reader usando VoiceOver + Safari (macOS/iOS): Abilita VoiceOver (Command+F5 su Mac). Carica la pagina. VoiceOver annuncia il titolo della pagina al caricamento. Usa il Rotor (Control+Option+U) e vai all’elenco Web Spots o Headings — il titolo della finestra mostrato in cima alla pagina dovrebbe corrispondere al contenuto dell’elemento <title>. Su iOS, il titolo appare nel selettore di schede di Safari; verifica che sia descrittivo.
Test con screen reader usando JAWS + Chrome: Apri la pagina in Chrome con JAWS in esecuzione. JAWS annuncia il titolo della pagina al caricamento. Premi Insert+F1 per aprire la finestra di aiuto di JAWS e confermare il titolo della pagina riportato. Usa Insert+T per leggere il titolo in qualsiasi momento durante la sessione e verificare che sia stato aggiornato correttamente dopo gli eventi di navigazione della SPA.
Test dei cambi di route in una single-page application (SPA): Naviga tra le diverse viste della SPA (ad esempio, da una home page a una pagina prodotto fino a una pagina di checkout). Dopo ogni navigazione, controlla l’etichetta della scheda del browser e usa uno screen reader per verificare che il titolo sia stato aggiornato. Se l’etichetta della scheda rimane la stessa per l’intera sessione indipendentemente dalla vista corrente, si tratta di una violazione del criterio 2.4.2 per ogni vista che non ha un titolo distinto.

Come Correggere

Elemento title mancante — Non corretto

<!DOCTYPE html>
<html lang='tr'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <!-- No <title> element present -->
</head>
<body>
  <h1>Ürünlerimiz</h1>
</body>
</html>

Elemento title mancante — Corretto

<!DOCTYPE html>
<html lang='tr'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <!-- Title added: describes the page topic and includes the site name for context -->
  <title>Ürünlerimiz — Accsible Mağaza</title>
</head>
<body>
  <h1>Ürünlerimiz</h1>
</body>
</html>

Titolo generico segnaposto — Non corretto

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <!-- Generic title provides no useful context to the user -->
  <title>Untitled Document</title>
</head>
<body>
  <h1>Contact Us</h1>
</body>
</html>

Titolo generico segnaposto — Corretto

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <!-- Descriptive title: page function first, then site name -->
  <title>Contact Us — Accsible Support</title>
</head>
<body>
  <h1>Contact Us</h1>
</body>
</html>

Single-page application che non aggiorna il titolo al cambio di route — Non corretto

<!-- React Router example: title is set only once at app root and never updated -->
<!DOCTYPE html>
<html lang='en'>
<head>
  <title>My App</title>
</head>
<body>
  <div id='root'></div>
  <!-- JavaScript bundle loads React SPA; title never changes during navigation -->
</body>
</html>

Single-page application che non aggiorna il titolo al cambio di route — Corretto

<!-- Use document.title in each route component or a head-management library -->
<!-- Example using React with react-helmet-async -->

<!-- In your ProductPage component: -->
<!-- import { Helmet } from 'react-helmet-async'; -->
<!-- <Helmet><title>{product.name} — Accsible Store</title></Helmet> -->

<!-- Or using plain JavaScript on each route render: -->
<script>
  // Called whenever the SPA navigates to a new view
  function updatePageTitle(pageTitle, siteName) {
    document.title = pageTitle + ' — ' + siteName;
  }
  // Example: updatePageTitle('Shopping Cart', 'Accsible Store');
  // Results in: <title>Shopping Cart — Accsible Store</title>
</script>

Modulo multi-step con titoli identici in ogni passaggio — Non corretto

<!-- Step 1 -->
<title>Checkout — Accsible Store</title>
<!-- Step 2 (same title — user cannot distinguish steps) -->
<title>Checkout — Accsible Store</title>
<!-- Step 3 (same title again) -->
<title>Checkout — Accsible Store</title>

Modulo multi-step con titoli identici in ogni passaggio — Corretto

<!-- Step 1: title reflects the current step's purpose -->
<title>Step 1 of 3: Shipping Address — Checkout — Accsible Store</title>
<!-- Step 2: clearly distinct and descriptive -->
<title>Step 2 of 3: Payment Details — Checkout — Accsible Store</title>
<!-- Step 3: confirmation step identified clearly -->
<title>Step 3 of 3: Order Review — Checkout — Accsible Store</title>

Errori Comuni

Lasciare il titolo predefinito del CMS o del framework in produzione: Molti content management system (WordPress, Drupal, framework personalizzati) vengono forniti con titoli segnaposto come "Just another WordPress site" o l’URL grezzo del sito. Gli sviluppatori dimenticano di configurare il template del titolo prima del lancio, lasciando ogni pagina con un titolo inutile o identico. Verifica sempre la configurazione del titolo nelle impostazioni del tuo CMS e testa un URL live prima del rilascio.
Usare solo il nome del sito come titolo per ogni pagina: Impostare <title>Accsible</title> su ogni pagina di un sito supera il controllo automatico document-title (l’elemento non è vuoto) ma non soddisfa il requisito descrittivo di WCAG 2.4.2. Ogni pagina deve avere un titolo che la distingua dalle altre pagine dello stesso sito.
Mettere il nome del sito prima del contenuto specifico della pagina: Il pattern <title>Accsible — Contact</title> costringe gli utenti di screen reader ad ascoltare il nome del brand prima di sapere di cosa tratta la pagina. Il pattern raccomandato è <title>Contact — Accsible</title> — prima l’argomento della pagina, poi il nome del sito — così gli utenti ricevono subito l’informazione più rilevante.
Dimenticare di aggiornare document.title nelle single-page application dopo la navigazione lato client: Framework come React, Vue e Angular non aggiornano automaticamente il titolo del documento quando cambia la route. Gli sviluppatori devono impostare esplicitamente document.title o usare una libreria di gestione dell’head (come react-helmet-async o Vue Meta) in ogni componente di route. Non farlo significa che ogni vista della SPA dopo il caricamento iniziale condivide lo stesso titolo.
Usare elementi title vuoti o contenenti solo spazi: Un elemento <title> </title> che contiene solo spazi o interruzioni di riga è funzionalmente identico a un titolo mancante per gli utenti di tecnologie assistive, ma può sfuggire al QA visivo perché la scheda del browser appare semplicemente vuota invece di generare un errore. Axe-core lo segnala, ma può passare inosservato ai revisori manuali.
Non aggiornare il titolo sulle pagine di errore (404, 500, errori di validazione): Le pagine di errore spesso ereditano il titolo della pagina precedente o tornano a un titolo generico del sito. Un utente di screen reader che genera un errore 404 deve sentire "Page Not Found — Accsible" piuttosto che il titolo della pagina su cui si trovava in precedenza, per capire che la sua navigazione non è andata a buon fine.
Titoli duplicati su pagine diverse con contenuti distinti: Quando una pagina di elenco prodotti e una pagina di dettaglio prodotto hanno entrambe il titolo "Products — Accsible Store", gli utenti con disabilità cognitive o chi gestisce più schede non può distinguerle. Ogni pagina logicamente distinta dovrebbe avere un titolo univoco che rifletta il suo contenuto specifico.
Titoli generati dinamicamente che includono nomi grezzi di variabili di template: Bug nel rendering lato server possono produrre titoli come <title>{{page.title}} — MySite</title> quando le variabili di template non vengono renderizzate. Questi superano il controllo "non vuoto" ma non forniscono alcuna informazione significativa. Implementa controlli automatici sul contenuto dei titoli nella tua pipeline CI/CD per intercettare i fallimenti di rendering dei template prima del deployment.
Titoli troppo lunghi o riempiti di parole chiave: Sebbene WCAG non stabilisca un limite di caratteri, titoli eccessivamente lunghi (oltre 60–70 caratteri) vengono troncati nelle schede del browser e nei risultati di ricerca, e gli screen reader devono leggere l’intera stringa prima di annunciare la parte più rilevante. Mantieni i titoli concisi, specifici e con le informazioni più importanti all’inizio.
Omettere i titoli dai documenti caricati in iframe: Gli inline frame (<iframe>) che caricano un documento HTML completo dovrebbero avere anch’essi un elemento <title> significativo. Sebbene l’elemento iframe stesso debba avere un attributo title che descriva lo scopo del frame, il documento caricato al suo interno beneficia anche di un <title> nel proprio <head> per le tecnologie assistive che navigano all’interno del contenuto del frame.

Relazione con le Normative di Accessibilità della Turchia

La Circolare Presidenziale 2025/10 della Turchia, pubblicata nella Gazzetta Ufficiale n. 32933 il 21 giugno 2025, stabilisce requisiti di accessibilità vincolanti per un’ampia gamma di servizi digitali del settore pubblico e privato. WCAG 2.4.2 Page Titled è un criterio di successo di Livello A, e la conformità al Livello A è il minimo obbligatorio ai sensi di questa circolare. I soggetti interessati sono tenuti a raggiungere la conformità al Livello A entro un anno se sono istituzioni pubbliche, ed entro due anni se sono organizzazioni del settore privato.

La circolare copre un ampio insieme di tipologie di soggetti, rendendo WCAG 2.4.2 rilevante per una parte significativa dell’economia digitale turca. I soggetti interessati includono tutte le istituzioni pubbliche e gli enti governativi, le piattaforme di e-commerce, le banche e le istituzioni finanziarie, gli ospedali e i fornitori di servizi sanitari, le compagnie di telecomunicazioni con 200.000 o più abbonati, le agenzie di viaggio autorizzate, le compagnie di trasporto private e le scuole private autorizzate dal Ministero dell’Istruzione Nazionale (MoNE).

Per queste organizzazioni, non fornire un titolo di pagina significativo non è semplicemente una mancanza di adozione di buone pratiche — è un rischio di non conformità normativa. Consideriamo le implicazioni pratiche: una piattaforma di e-commerce turca in cui le pagine di categoria dei prodotti condividono tutte lo stesso titolo generico, o il sistema di prenotazione appuntamenti di un ospedale pubblico in cui ogni passaggio del flusso di prenotazione ha lo stesso titolo indistinto, sarebbero entrambi in violazione diretta dei requisiti di accessibilità della circolare. I regolatori o i ricorrenti potrebbero citare questi errori come violazioni dello standard obbligatorio di Livello A.

Implementare correttamente WCAG 2.4.2 è una delle correzioni di accessibilità a più basso sforzo e più alto impatto disponibili, poiché in genere richiede solo una modifica a livello di template per garantire che ogni pagina abbia un elemento <title> ben formato e descrittivo. Per le organizzazioni soggette alla circolare 2025/10, affrontare i titoli delle pagine dovrebbe essere tra i primi elementi da risolvere in qualsiasi roadmap di remediation dell’accessibilità — è semplice da implementare, facile da verificare e direttamente testabile tramite la regola axe-core document-title, rendendo semplice dimostrare la conformità ad auditor o autorità di regolamentazione.

Le organizzazioni che servono un pubblico di lingua turca dovrebbero inoltre assicurarsi che i titoli delle pagine siano forniti nella lingua corretta corrispondente al contenuto della pagina, in complemento al requisito dell’attributo lang (WCAG 3.1.1), in modo che gli screen reader negli ambienti degli utenti di lingua turca interpretino e pronuncino correttamente il titolo annunciato al caricamento della pagina.