Comment les titres de page augmentent l'accessibilité
Lorsque nous parlons du "titre de la page", nous ne parlons pas nécessairement du texte dans l'élément principal h1 . Plutôt, le texte qui apparaît dans l'onglet du navigateur, le même texte qui est placé dans l'élément de title dans la section d'en- head du document.
Bien que ce contenu reflète souvent celui du h1 principal, il est important de savoir pourquoi ce contenu est crucial pour créer une expérience utilisateur accessible et quand il doit être mis à jour.
Le titre de la page est la première information annoncée par un lecteur d'écran.
La raison pour laquelle il est important d'avoir un contenu de titre clair et unique pour chaque page du site Web est due au fait qu'il s'agit de la première information annoncée par un lecteur d'écran.
Afin de fournir un contexte sur l'endroit où l'utilisateur se trouve actuellement dans une tâche, ou s'il a cliqué sur un lien d'un site de médias sociaux directement vers une page, il est important de fournir ces informations immédiatement. Le texte du titre permet de donner un retour immédiat sur l'endroit où se trouve actuellement l'utilisateur.
Comment écrire le texte du titre
Ce qui se retrouve dans l'élément de title dépend en fait de la page actuelle ou de l'état du site. Idéalement, le flux d'informations dans le title serait, de gauche à droite : état | pages | placer.
Par exemple, un titre de page d'accueil refléterait simplement le nom du site :
<title>Website</title>
Le titre d'une page de contact peut être :
<title>Contact | Website</title>
Un article de blog inclurait le titre de l'article dans l'élément de title :
<title>How to make pasta sauce | Website</title> Notez que la hiérarchie des pages n'est pas incluse dans le titre. Cela permet d'éviter que les lecteurs d'écran n'annoncent trop d'informations à la fois.
Mise à jour de l'état
L'utilisation de l'élément de title pour transmettre l'état actuel d'un site Web est un bonus supplémentaire pour quelqu'un qui utilise un lecteur d'écran. Avec cela, ils recevront le message immédiatement et pourront éviter de parcourir le contenu de la page pour trouver l'état actuel des choses.
Par exemple, si quelqu'un soumet un formulaire avec des données non valides qui entraîne une actualisation complète de la page, il serait utile que le titre reflète cet état pour informer rapidement l'utilisateur de l'état d'erreur du formulaire.
<title>Error | Contact | Website</title>
Si quelqu'un remplit un formulaire en plusieurs étapes, par exemple en effectuant un achat en ligne, le titre peut refléter l'étape actuelle du processus qu'il est sur le point de terminer.
<title>Payment information (Step 3 of 4) | Shop | Website</title> Avec un contenu d'élément de title clair et unique, les utilisateurs voyants et les utilisateurs de lecteurs d'écran bénéficieront de savoir exactement où ils se trouvent sur votre site.
Applications d'une seule page
Donc, voici le problème. Lorsque vous parcourez une application à page unique (SPA) à l'aide d'un lecteur d'écran, le chargement d'une nouvelle page ou vue a tendance à répéter l'annonce de la page initiale. Pourquoi? Généralement avec un SPA, l'élément de title de la page reste statique. Cela est dû au fait que les auteurs d'applications définissent sa valeur une fois dans le modèle global et n'y pensent plus jamais vraiment.
Comme nous l'avons appris, la définition d'une valeur de title de page unique est essentielle pour générer une expérience utilisateur positive. Alors, comment surmonter ce problème de définition d'un titre de page unique dans un SPA ? L'une des méthodes les plus simples consiste à utiliser la propriété globale JavaScript document.title .
Exemple de réaction
Un exemple d'utilisation de cette propriété globale se trouve dans une méthode de cycle de vie React componentDidMount() :
componentDidMount() { document.title = 'My page title'; }
Le code de cette fonction s'exécute lorsque le composant est chargé à l'écran. La seule ligne de cette fonction utilise document.title pour définir une valeur de chaîne de "Mon titre de page". Ainsi, lorsque ce composant se charge, le title de la page sera défini sur cette valeur.
Il convient de noter que document.title n'est pas spécifique ou unique à React ; cette méthode peut être utilisée dans n'importe quel SPA ou site Web basé sur JavaScript.
Critères de réussite WCAG
Cela revient à 2.4.2 : Page intitulée qui indique :
"Les pages Web ont des titres qui décrivent le sujet ou le but."