Titres de page absents ou génériques

L'élément <title> est généralement la toute première chose qu'annonce un lecteur d'écran au chargement d'une page : c'est ainsi qu'une personne confirme être arrivée là où elle le voulait, avant d'entendre quoi que ce soit d'autre. C'est aussi ce qui s'affiche dans un onglet, un favori et un résultat de recherche. Un titre absent ou générique (un <title></title> vide, ou le même « Sans titre » / « Mon application » sur chaque page) échoue à ces trois fonctions à la fois.

C'est le critère de succès 2.4.2 des WCAG (Page avec titre), une exigence de niveau A.

La correction

Chaque page a besoin d'un <title> à la fois non vide et descriptif du contenu de cette page précise - et non du seul nom du site répété partout.

<!-- Avant : identique sur chaque page -->
<title>Mon application</title>

<!-- Après : identifie cette page précise -->
<title>Modifier le profil - Mon application</title>

Un modèle courant et efficace est {titre propre à la page} - {nom du site}, en plaçant d'abord la partie unique, puisque c'est elle qui est la plus utile quand on parcourt une longue liste d'onglets ou de résultats de recherche.

Où cela casse discrètement dans les applications monopages

Les sites multipages classiques règlent le problème presque gratuitement : chaque page rendue côté serveur a sa propre balise <title>. Les applications monopages à routage côté client constituent le point de défaillance le plus fréquent : naviguer entre les « pages » via un routeur JavaScript modifie l'URL et le contenu affiché, mais si rien ne met explicitement à jour document.title, chaque route conserve silencieusement le titre du chargement initial. Si votre site est construit avec React, Vue ou équivalent, vérifiez que les changements de route mettent réellement le titre à jour : la plupart des bibliothèques de routage fournissent un hook ou un composant prévu pour cela, mais l'étape est facile à oublier.

Pourquoi « générique mais présent » échoue quand même

Un <title> qui indique littéralement "Page" ou le seul nom du site sur chaque route possède techniquement un élément de titre non vide, mais ne répond pas à l'intention du critère : le titre doit réellement décrire le sujet ou la finalité de la page. Si deux pages différentes de votre site auraient le même titre, c'est le signe que la correction n'est pas terminée.

Références officielles

• Deque University : document-title
• Technique W3C G88
• Technique W3C H25