Titre de page

Le titre de page est le contenu de la balise HTML <title>, affiché dans l'onglet du navigateur. C'est la première information qu'un lecteur d'écran annonce à l'ouverture d'une page. Le critère WCAG 2.4.2 (niveau A) exige que chaque page possède un titre décrivant son sujet ou sa fonction.

Ouvrez vingt onglets dans votre navigateur. La seule chose qui vous permet de retrouver le bon, c'est le titre de chaque page. Pour une personne qui utilise un lecteur d'écran, la situation est identique, sauf que le titre est lu à voix haute à chaque ouverture de page. Un mauvais titre, et l'utilisateur navigue à l'aveugle.

#Ce que dit la norme

Le critère de succès 2.4.2 des WCAG (niveau A) tient en une phrase : les pages web doivent avoir des titres qui décrivent leur sujet ou leur fonction. Niveau A signifie exigence minimale. Il n'y a pas de raison valable de passer à côté.

Côté technique, le titre se définit dans la balise <title> du <head> HTML :

<!-- Bon : du spécifique vers le général -->
<title>Panier (3 articles) - BoutiqueExemple</title>
 
<!-- Mauvais : identique sur toutes les pages -->
<title>BoutiqueExemple</title>

L'ordre recommandé par les guidelines Orange va du plus spécifique (nom de la page) vers le moins spécifique (nom du site). WebAIM précise que le titre et le <h1> de la page devraient se correspondre, sans être forcément identiques.

#Le piège des applications monopage

Sur un site classique, chaque URL charge un nouveau document HTML et donc un nouveau <title>. Les applications monopage (SPA) changent de vue sans recharger la page. Si vous ne mettez pas à jour le <title> à chaque changement de route, l'outil axe de Deque ne signalera rien. Le titre existe, il est juste périmé.

Même logique pour les pages dynamiques : un formulaire qui affiche des erreurs de validation devrait refléter ce changement dans le titre. « Erreurs de saisie - Inscription - MonSite » indique immédiatement le problème.

#En résumé

Chaque page mérite un titre court, descriptif, unique. Placez l'information spécifique en premier, le nom du site en dernier. Dans une SPA, mettez le titre à jour à chaque changement de vue. Le <title> est la première chose que les technologies d'assistance lisent : soignez-le autant que votre <h1>.

Retour au glossaire

Partagez cet article

Pour aller plus loin

Structure du document

La structure du document, c'est l'organisation logique d'une page web au moyen des titres hiérarchiques (h1 à h6) et des balises sémantiques HTML5. Les lecteurs d'écran s'en servent pour construire une table des matières navigable et permettre à leurs utilisateurs de sauter directement à la section voulue.

Langue par défaut

La langue par défaut d'une page web est la langue principale dans laquelle son contenu est rédigé. On la déclare en HTML avec l'attribut lang sur l'élément racine du document. Sans cette déclaration, les lecteurs d'écran ne savent pas quelles règles de prononciation appliquer et lisent le texte avec l'accent de la langue configurée sur le système de l'utilisateur.

Ensemble de pages

Un ensemble de pages désigne un groupe de pages web qui partagent un objectif commun et sont produites par la même équipe. Ce concept, issu du glossaire des WCAG, définit le périmètre sur lequel s'appliquent les règles de cohérence en accessibilité : même navigation, mêmes libellés, même emplacement de l'aide.