8 conseils pour améliorer l’accessibilité de votre thème WordPress

Besoins utilisateurs

• Personnes aveugles et grands malvoyants qui ne perçoivent pas la mise en forme visuelle.

Besoins utilisateurs

• Les personnes aveugles qui utilisent la tabulation pour parcourir les champs d'un formulaire ;
• les grands malvoyants qui naviguent avec une loupe d’écran ;
• les personnes qui naviguent à la voix (handicap moteur).

Point d’attention : les labels implicites

Label implicite = absence de liaison for/id.

<label>
  Nom 
  <input type="text" />
</label>

1. Cette implémentation n’est pas toujours bien restituée par les lecteurs d’écran, par ex. avec input[type="number"].
2. On ne sait pas si c’est compatible avec d’autres technologies d’assistance (contrôle à la voix, eye tracking…).

Mes recommandations pour WordPress

• ne pas utiliser le widget « Rechercher » ;
• utiliser à la place la fonction get_search_form() ;
• utiliser le template searchform.php ;
• y implémenter un label et un input correctement reliés (s’inspirer de Twenty Seventeen ou Twenty Eleven si besoin).

À noter

En cas d’appel de get_search_form() sans ajouter le template searchform.php à votre thème, le formulaire généré par WordPress sera le même que celui du widget, qui contient un label implicite qui n’est pas correctement relié au champ de recherche… À éviter, donc.

Autre point d’attention : les placeholders

<input type="search" placeholder="Rechercher" />

1. Les placeholders ne sont pas toujours restitués par les lecteurs d’écran ;
2. Problème de contrastes (gris clair sur fond blanc).

Besoins utilisateurs

Personnes aveugles :

• Vocalisation de la légende lors de la prise de focus dans le premier champ du regroupement.
• À la fin d'un regroupement, indication explicite ou signal sonore prévenant l’utilisateur de la sortie du regroupement.

Bonnes pratiques

• Regrouper les champs de type radio ou checkbox avec fieldset.
• Chaque balise fieldset doit contenir une balise legend pour créer un « titre » au regroupement.

<form>
  <fieldset>
    <legend>Utilisez-vous WordPress ?</legend>
      <p><label for="yes"><input type="radio" id="yes" name="wordpress" /> Oui</label></p>
      <p><label for="no"><input type="radio" id="no" name="wordpress" /> Non</label></p>
      <p><button type="submit">Valider</button></p>
    </fieldset>
</form>

Correction pour Contact Form 7 : a42.fr/wp-cf7-label

• Références RGAA 3 :
• 11.5 [A]
• 11.6 [A]
• 11.7 [A]

Champs obligatoires

Si vous distinguez les champs obligatoires des autres, faites-le de manière accessible :

• indication textuelle dans l’étiquette ;
• indication par un symbole : légende avant les champs. Attention au pseudo-éléments CSS.
• indication par la couleur : doubler la couleur d’un symbole.

Besoins utilisateurs

• Personnes aveugles
• Personnes déficientes visuelles ne percevant pas ou mal les couleurs et/ou utilisant des CSS personnelles

Dans Contact Form 7 : ajouter la légende manuellement avant les champs.

• Référence RGAA 3 :
• 11.10 [A]

Erreurs de saisie

Besoins utilisateurs

Personnes handicapées mentales :

• difficultés à saisir l’abstraction ;
• un exemple de saisie réelle sera identifié plus facilement :
  • 06 98 08 50 41 plutôt que XX XX XX XX XX
  • jean.dupont@gmail.com plutôt que nom@exemple.com

Rapports de contrastes accessibles

Rapports de contrastes définis par le RGAA : a42.fr/contrastes

Ils dépendent :

• de la taille du texte ;
• mais aussi de sa graisse.

À noter :

Dans WCAG 2.1, les éléments d’interface porteurs d’information et leurs états sont également concernés par cette exigence de contraste. Cf. Non-text Contrast (1.4.11 AA).

Besoins utilisateurs

• Personnes déficientes visuelles qui ne perçoivent pas ou mal les couleurs et les contrastes.

Outline

• ne pas le supprimer avec les propriétés CSS outline, outline-color, outline-widthou outline-style ;
• ne pas le dégrader avec la propriété CSS outline-color.

Mais vous pouvez le renforcer !

À noter :

La pseudo-classe :focus-visible fait apparaître l’outline à la tabulation uniquement, et pas au clic. Mauvais support mais polyfill disponible.

Solution 1 : lien + image CSS ou pseudo-élément CSS

• ajouter un intitulé dans chaque lien ;
• structurer ces liens sous forme de liste HTML.

Solution 2 : lien + image HTML

• renseigner l’attribut alt en indiquant la destination du lien.

Solution 3 : lien + image SVG

• attribut role="img" sur la balise svg
• attribut aria-label contenant la destination du lien, sur la balise svg
• balise title contenant la destination du lien, à l’intérieur de la balise svg

En théorie

Plein de thèmes tagués « accessibility-ready » dans l’annuaire officiel de thèmes WordPress.

Des tas d’extensions soit-disant miraculeuses pour patcher l’accessibilité.