Comment améliorer l’accessibilité de votre thème WordPress ?

Marie Guillaumet, Access42

BlendWebMix – 13 novembre 2019

Slides

a42.fr/blend2019

Marie Guillaumet

  • Experte en accessibilité numérique, formatrice et designer
  • 100 % télétravail depuis Rennes.
  • Utilisatrice de WordPress depuis 2005 👵🏻
  • LinkedIn : Marie Guillaumet

Access42

  • Entreprise solidaire d’utilité sociale (ESUS), spécialisée en accessibilité numérique
  • 9 personnes
  • Accompagnement/stratégie, conseil, audit et formations
  • Rédacteur du RGAA 3
  • LinkedIn : Access42
Photo de Marie et de son chat Gérard.

WordPress, le logiciel qui propulse 34% du web

Des thèmes WordPress plus accessibles = un web plus accessible

Sources :

Trouver un thème WordPress accessible, c’est compliqué

Mauvaise nouvelle

Les thèmes « Accessibility Ready » ne garantissent rien.

Bonne nouvelle

La demande est énorme. Tout reste à faire.
Dahu dans son habitat naturel, le flanc d’une montagne.
Illustration de Philippe Semeria, licence CC BY 3.0.

Qu’entend-on par « thème accessible » ?

« All new or updated code released into WordPress core and bundled themes must conform with the WCAG 2.0 guidelines at level AA. »

WordPress goes WCAG

Norme internationale

WCAG 2.1 : Web Content Accessibility Guidelines du W3C

En Europe

Norme européenne EN 301 549 V2.1.2 (2018-08) (PDF, 2 Mo, anglais)

En France

RGAA 4 (Référentiel général d’amélioration de l’accessibilité)

Ce que l’on va voir

  • Besoins utilisateurs/trices
  • Front-end
  • Design UI
  • Ressources

Ce que l’on ne va pas voir

  • Back-end
  • Gutenberg
  • Contribution éditoriale
  • Création d’extensions

Limites à la création d’un thème accessible

  • extensions
  • contribution éditoriale

Un thème accessible ne garantit pas que votre site sera entièrement accessible.

Mais un site ne peut être accessible que si votre thème l’est.

1. Bien structurer les templates

Balises HTML5 et landmarks

Structurez vos templates avec HTML5 + ARIA

  • header[role="banner"] pour l’en-tête de la page ;
  • nav[role="navigation"] pour la navigation principale, et les éventuelles navigations secondaires (système de pagination, fil d’Ariane…) ;
  • main[role="main"] pour la zone de contenu principale ;
  • footer[role="contentinfo"] pour le pied de page principal ;
  • [role="search"] autour du moteur de recherche.

À noter :

  • les rôles ARIA banner, main, contentinfo et search doivent être uniques dans la page ;
  • le rôle ARIA navigation est réservé aux zones de navigations principales et secondaires ;
  • ne tenez pas compte des avertissements remontés par le validateur du W3C à propos des landmarks. Ce ne sont pas des erreurs.
  • Référence RGAA 4 :
  • 12.6

Besoins utilisateurs

  • Personnes aveugles et très malvoyantes (lecteurs d’écran)
  • Personnes handicapées moteur (extensions navigateurs)
    Exemple : Landmarks pour Firefox

Attention : Twenty Nineteen n’implémente pas les landmarks ARIA. Si vous utilisez ce thème, n’hésitez pas à les implémenter dans votre thème enfant.

Liste des régions affichées par le lecteur d’écran NVDA

Comment vérifier qu’un thème est bien structuré ?

Extension Landmarks pour Firefox, Chrome et Opera.

Attention : fouiner dans le code source pour s'assurer que les landmarks sont bien positionnés.

Titre de la page : balise <title>

Le titre de la page doit permettre de la retrouver dans l’historique de navigation

  • Références RGAA 4 :
  • 8.5
  • 8.6

Besoins utilisateurs

  • Personnes aveugles ou très malvoyantes
  • Personnes handicapées mentales ou cognitives

Si vous utilisez Yoast SEO :

Utilisez les « variables de métadonnées » pour générer un titre accessible dynamiquement :

%%searchphrase%% : résultats %%pagenumber%% sur %%pagetotal%% %%sep%% %%sitename%%

<title>[requête] : résultats [n] sur [total] – [Titre du site]</title>

a42.fr/wp-yoast-pagination

Hiérarchie de titres dans la page

h1, h2, h3, h4, h5, h6

Ce qu’il faut éviter : une hiérarchie de titres incomplète ou brisée

Par exemple, un titre h4 ne peut pas suivre un titre h2 : il faut forcément qu’il suive un titre h3.

  • Référence RGAA 4 :
  • 9.1

Comment vérifier la hiérarchie des titres ?

⚠️ aux faux positifs ! Web Developer ne détecte pas les role="heading". HeadingsMap les détecte, mais calcule automatiquement le niveau de titre en cas d’absence de aria-level.

Besoins utilisateurs

  • Personnes aveugles et très malvoyantes : naviguer de titre en titre
  • Personnes handicapées moteur : naviguer plus vite grâce à des extensions navigateurs.

Prévoyez le style des 6 niveaux de titres

  1. Documentez ces styles dans les maquettes ou le style guide du thème.
  2. Intégrez ces styles en CSS : .entry-content h2, etc.

Pro tip : il est possible d’empêcher l’utilisation de h1 dans les publications grâce à une fonction qui modifie TinyMCE.

2. Faciliter la navigation

Liens d’accès rapide

Fonctionnement des liens d’évitement sur Twenty Nineteen (1)

Fonctionnement des liens d’évitement sur Twenty Nineteen (2)

Points à vérifier

  • Au moins un lien d’accès rapide au contenu principal.
  • À placer tout en haut du DOM, après le bandeau de cookies.
  • Référence RGAA 4 :
  • 12.7

Besoins utilisateurs

Personnes qui naviguent exclusivement au clavier : pouvoir contourner des zones redondantes d’une page à l’autre grâce à des ancres.

Personnes handicapées moteur principalement.

Mais aussi certaines personnes aveugles.

Côté design

<ul>
  <li>
    <a href="#content" class="sr-only sr-only-focusable">
      <?php _e('Skip to content', 'textdomain'); ?>
    </a>
  </li>
</ul>

Démo : a42.fr/skip-links

Pro tip

Ajouter tabindex="-1" sur les cibles non interactives des liens d’évitement pour améliorer l’interopérabilité.

Exemple :

<main id="content" role="main" tabindex="-1">…</main>

Attention : bug isolé dans Firefox sous Android.

Item de menu actif

Deux solutions pour donner l’information à tout le monde

  • Ajouter un attribut title sur l’élément actif, sur le modèle : [Intitulé de l’item] – page active 
    <ul>
  <li class="menu-item current-menu-item">
    <a href="http://example.com" title="Accueil – page active">Accueil</a>
  </li>
  …
</ul>
  • Ajouter un texte masqué hors écran dans l’intitulé de l’item. a42.fr/wp-item-actif

Besoins utilisateurs

  • Personnes aveugles qui ne perçoivent pas du tout la mise en forme.
  • Personnes malvoyantes qui perçoivent mal la mise en forme visuelle (problème de perception des couleurs, daltonisme, par exemple).

Par défaut

L’élément actif du menu est indiqué en vert.

Daltonisme (deutéranopie – pas de vert)

L’élément actif n’est pas discernable par rapport aux items inactifs.

La présence d’un titre de lien ne se révèle qu’au survol de l’élément actif.

Par défaut

L’élément actif du menu est indiqué en vert.

Solution idéale : couleur d’arrière-plan + forme + title

L’élément actif est indiqué avec une couleur d’arrière-plan, un souligné et un titre de lien.

Pause !

(Cette page contient une photo du chat de Marie en arrière-plan, sur laquelle est superposée une bulle « T’as pas soif ? ».)

Ordre de tabulation

Testez votre thème en utilisant uniquement la touche Tab de votre clavier

  • Tab pour avancer
  • Shift + Tab pour revenir en arrière

Bookmarklet pour visualiser le déplacement du focus.

Pro tip : il faut parfois activer certaines options de votre navigateur et/ou de votre OS pour pouvoir parcourir les pages en tabulant.

Par exemple : Activer la prise de focus dans Firefox sur MacOS.

Points à vérifier

  • L’ordre de tabulation doit être cohérent, y compris en RTL (right to left).
  • Repérez et supprimez les éventuels pièges au clavier.

Besoins utilisateurs

  • Personnes handicapées moteur
  • Personnes aveugles et déficientes visuelles

Site de la Ville de Lyon

lyon.fr

Site de la Ville de Lyon : ordre de tabulation

Capture d’écran réalisée avec l’option « Tab stops » de l’extension Accessibility Insights for Web.

Visibilité de la prise de focus (outline)

L’outline indique la position du focus

Champ de formulaire.
Champ de formulaire ayant pris le focus : l’outline apparaît autour.

C’est un repère visuel indispensable pour les personnes qui naviguent au clavier.

Outline : deux possibilités

  • Ne pas le supprimer ni le dégrader, et laisser les navigateurs faire leur travail.
  • Le renforcer : dans ce cas, il doit être suffisamment contrasté avec l’arrière-plan.
  • Référence RGAA 4 :
  • 10.7
Besoins utilisateurs
  • Personnes handicapées moteur : repérer où se trouve le focus dans la page.
  • Personnes ayant des troubles de l’attention ou de la mémoire : retrouver rapidement où elles en étaient.

Pour en finir avec « L’outline c’est moche  »

La pseudo-classe :focus-visible n’affiche l’outline que lorsqu’on navigue au clavier.

Le support est encore mauvais mais un polyfill existe.

Un moteur de recherche accessible

Plusieurs points à vérifier pour un formulaire au poil

Placeholder
  • Vérifier la présence d’une étiquette pertinente (label ou title identique au placeholder par exemple).
  • L’étiquette doit reprendre le texte visible à l’écran pour que le formulaire puisse être activé à la voix.
Bouton
  • Le bouton doit avoir un intitulé : attention aux boutons contenant une « icon font ».
Design
  • Le moteur de recherche doit être atteignable de manière identique.
  • Vérifier et renforcer les contrastes.
Landmark
  • Présence d’un attribut role="search" unique dans la page sur le conteneur du formulaire.

Les résultats de recherche

  • Le moteur de recherche doit permettre d’atteindre toutes les publications publiques du site.
  • « Custom post types » publics : régler exclude_from_search sur false dans la fonction register_post_type().
  • Référence RGAA 4 :
  • 12.1

3. Déclarer la bonne langue

Langue du thème

Langue de WordPress

Configurer WordPress dans la même langue que la langue principale de rédaction.

Langue du site : Français

Langue du thème

Utiliser language_attributes() sur la balise html.

  • Références RGAA 4 :
  • 8.3
  • 8.4

Besoins utilisateurs

  • Personnes aveugles et très malvoyantes qui écoutent la synthèse vocale de leur lecteur d’écran.

Changements de langue

Indiquez les changements de langue en HTML

Cela permet d’assurer que la restitution vocale par les lecteurs d’écran sera correcte.

  • Références RGAA 4 :
  • 8.7
  • 8.8
<html lang="en">
  …
  <h3 class="h3-like work-title" lang="fr">
    <span lang="en">(French)</span> L’UX au service de la performance de vos interfaces
  </h3>
  <p>For the first edition of…</p>
 </html>

Exemple : Stéphanie Walter - Speaking, writing and teaching

Thème custom intégré par Geoffrey Crofte

L’absence de changement de langue dans le HTML entraîne des problèmes de restitution

Voici ce qu’une personne aveugle entend quand il manque l’attribut [lang="en"] sur un texte en anglais dans une page web déclarée en français :

Source : Advancements and tensions in Enterprise UX Research and Design: From usability and icons to context and design systems – BlendWebMix

Correction : ajout de l’attribut [lang]

Voici ce qu’une personne aveugle entendra lorsque le changement de langue sera correctement déclaré :

<html lang="fr-FR">
  …
  <body>
    <h1 lang="en">Advancements and tensions in Enterprise UX Research and Design: From usability and icons to context and design systems</h1>
  </body>
</html>

Pro tip

Ajouter un bouton à TinyMCE pour simplifier la saisie des changements de langue lors de la contribution éditoriale.

Attention à la langue des textes masqués dans votre thème (liens d’accès rapide, etc.).

4. Concilier design UI et accessibilité

Choisir des contrastes suffisants

Contrastes et accessibilité

Besoins utilisateurs : personnes déficientes visuelles qui ne perçoivent pas ou mal les couleurs et les contrastes.

Pour être accessibles, les contrastes dépendent :

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

Non-text contrast

Attention ! L’exigence de contraste concerne désormais aussi :

  • les éléments d’interface porteurs d’information ;
  • leurs états (survol, focus, …).

Par exemple : contrôles de carrousels, boutons icônes, notes sous forme d’étoiles, diagrammes, champs de formulaires, etc.

Colour Contrast Analyzer

Colour Contrast Analyzer, appli gratuite MacOS et Windows

Accessible Brand Colors

Accessible Brand Colors calcule le niveau de contrastes des couleurs d’une même charte graphique entre elles.

Contrast Checker d’Asquatasun

Contrast Checker propose des couleurs alternatives très proches si les vôtres ne sont pas assez contrastées.

AccessConfig

AccessConfig, un style switcher léger et open source. À implémenter lorsque les contrastes de votre charte graphique sont insuffisants.

Styler les éléments utiles pour l’accessibilité

Penser à styler les éléments d’interface courants

  • Titres : 6 niveaux
  • Listes : ordonnées, non ordonnées, imbriquées
  • Légendes d’images
  • Citations : blocs et en ligne
  • Liens : attention à la sup­pres­sion du souligné

La liste continue juste après.

  • Formulaires dont boutons, légendes, etc.
  • Commentaires dont imbriqués
  • Tableaux et titres de tableaux
  • Contrastes des textes et des éléments gra­phi­ques porteurs d’infor­ma­tion

À lire : [Pense-bête] Design d’un thème WordPress : liste des pages à ne pas oublier de Christelle Mozzati

5. Conseils pour choisir un thème accessible

Où trouver des thèmes accessibles ?

Annuaire officiel de thèmes WordPress

Annuaire officiel de thèmes WordPress, tag « Accessibility Ready ». 107 thèmes disponibles en novembre 2019.

Tableau de bord WordPress

Les thèmes « accessibility-ready » sont également disponibles depuis le Tableau de bord de WordPress.
Apparence > Thèmes > Ajouter des thèmes > Sélectionner l’option « Optimisé pour l’accessibilité ».

3 points d’accessibilité à vérifier avant d’adopter un thème

Faites vos corrections dans un thème enfant.

Signalez les problèmes à l’auteur ou l’autrice du thème avant de critiquer en public.

Outils automatiques de détection

⚠️ Ils ne détectent que 20% des problèmes d’accessibilité en moyenne.

  • DevTools de Firefox
  • DevTools de Chrome
  • Wave
  • RGAA Assistant (RGAA 3) :

Conclusion

Votre voyage ne fait que commencer

  • L’accessibilité n’est pas une fonctionnalité : c’est un travail au long cours.
  • Il faut en tenir compte dès le début.
  • Formez-vous, soyez à l’écoute, cherchez du feedback.

L’union fait la force

Ensemble,
rendons le web accessible !

Merci de votre attention !

Tête de Gérard

Slides : a42.fr/blend2019

  • Script de support de présentation AccesSlide développé par Access42 sous licence GPL.
  • Icônes par Arthur Shlain, Made by Made pour the Noun Project.