Accessibilité – 2 : la base

Tribune Glob'codeur

Le 15 décembre 2022 par Sandra Frade

« Retour

Deuxième article de la série sur le thème de l'accessibilité.

Sommaire

Retrouvez l'ensemble de notre contenu sur l'accessibilité dans un livret PDF dédié. Il est à la destination de tous les professionnels du Web afin de rendre le web plus inclusif.

Document de base

Doctype

Avant même d’écrire la moindre balise, mettre un doctype. En 2022, j’ose imaginer que chacun met un doctype HTML5.

Langue

La deuxième obligation concerne l’élément racine <html>, dans lequel on doit renseigner la langue utilisée majoritairement dans la page. Les changements ponctuels de langue sont quant à eux indiqués au fur et à mesure. Si vous testez votre page avec du texte en latin (lorem ipsum), il faudra mettre la valeur “zxx”, qui correspond en fait à la valeur “non applicable”.

Titre

Le troisième point d’attention concerne le titre de la page. Il faut veiller à renseigner un titre unique pour chaque page du site, et pertinent par rapport à son contenu. Le but ici est de faciliter la compréhension quand une page est chargée, ainsi que la navigation dans l’historique.

Squelette

Voici le code obtenu jusqu’à présent :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Titre unique et pertinent</title>
    </head>
    <body>
    </body>
</html>

Remarque : l’éditeur CodePen ne prenant pas en charge cette partie du code, elle sera omise dans les extraits de code suivants.

Contenu de la page

Quel est ensuite le premier élément à apparaître dans le corps du document ? Ce n’est pas forcément un lien d’évitement. S’il y a des modales à mettre en place, on commence plutôt par mettre un conteneur de page. Dans l’article où les modales seront abordées plus en détail, nous verrons que le corps du document a pour enfants directs : un conteneur de page, un conteneur de modales, puis les scripts.

Liens d'évitement

Au tout début de notre conteneur de page, on ajoute les liens d’évitement, aussi appelés liens d’accès rapide, en veillant à ne pas trop en mettre non plus :

Aller au contenu principal (obligatoire)
Aller aux paramètres d’accessibilité (optionnel)
Aller au formulaire de recherche (optionnel)
Navigation principale (optionnel)
Navigation secondaire (optionnel)

Quand on clique dans la fenêtre de résultat ci-dessous et qu'on appuie sur la touche tabulation une première fois, le lien d'évitement vers le contenu principal apparaît. Si on appuie une deuxième fois sur la touche tabulation, c'est le lien vers le formulaire de recherche qui apparaît :

See the Pen A11y - Liens d'évitement by Globalis MS (@globalis-ms) on CodePen.

L'ordre de tabulation est extrêmement important, il doit suivre le cours de la page de façon logique. Lors de la navigation au clavier, le focus doit toujours être quelque part. Il ne doit jamais disparaître.

Zones

En HTML5, plus besoin de définir de rôles pour les zones de la page. Là où avant, pour l'en-tête de page, on aurait écrit <div role="banner">, on peut maintenant se contenter de <header>. En effet, l'en-tête la plus proche de l'élément <body> aura directement le rôle correspondant, et c'est valable pour tous les éléments suivants :

header
footer
nav
main
aside

Navigation

Le site doit posséder au moins deux systèmes de navigation différents, dans un ensemble de pages, parmi les suivants :

menu de navigation
moteur de recherche
plan du site

On peut donc avoir, dans une partie du site, un menu et un plan du site, et dans une autre partie on aurait un menu et un moteur de recherche. Il faut également que l’affichage de chaque élément soit cohérent de page en page.

Pour les pages avec beaucoup de contenu textuel, comme c’est le cas parfois pour les articles de blog par exemple, on peut également ajouter une table des matières.

Hiérarchie des titres

Les titres servent à structurer le contenu. Ils doivent être pertinents et refléter réellement le contenu. Si on extrait tous les titres de la page dans une table des matières, serait-elle cohérente ? La hiérarchie des titres serait-elle respectée ? L'extension HeadingsMap peut ici vous aider. Vous pouvez la trouver sur :

Contrairement à une table des matières classiques, on peut toutefois trouver des niveaux inférieurs avant le niveau un. Le tout étant que cela doit rester cohérent.

Lien vers la page accessibilité

Quel que soit son niveau de conformité aux critères, la page accessibilité, si elle existe, doit être atteignable depuis n’importe quelle page du site. En général, on la retrouve dans le pied de page. L’intitulé du lien peut contenir le niveau atteint. Un exemple de lien serait “Accessibilité : partiellement conforme”.

Contenu invisible

Voici le code obtenu jusqu'à présent, mais il manque des choses essentielles pour l'accessibilité que nous allons voir tout de suite :

See the Pen A11Y - Document de base avec noms accessibles by Globalis MS (@globalis-ms) on CodePen.

Noms accessibles

Dans l'extrait de code précédent, il manque des noms accessibles pour les éléments suivants : le menu de navigation, le formulaire de recherche, et le champ de recherche. En effet, grâce à certaines technologies d'assistance, on peut naviguer par menus, par formulaires, par champs de formulaires, par tableaux, par liens, etc... chacun de ces éléments doit donc avoir un nom unique dans la page, et explicite. Il y a plusieurs façons de donner un nom accessible en fonction de l'élément rencontré, et on peut vérifier les noms accessibles des éléments de notre page grâce à l'arbre d'accessibilité dans nos navigateur.

Arbre d'accessibilité

Vous trouverez facilement avec votre moteur de recherche comment accéder à l'arbre d'accessibilité de votre navigateur. Prenons l'exemple de Chrome, voici les résultats avant et après l'ajout de noms accessibles :

Arbre d'accessibilité après ajout noms accessibles — Arbre d'accessibilité dans Chrome après l'ajout de noms accessibles

On voit donc que le menu principal, le formulaire de recherche et le champ de recherche ont maintenant chacun un nom accessible. Certains éléments n'ont pas besoin de nom accessible :

pas de nom de liste ou de nom d'élément de liste ici car on sait déjà qu'on est dans le menu principal
pas de nom pour les éléments <banner>, <main>, et <contentinfo> car on sait déjà que ce sont les zones de page

On peut également remarquer dans cet arbre que tous les éléments pouvant recevoir le focus sont décrits comme "focusable". Il faut donc vérifier maintenant avec le code corrigé que l'ordre de tabulation pour le focus est le suivant, une fois que l'on a cliqué dans la zone de résultat :

Aller au contenu principal
Aller au formulaire de recherche
Menu 1
Menu 2
Champ de recherche
Bouton de recherche

On peut vérifier également que, lorsque le focus est sur le lien "Aller au formulaire de recherche" et qu'on tape "Entrée", le focus se déplace bien sur le champ de recherche.