Vérifier l’accessibilité de vos pages

Cet article explique comment repérer et corriger les défauts d’accessibilité qu’une machine sait reconnaître : dans l’éditeur, sur la page servie et dans le contraste de vos couleurs. Vous saurez aussi ce que ces outils ne vérifient pas.

Avant de commencer

Trois outils signalent les défauts d’accessibilité qu’une machine sait reconnaître. Chacun se trouve là où la correction coûte le moins.

Aucun constat n’empêche d’enregistrer ou de publier, pas même une erreur. Aucun de ces outils ne donne de taux ni ne déclare une page conforme.

Vérifier une page dans l’éditeur

1. Ouvrez la page dans l’éditeur.
2. Regardez l’icône Accessibilité de la barre d’outils. Une pastille rouge compte les erreurs, une pastille orange les points à revoir. Au-delà de neuf, elle affiche 9+.
3. Cliquez sur l’icône. Le panneau Accessibilité s’ouvre sur la section Contrôles automatiques.
4. Lisez chaque constat. Il commence par le numéro du critère RGAA concerné.
5. Cliquez sur Afficher le bloc sous le constat. Le bloc en cause est sélectionné.
6. Corrigez le bloc. Le constat disparaît du panneau.

Le panneau s’ouvre aussi par le menu ⋮ en haut à droite, puis Accessibilité. Il se met à jour pendant que vous modifiez la page. Une ligne en tête compte les points, par exemple Une erreur à corriger. Sans constat, il affiche Rien à signaler sur les contrôles qu’une machine peut trancher.

Lire les contrôles du panneau

Sur le contenu que vous écrivez

Seule une piste de sous-titres lève l’avertissement 4.3. Une piste d’audiodescription seule ne le lève pas.

Un titre réglé sur Rendre comme un élément non titré sort du plan de la page : le contrôle 9.1 ne le compte pas.

Sur la page entourée de son gabarit

Ces contrôles regardent la page avec l’en-tête, les menus et le pied de page de son gabarit. Ils se corrigent dans le gabarit et n’ont pas de lien Afficher le bloc.

Corriger les constats courants

Décrire une image

1. Cliquez sur Afficher le bloc sous le constat 1.1. Le bloc Média est sélectionné.
2. Dans l’onglet Réglages, panneau Média, remplissez le Texte alternatif avec ce que l’image montre.
3. Si l’image n’apporte aucune information, activez plutôt Image décorative.

Nommer un champ sans libellé visible

Un champ de recherche dans un en-tête se passe souvent de libellé visible. Écrivez le libellé, puis désactivez Afficher le libellé. Le libellé reste lu par les lecteurs d’écran et le constat 11.1 disparaît.

Distinguer deux menus

Quand une page porte deux zones de navigation, sélectionnez le conteneur du second menu dans le gabarit et remplissez Nom de la région, par exemple « Menu du pied de page ». L’avertissement disparaît.

Laisser un avertissement en l’état

Un avertissement peut rester si vous jugez qu’il n’y a rien à corriger. Une vidéo d’ambiance sans parole garde son avertissement 4.3, qui ne bloque rien. Une vidéo réglée sur Une seule fois, à l’apparition reste acceptable si elle dure moins de cinq secondes et n’a pas de son. Son contenu doit aussi figurer en texte dans la page. Sinon, repassez sa lecture sur Manuelle.

Vérifier la page servie avec le badge

1. Connectez-vous à l’administration de votre site.
2. Ouvrez la page sur votre site.
3. En bas à gauche, lisez le badge, par exemple Accessibilité : 2 à corriger.
4. Dépliez le badge. Chaque ligne donne le critère, le constat et, quand il vise un élément, un repère pour le retrouver : sa balise, son identifiant ou ses classes.

Une page sans constat n’affiche pas de badge. Le badge ne s’affiche qu’aux personnes connectées qui peuvent modifier les contenus : vos visiteurs ne le voient jamais.

Le badge lit la page complète, telle que le serveur l’envoie : la langue déclarée, l’en-tête et le pied de page, les listes de contenus et les formulaires une fois remplis, les liens tels qu’ils sont écrits dans la page. Il trouve donc des défauts que l’éditeur ne voit pas.

Sur la page servie, le premier titre peut appartenir à l’en-tête du site. Le badge vérifie donc qu’il y a un seul titre de niveau 1 et aucun niveau sauté. Il ne vérifie pas que ce titre vient en premier.

Vérifier le contraste de vos couleurs

1. Sélectionnez un bloc et ouvrez l’onglet Styles, panneau Couleurs.
2. Choisissez une couleur de texte et une couleur de fond.
3. Lisez le verdict sous le sélecteur, par exemple Contraste 4.7:1. Lisible (AA).

Seuls les verdicts à revoir sont en couleur : rouge pour un contraste trop faible, orangé pour un contraste réservé au grand texte. Quand le bloc a des couleurs propres au mode sombre, deux verdicts s’affichent, précédés de Mode clair : et Mode sombre :. Un site qui n’a qu’un mode n’en montre qu’un.

La couleur des liens n’entre pas dans le calcul, ni une image ou une vidéo d’arrière-plan. Pour un texte posé sur une image, regardez le résultat sur la page.

Compter sur les composants livrés

Une part de l’accessibilité est faite dans les blocs eux-mêmes, sans réglage de votre part.

Connaître les limites de ces outils

Le RGAA compte 106 critères, déclinés en 258 tests. Une machine n’en tranche qu’une petite partie, ce qui se constate dans le code de la page. Ces outils ne jugent pas :

• si un texte alternatif décrit vraiment l’image ;
• si l’intitulé d’un lien a du sens hors de son contexte ;
• si des sous-titres sont justes, complets et synchronisés ;
• si le libellé d’un champ se comprend ;
• si un texte posé sur une image, sur un dégradé ou sur le fond d’un bloc parent reste lisible ;
• si toute la page se parcourt au clavier dans le bon ordre.

Chaque page se vérifie à part : le panneau examine la page ouverte dans l’éditeur, le badge celle que vous visitez. Parcourir votre site connecté est la façon la plus rapide d’en faire le tour.

Voir aussi

• Colorer un bloc
• Créer un formulaire
• Ouvrir une modale ou un panneau latéral
• Média