Titres de pages et accessibilité
En HTML, le titre d’une page web équivaut au contenu de la balise <title>. Élément qui doit être intégré dans l’entête du document, entre les balises <head> et </head>.
Ce titre principal de la page n’est pas à confondre avec les titres de section (balises <h1> à <h6>) 
utilisés eux entre les balises <body> et </body> pour identifier les titres des contenus et/ou fonctionnalités intégrés dans la page.Sur la plupart des navigateurs (Internet Explorer, Firefox, Chrome, Safari, etc.), les titres de pages web s’affichent par défaut tout en haut de ces derniers, au niveau des onglets de la barre de titre.
Les titres de pages sont également exploités dans plusieurs autres contextes :
- Dans les résultats de la plupart des moteurs de recherche (Google, Bing, etc.), s’ils sont évalués comme suffisamment pertinents.
- En tant que noms de vos pages bookmarkées ; ou mises en favoris/signets, selon le navigateur.
- En tant que noms des pages visitées (historique de navigation).
- Etc.
Le titre d’une page web est un point important en matière d’accessibilité.
Particulièrement pour les personnes aveugles ou malvoyantes naviguant avec un lecteur d’écran (synthèse vocale et/ou plage braille) pour qui ces titres sont les premières informations restituées au chargement des pages.
Il est donc important pour ces utilisateurs que les textes y figurant permettent de vérifier rapidement et facilement que les informations proposées dans la page répondront à leurs attentes.
Dans le cas contraire, si le titre de la page n’est pas correctement renseigné, cela force ces personnes à prendre connaissance des contenus de la page (par vocalisation ou lecture en braille) pour s’assurer qu’elle répond bien à leurs besoins.
En résumé, une balise <title> correctement renseignée permet aux utilisateurs de savoir sur quelle page ils se trouvent et quels types d’informations ils seront susceptibles d’y trouver.
Recommandations générales
Les titres de pages doivent être à la fois précis, concis et uniques.
De manière générale, il est recommandé de renseigner la balise <title> d’une page en y reprenant uniquement le nom de la page courante et le nom du site (sauf cas particuliers exposés dans la seconde partie de ce billet).
Il est assez fréquent de rencontrer des titres de pages reprenant la totalité des éléments composant le fil d’Ariane.
Du point de vue de l’accessibilité (et probablement du SEO), cette pratique est à éviter car elle rend le contenu du titre potentiellement très long et par conséquent moins compréhensible/digeste pour les personnes surfant avec un lecteur d’écran.
Une bonne pratique d’accessibilité consiste à veiller à l’homogénéisation de l’ordre des contenus de la balise <title> à travers tout le site.
Nom de la page courante puis nom du site
De notre point de vue, il est optimal pour l’accessibilité de renseigner le titre de la page en reprenant en premier lieu le nom de la page courante puis, en suffixe, le nom du site.
Voici donc le modèle (à dynamiser) que nous préconisons :
<title>[Nom de la page courante] - [Nom du site]</title>
L’intérêt majeur de cette pratique réside dans le fait que la personne utilisant un lecteur d’écran se verra restituer en premier le nom de la page courante qui constitue l’information la plus importante pour sa compréhension et son expérience de navigation.
Ces personnes pouvant ainsi stopper la restitution du titre avant d’atteindre le nom du site, information qu’ils auront probablement déjà glanée auparavant.
D’autres avantages en faveur de ce schéma, non directement liés à l’accessibilité, peuvent être trouvés.
Favoris
Par exemple, dans tous les navigateurs, lorsque que l’on ajoute une page à ses favoris, c’est le titre de la page qui est repris par défaut.
Dans le cas où plusieurs pages d’un même site sont mises en favoris, si leurs titres commencent tous par le nom du site, il peut être plus fastidieux pour l’utilisateur de retrouver la page souhaitée.
Onglets du navigateur
Cette remarque est également valable dans le cas où plusieurs pages d’un même site sont ouverts dans différents onglets.
Le séparateur
Dans le schéma proposé plus haut, c’est le « – » (tiret) qui est utilisé pour séparer le nom de la page courante et le nom du site.
À noter qu’il est tout à fait envisageable d’opter pour un caractère différent, comme le « | » (pipe) ou encore la « , » (virgule). Cela n’ayant qu’un très faible impact sur l’accessibilité.
Automatisation ou saisie manuelle ?
À la question « Doit-on laisser la possibilité aux contributeurs de personnaliser les titres des pages ? », du seul point de vue de l’accessibilité, nous aurions tendance à répondre « Non ».
Ce notamment par soucis d’homogénéisation et pérennité (garantir l’accessibilité dans le temps) des titres à travers l’ensemble des pages du site.
D’après nous, il est donc préférable de renseigner les balises <title> techniquement et automatiquement (branchements dans le CMS).
Dans la plupart des cas, la reprise dynamique du premier titre de section de la zone de contenu principal convient parfaitement pour le nom de la page courante (idéalement, le premier <h1> de la balise <main role="main">).
Cas particuliers
Parfois, certaines pages sont rechargées suite à une action de l’utilisateur et proposent du contenu modifié.
Dans ces cas de figure, il est recommandé de mettre à jour le titre de la page en conséquence.
Mots-clés recherchés, filtres et pagination
Pour illustrer au mieux cette bonne pratique, nous allons nous représenter une page fictive proposant une liste paginée d’actualités filtrables par mots-clés et date de parution.
Puis, nous allons simuler différents cas de figure où les contenus de cette page seront modifiés sur action de l’utilisateur pour, à chaque fois, présenter le titre de la page attendu.
Allons-y !
À l’arrivée sur cette page, lorsqu’aucun filtre n’a été utilisé, en suivant le schéma exposé dans la première partie de ce billet, le titre de la page serait :
<title>Actualités - Mon site</title>
Si l’utilisateur décide de se rendre sur la deuxième page (sur huit) de la liste des actualités, le titre de la page devrait par exemple devenir :
<title>Actualités (page 2 sur 8) - Mon site</title>
Maintenant, imaginons que l’utilisateur décide de n’afficher que les actualités de l’année 2014, la balise <title> pourrait être renseignée tel que :
<title>Actualités (filtrées sur 2014 - page 2 sur 8) - Mon site</title>
Enfin, dernier exemple, ces mêmes actualités filtrées également avec le mot-clé « sport » :
<title>Actualités (filtrées sur sport, 2014 - page 2 sur 8) - Mon site</title>
Terme(s) recherché(s)
Pour une page de résultats de recherche, il est pertinent d’indiquer le ou les terme(s) recherché(s) dans le titre de la page en suivant par exemple ce modèle :
<title>Résultat(s) de la recherche sur "[terme(s) recherché(s)]" - [Nom du site]</title>
Concrètement, par exemple, si l’utilisateur effectue une recherche sur le terme « accessibilité », le titre de la page devrait être :
<title>Résultats de la recherche sur "accessibilité" - Mon site</title>
Formulaires
Les dernières bonnes pratiques que nous vous proposons concernent les titres de pages de formulaire.
Erreurs de saisie
Dans le cas où le formulaire n’a pas correctement été renseigné par l’utilisateur, l’idée est de l’indiquer dans le titre de la page via la mention « Erreur(s) » ajoutée en préfixe.
Pour obtenir par exemple concrètement :
<title>Erreur(s) - Contact - Mon site</title>
Ainsi, la personne aveugle ou malvoyante naviguant avec son lecteur d’écran sera tout de suite informée de la présence d’erreurs de saisie.
Message de confirmation
Sur le même principe, il peut-être pertinent d’indiquer dans le titre que le formulaire a bien été envoyé.
Cette fois-ci, on ajoutera par exemple la mention « Confirmation » tel que :
<title>Confirmation - Contact - Mon site</title>
À noter que l’ajout de cette mention n’est pas toujours nécessaire.
Quelques cas de figure sont listés dans l’encart « Remarque » de la recommandation AcceDe Web : Mettre à jour le <title> de la page quand un formulaire renvoie une erreur ou un message de confirmation .
Du seul point de vue de l’accessibilité, dans le cas où ces changements de contenu n’entrainent pas de rechargement de pages (générés en AJAX, par exemple) alors le titre de la page n’est pas à modifier.