[WordCamp] Tester le niveau d’accessibilité d’un thème WordPress

Nous allons voir ici comment on peut tester le niveau d’accessibilité d’un thème WordPress.

Notez que ces astuces peuvent être facilement transcrites à n’importe quel CMS.

Cette conférence a été réalisée par Claire Bizingre.

Voir les slides de la conférence

Améliorer l’accessibilité permet également d’améliorer le trafic.

Certaines personnes peuvent êtres amenées à utiliser des lecteurs d’écran ou des plages braille, passer le site en contraste élevé, grossir les pages web, utiliser des guides-doigts (dans ce cas là, la navigation se fait uniquement au clavier). Sur les smartphones il y a les lecteurs d’écran tels que VoiceOver.

Les défauts d’accessibilité peuvent provenir du core de WordPress, des plugins, des thèmes et du contenu.

Pour tester son site, on peut se baser sur les outils du RGAA et du WCAG.

Il existe également des outils automatiques :

Opquast a l’avantage de se baser sur le référentiel français alors que les autres se basent sur les référentiels américains.

Autres extensions Firefox :

Meta viewport

Il ne faut pas interdire le zoom dans la balise meta viewport :

<meta content="width=device-width, initial-scale=1" name="viewport">

Les régions

A chaque zone du site correspond une région.

  • Dans le header, on indiquera role="banner"
  • Pour la navigation, role="navigation"
  • Pour la recherche : role="search"
  • Dans le contenu de la page, role="main"
  • Et pour le footer : role="contentinfo"

Les titres

Pour vérifier la cohérence des titres sur une page, on peut utiliser l’extension HeadingsMap.

Il faut qu’il y ait au moins un titre h1 et pas de rupture entre les hn. Par exemple, on ne met pas un h2 suivi d’un h4, il faut absolument un h3 entre-eux.

2 moyens de navigation

Sur toutes les pages du site, situées au même endroit, il faut qu’il y ait 2 moyens de navigation. Par exemple, un menu et un moteur de recherche ou un plan du site. De cette façon, les personnes utilisant des lecteurs d’écrans pourront aller directement aux contenus qui les intéressent.

Les liens icônes

Pour créer des liens qui ne sont en fait que des pictos (afficher le menu sur tablette, retour en haut de page) il ne faut pas mettre de liens vides comme ci-dessous. Un lien doit toujours avoir un intitulé.

<a id="site-scroll-top" href="#top" class="show">
   <span class="fa fa-chevron-up"></span>
</a>

Il est préférable de mettre ceci :

<a id="site-scroll-top" href="#top" class="show">
   <span class="fa fa-chevron-up" aria-hidden="true"></span>
   <span class="screen-reader-text">Retour en haut de page</span>
</a>

Le texte ayant pour classe screen-reader-text sera caché et vocalisé. Il ne faut pas mettre de display:none. Indiquez ce css :

.screen-reader-text{
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   overflow: hidden;
   position: absolute !important;
   width: 1px;
}

Si vous avez mis une image entourée d’un lien, renseignez le alt="" de l’image.

Titre identique au lien

Pour éviter toute redondance, il faut supprimer les attibuts title="" qui sont identiques aux liens.

Liens « Lire la suite »

Il faut rendre les liens « lire la suite » explicites en indiquant le nom de l’article dans le lien. Exemple :

<a href="url-article" class="more-link">
  <span class="screen-reader-text">Bonjour tout le monde !</span>
   Lire la suite
</a>

L’autre solution consiste à utiliser l’attribut title ou aria-label.

Avec l’attribut title :

<a href="url-article" class="more-link" title="Bonjour tout le monde ! (Lire la suite)">
 Lire la suite
</a>

Avec l’attribut aria-label :

<a href="url-article" class="more-link" aria-label="Bonjour tout le monde ! (Lire la suite)">
 Lire la suite
</a>

Ouverture d’une nouvelle fenêtre

Il faut avertir les utilisateurs de l’ouverture d’un lien dans une nouvelle fenêtre. Comme précédemment, on peu utiliser l’attribut title ou aria-label.

<p>Propulsé par <a target="_blank" href="http://www.wordpress.org" title="WordPress (nouvelle fenêtre)">WordPress</a></p>

Visibilité du focus clavier

Il faut toujours mettre ses effets css au hover ET au focus. Et ne pas oublier le outline:none pour le focus afin que les utilisateurs voient où se trouve le lien.

Menu de navigation

Il faut que les menus de navigations ainsi que leurs sous-menus soient accessibles au clavier, avec les touches TAB et shift TAB

Liens d’évitement

Les liens d’évitement permettent aux utilisateurs de se rendre directement au contenu. Vous pouvez l’intégrer de cette façon :

<a href="#content" class="screen-reader-text">Aller au contenu</a>
<main id="content" role="main" tabindex="-1"></main>

Pensez à traduire ce lien d’évitement.

Voici le CSS pour le rendre visible :

.screen-reader-text:focus{
   display: block;
   clip: auto !important;
   height: auto;
   left: 5px;
   top: 5px;
   width: auto;
   z-index: 100000; /* Par dessus la WP Toolbar*/
}

Formulaire de recherche

Il faut laisser les attributs « title » sur les formulaires de recherche.

Il faut également penser à faire en sorte qu’il existe une liaison entre les champs label et input/select/textarea. Cette liaison se fait via l’attribut « for » du label et l’identifiant de l’input/select/textarea.

Si vous avez des placeholder (et que du coup vous n’avez plus de label), indiquez celui-ci à l’aide d’une balise aria-label dans le champ input/select/textarea.

Couleurs

Les couleurs sont également importantes car les personnes daltoniennes ne voient pas certaines couleurs et / ou contraste.

Vous pouvez vérifier ce contraste avec l’extension WCAG Contrast checker. Vous avez également le site Tanaguru Contrast Finder. Il vous propose de rentrer votre couleur de fond et de texte et vous donnera quelles couleurs vont et/ou ne vont pas.

Lien visible dans le contenu

Il faut faire en sorte de pouvoir différencier les liens dans le contenus en les mettant d’une couleur différente et en les soulignant.

Présentation du texte

  • Le texte ne doit pas être justifié, cela gêne la lecture
  • L’interlignage doit être suffisant, au moins 1.5
  • Il faut que l’espace entre les paragraphes soient suffisants
  • Largeur de texte raisonnable (80 caractères)
  • Il ne faut pas mettre d’unité px sur la propriété font-size. Privilégier les em et rem

Conclusion

  • Il faut indiquer la langue dans l’entête du site via la balise html.
  • Le contenu de la balise <title> doit être pertinent.
  • Penser à valider son code.
  • Attention à la traduction des thèmes
  • On doit pouvoir doubler la taille des caractères sans perte d’informations (le zoom ne doit être que sur le texte)
  • Prévoir un fil d’Ariane

Pour aller plus loin

 

Conférence de Claire Bizingre. Voir ses slides.