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

Marie Guillaumet, Access42

WordCamp Bordeaux – 23 mars 2019

Slides

a42.fr/wordpress

Merci à l’équipe du WordCamp Bordeaux et à leur sponsor, Yoast !

#wcbdx #YoastDiversityFund

Marie Guillaumet

  • Web designer, intégratrice,
    consultante et formatrice en accessibilité numérique
  • 100 % télétravail depuis Rennes
  • Utilisatrice de WordPress depuis 2005 👵🏻
  • Twitter : @kreestal

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
  • Twitter : @access42

WordPress, le logiciel qui propulse 33% du web

Rendons accessibles nos contributions à WordPress, notamment les thèmes dont nous nous servons et que nous distribuons.

Source : Français — WordPress, One-third of the web!

De quoi va-t-on parler ?

Fabrication de thèmes accessibles :

  • Besoins utilisateurs (beaucoup)
  • Front-end (beaucoup)
  • Design UI (aussi)

De quoi ne va-t-on pas parler ?

  • Back-end
  • Gutenberg
  • Contribution éditoriale
    (à quelques exceptions près 😇)

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

Un thème qui respecte le RGAA 3, la norme d’accessibilité en vigueur en France.

Le RGAA permet de vérifier que WCAG 2.0, les standards d’accessibilité du W3C, sont bien appliqués.

Note : une mise à jour du RGAA est en cours pour prendre en compte WCAG 2.1.

RGAA
Référentiel Général d’Accessibilité pour les Administrations
WCAG
Web Content Accessibility Guidelines

Pour en savoir plus

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

  • extensions utilisées
  • contribution éditoriale

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

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

Au programme

  1. Structurer correctement chaque template
  2. Faciliter la navigation
  3. Déclarer la bonne langue
  4. Concevoir des formulaires plus accessibles
  5. Concilier design graphique et accessibilité
  6. Respecter les préférences de l’utilisateur
  7. Délivrer de l’information utile
  8. Faire les bons choix

Conseil nº1 :  Structurer correctement chaque template

Balises HTML5 et landmarks

La structure d’un thème WordPress est souvent la même

  • un en-tête de page principal ;
  • une navigation principale et d’éventuelles navigations secondaires ;
  • le contenu principal ;
  • un pied de page qui contient des informations légales ou autres ;
  • éventuellement, un moteur de recherche.

Ces zones sont souvent faciles à identifier visuellement.

Mais il faut aussi les identifier précisément dans le code HTML pour que les personnes aveugles puissent les parcourir facilement avec leur lecteur d’écran.

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.

Besoins utilisateurs

  • Personnes aveugles et grands malvoyants (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 l’utilisez, implémentez-les dans votre thème enfant.

Liste des régions affichées par NVDA

Titre de la page : <title>

Le titre doit permettre de retrouver la page dans un historique de navigation

Archives, résultats de recherche : l’utilisateur doit pouvoir identifier facilement chaque page consultée dans son historique.

Besoins utilisateurs : personnes aveugles, grands malvoyants, personnes handicapées mentales ou cognitives.

Par exemple :

<title>Résultats de recherche pour [requête] – Page 2 sur 103 – [Titre du site]</title>

Astuce si vous utilisez Yoast SEO

Utilisez les variables pour générer la pagination dynamiquement.

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

a42.fr/wp-yoast-pagination

Hiérarchie de titres

Besoins utilisateurs

  • Personnes aveugles et grands malvoyants :
    • pouvoir naviguer de titre en titre,
    • pouvoir retrouver facilement de l'information dans le contenu.
  • Personnes handicapées moteur : naviguer plus vite grâce à des extensions navigateurs.

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

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

À noter :

  • on peut avoir plusieurs h1 dans une page ;
  • il n’est pas obligatoire que la hiérarchie de titres d’une page commence par un h1.

Comment vérifier la hiérarchie des titres ?

Hiérarchie de titres brisée sur wordpress.org

Penser à styler les 6 niveaux de titres

  • Documenter ces styles dans les maquettes ou le style guide du thème.
  • Intégrer ces styles en CSS : .entry-content h2, etc.

À noter : il est possible d’empêcher l’utilisation de h1 dans TinyMCE grâce à une fonction.

Listes

Besoins utilisateurs

Personnes aveugles et grands malvoyants : pouvoir naviguer de liste en liste, sauter une liste, connaître la longueur de la liste, identifier chaque lien dans une suite de liens, etc.

Les listes, comme les titres et les landmarks, offrent une expérience de navigation enrichie pour les utilisateurs de lecteur d'écran.

Bonnes pratiques

  • Utiliser de véritables listes HTML (ul, ol).
  • Structurer les successions de liens avec des listes.
  • Styler les listes en phase de design et d’intégration (y compris les listes imbriquées : ul ul, ol ol, ul ol, ol ul, etc.).
Côté édito :

Ne pas créer de fausses listes avec des tirets ou des astérisques !

Conseil nº2 :  Faciliter la navigation

Liens d’évitement

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

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

Besoins utilisateurs

  • Personnes qui naviguent exclusivement au clavier : contourner des zones redondantes d’une page à l’autre, grâce à des ancres. Personnes handicapées moteur principalement ; certaines personnes aveugles.

Bonnes pratiques

  • Au moins un lien d’accès rapide au contenu principal.
  • À placer tout en haut du DOM (mais après le bandeau de cookies).
  • C’est mieux si ces liens sont toujours affichés.
  • On peut aussi les masquer visuellement hors écran puis les faire réapparaître à la prise de focus (méthode .sr-only ou autre).
<ul>
  <li>
    <a href="#content" class="sr-only sr-only-focusable">
      <?php _e('Skip to content', 'textdomain'); ?>
    </a>
  </li>
</ul>

Démo sur Codepen : a42.fr/skip-links

Pro tip : Ajouter tabindex="-1" sur les cibles non interactives des liens d’évitement

Exemple :

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

Ordre de tabulation

Ordre de tabulation sur le site du WordCamp Bordeaux

Ordre de tabulation sur le site du WordCamp Bordeaux 2019.
(Capture d’écran réalisée avec l’option « Tab stops » de l’extension Accessibility Insights for Web.)

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

  • Tab ou Shift + Tab pour revenir en arrière.
  • 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.

À noter : il se peut que vous ayez besoin d’activer certaines options de votre navigateur et/ou de votre OS pour pouvoir parcourir les pages en tabulant.

Besoins utilisateurs

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

Item de menu actif

Besoins utilisateurs

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

Deux solutions

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

Ma fonction : a42.fr/wp-item-actif

Deux systèmes de navigation au moins

Besoins utilisateurs

  • Personnes handicapées mentales pour qui le fonctionnement d’un menu déroulant peut être perturbant : un moteur de recherche peut faire office de solution de secours.

Prévoir deux systèmes de navigation au moins parmi :

  • un menu de navigation – wp_nav_menu() ;
  • un moteur de recherche – get_search_form() ;
  • un plan du site – via extension ou fonction dédiée.

Veiller à ce que ces éléments aient une présentation et une position cohérentes dans chaque ensemble de pages.

Moteur de recherche

  • Si vous l’implémentez, il doit permettre d’atteindre tous les contenus publics du site : posts, pages, CPT (custom post types).
  • CPT publics : 'exclude_from_search' => false dans register_post_type().
  • Le moteur de recherche doit être situé toujours à la même place et dans le même ordre relatif du code source, dans chaque ensemble de pages.

Conseil nº3 :  Déclarer la bonne langue

Langue du thème

Besoins utilisateurs

  • Personnes aveugles et grands malvoyants qui écoutent la synthèse vocale de leur lecteur d’écran.

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.

Changements de langue

Indiquer les changements de langue en HTML

Assurer une restitution vocale correcte par les lecteurs d’écran.

<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…</p>
 </html>

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

Thème custom intégré par Geoffrey Crofte

Absence de changement de langue = problèmes de restitution vocale

La synthèse vocale du lecteur d’écran lit l’anglais comme du français, ce qui est vite incompréhensible.

Correction : ajout l’attribut lang="en" sur la liste en anglais

Code ci-dessous incorrect : il manque l’attribut [lang="en"] sur la liste ul.

<html lang="fr-FR">
  …
  <h4>Et bien plus encore !</h4>
  <p>Voici encore quelques changements notables (en anglais) :</p>
  <ul>
    <li>Cache API: Allow object caches to degrade gracefully (<a href="https://core.trac.wordpress.org/ticket/22661">#22661</a>)</li>
    …
  </ul>
</html>

Source : WordPress 5.1 «Betty» : résumé des évolutions et correctifs
Edit : suite à cette présentation, cela a été corrigé !

À retenir

Prévoir les changements de langue dans la traduction du thème et lors de la contribution éditoriale.

Abonnez-vous à notre <span lang="en">newsletter</span> !

Attention à traduire également les textes masqués.

<a href="#main" class="sr-only sr-only-focusable">
  <?php _e('Skip to content', 'textdomain'); ?>
</a>
Côté édito

On peut ajouter un bouton à TinyMCE avec l’extension AddQuicktag par exemple.

Export de mes réglages : a42.fr/wp-addquicktag

Conseil nº4 :  Concevoir des formulaires plus accessibles

Étiquettes

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).

Chaque étiquette doit :

  • être pertinente ;
  • être correctement reliée au champ correspondant (liaison for/id) ;
  • être accolée au champ pour aider l’utilisateur à se repérer plus facilement dans le formulaire.

Exception pour les champs isolés : un attribut title peut suffire.

Précaution à prendre dans Contact Form 7 (CF7)

Cocher impérativement la case « Entourer chaque élément avec un libellé ».

Paramètre use_label_element

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…).

Solution : toujours utiliser la liaison for/id !

<label for="name">
  Nom 
  <input type="text" id="name" />
</label>

Les labels seront bien restitués pour tous les utilisateurs, quelle que soit la technologie d'assistance dont ils se servent.

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.

Recommandations pour Contact Form 7

Installer l’extension Contact Form 7: Accessible Defaults.

Mais : cette extension est très limitée, elle ne corrige pas les labels des boutons radio ni des cases à cocher.

Correction via des shortcodes spéciaux : a42.fr/wp-cf7-label

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).

Solution :

  • doubler le placeholder d’un attribut title (obligatoire)
  • modifier la couleur du placeholder avec CSS (facultatif)

Regroupements de champs

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

Aides à la saisie, erreurs de saisie

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

Implémentation correcte des champs obligatoires dans Twenty Nineteen

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

Indiquer le format de saisie attendu

Indiquer le format de saisie attendu si :

  • le champ est obligatoire et qu’il attend un format de saisie particulier (email, date, téléphone…) ;
  • le champ est facultatif, qu’il attend un format de saisie particulier et qu’il y a un contrôle de saisie.

À noter :

  • au niveau AA, pas la peine d’indiquer le format de saisie attendu sur les champs facultatifs sur lesquels on ne vérifie pas la saisie ;
  • au niveau AAA, indiquer le format de saisie attendu pour tous les champs (obligatoires ou non, contrôle de saisie ou non).
Besoins utilisateurs

Personnes handicapées mentales :

  • problèmes de mémorisation et d’apprentissage ;
  • problématique des libellés différents d’un site à l’autre pour un même type de champ (« indiquez votre mail », « email », « courriel », « adresse de messagerie », etc.).

Adresse de messagerie (format attendu : nom@exemple.com) *

En savoir plus sur le critère 1.3.5 de WCAG 2.1, qui enrichit la propriété autocomplete pour faciliter la saisie.

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

Enrichir les erreurs de saisie dans WordPress

a42.fr/wp-comment-form

Adresse de messagerie invalide. Exemple : jeanne@outlook.com

  • Suppression de l’attribut novalidate sur le formulaire
  • Présence du type="email" sur le champ « Adresse de messagerie »
  • Ajout d’attribut required="required" sur les champs obligatoires, et pas uniquement aria-required="true"
  • Ajout du format de saisie attendu dans l’étiquette
  • Personnalisation des messages d’erreur du navigateur avec JavaScript
  • Intitulés personnalisables et prêts pour la traduction

Enrichir les libellés et messages d’erreur dans Contact Form 7

  • Champs obligatoires : indiquer le format attendu dans l’étiquette du champ lors de la configuration du formulaire.
  • Messages d’erreur : indiquer un exemple de saisie réelle dans l’onglet « Messages ».

Pro tip : harmoniser les différents libellés partout sur le thème (« email » vs. « adresse de messagerie »).

⚠️ Même en faisant tout ça, CF7 pose d’autres problèmes d’accessibilité…

Pause !

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

Conseil nº5 :  Concilier design graphique et accessibilité

Choisir des contrastes suffisants…

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.

Outils

À lire : A Design System Approach to Improving Usability through Color chez Automattic.

…ou permettre à l’utilisateur de renforcer les contrastes

Proposer un sélecteur de styles (style switcher)

Un mécanisme qui permet de concilier branding et accessibilité.

SNCF couleurs par défaut
Exemple : SNCF.com

Référence WCAG : technique C29.

Proposer un sélecteur de styles (style switcher) (2)

Un mécanisme qui permet de concilier branding et accessibilité.

SNCF contrastes renforcés
Exemple : SNCF.com

Référence WCAG : technique C29.

Proposer un sélecteur de styles (style switcher) (2)

Un mécanisme qui permet de concilier branding et accessibilité.

SNCF contrastes inversés
Exemple : SNCF.com

Référence WCAG : technique C29.

AccessConfig

AccessConfig par Acccess42, un sélecteur de styles léger et open source🎉

On annoncera bientôt sa sortie sur Twitter !

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

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.

Besoins utilisateurs
  • Personnes handicapées moteur qui naviguent exclusivement au clavier. Besoin de voir où se trouve le focus dans la page.
  • Personnes ayant des troubles de l’attention ou de la mémoire Besoin de retrouver rapidement où elles en étaient.

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

  • Titres (6 niveaux
  • Listes (dont imbriquées)
  • Légendes d’images
  • Citations (blocs et en ligne)
  • Liens
  • Galeries (taille des médias)
  • Formulaires (dont boutons)
  • Commentaires (dont imbriqués)

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

Conseil nº6 :  Respecter les préférences de l’utilisateur

Permettre l’agrandissement des caractères

CSS : déclarer les tailles de texte avec des unités relatives

  • Unités relatives : em, rem, %, etc.
  • Ne pas utiliser d’unités absolues (comme px) dans les déclarations font-size.
  • Facultatif : utiliser des unités sans valeur pour l’interlignage, afin qu’il s’adapte à la taille du texte en toute circonstance.
    Exemple : body{font-size:­100%;­line-height:­1.5}.

Ça se teste uniquement dans Firefox : Affichage > Zoom > Zoom texte seulement.

Ainsi :

  • les utilisateurs peuvent ajuster leur confort de lecture en zoomant ou dézoomant si besoin ;
  • les navigateurs peuvent adapter la taille du texte aux réglages faits par l’utilisateur dès le chargement de la page.

Attention : ajouter des boutons de type « A+ »/« A- » sur l’interface n’est pas suffisant.

Ne pas bloquer le zoom

HTML : soigner la meta viewport

Ne pas empêcher l’utilisateur de zoomer.

Zoom possible 👍
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
Zoom impossible 👎
<meta name="viewport" content="width=device-width,initial-scale=1.0,
maximum-scale=1.0,user-scalable=no" />

À noter : ceci n’est pas une recommandation officielle du RGAA 3.

Conseil nº7 :  Délivrer de l’information utile

Fichiers en téléchargement

Indiquer le poids, le format et si besoin la langue de chaque fichier téléchargeable

Ces informations permettent à l'utilisateur de connaître les caractéristiques du fichier et d’évaluer si oui ou non il va le télécharger.

Besoins utilisateurs

  • Personnes aveugles et grands malvoyants : certains formats bureautiques sont plus ou moins compatibles avec les technologies d’assistance.
  • Personnes handicapées mentales : l’indication de poids renseigne l’utilisateur sur le temps à attendre avant de pouvoir consulter le fichier.
  • Personnes handicapées moteur : elles peuvent rencontrer des difficultés pour passer facilement du navigateur au lecteur de fichier et inversement.

Shortcode [a11y_file]

a42.fr/wp-shortcode

Génère le lien de téléchargement d’un fichier (attachment) en indiquant son titre, son poids et son format (MIME type).

Pas de fonction native pour afficher la langue du fichier, mais cela pourrait être géré avec une extension comme Advanced Custom Fields par exemple.

Icônes de réseaux sociaux

Problèmes

Deux problèmes d’accessibilité récurrents pour les personnes aveugles :

  • ces liens n’ont pas d’intitulé ;
  • ils ne sont pas structurés avec une liste HTML.
(Mauvais) exemple : Neve
Icônes sociales du thème Neve

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

  • ajouter un intitulé dans chaque lien ;
  • structurer ces liens sous forme de liste HTML.
<h6><a href="…">Keep in touch</a></h6>
<ul>
  <li>
    <a href="https://www.facebook.com/">
      <span class="sr-only">Facebook</span>
    </a>
  </li>
  <li>
    <a href="https://twitter.com/">
      <span class="sr-only">Twitter</span>
    </a>
  </li>
  …
</ul>

Solution 2 : lien + image HTML

  • renseigner l’attribut alt en indiquant la destination du lien.
<h6><a href="…">Keep in touch</h6></a></h6>
<ul>
  <li>
    <a href="https://www.facebook.com/">
      <img src="path/to/fb.png" alt="Facebook" />
    </a>
  </li>
  <li class="neve-second-social">
    <a href="https://twitter.com/">
      <img src="path/to/tw.png" alt="Twitter" />
    </a>
  </li>
  …
</ul>

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
<h6><a href="…">Keep in touch</h6></a></h6>
<ul>
  <li>
    <a href="https://www.facebook.com/">
      <svg role="img" aria-label="Facebook">
        <title>Facebook</title>
        …
      </svg>
    </a>
  </li>
  …
</ul>

Ne pas oublier de créer des chaînes de traduction !

aria-label="<?php _e('Facebook', 'textdomain'); ?>

etc.

ARIA

ARIA : Accessible Rich Internet Application

Modèles de conception pour composants dynamiques.

Définit notamment les comportements clavier à implémenter en JavaScript.

  • Fenêtres modales
  • systèmes d’onglets
  • toggles
  • carrousels
  • zones mises à jour dynamiquement
  • etc

Attention : si vous pouvez utiliser un élément natif HTML au lieu d'un élément développé avec ARIA, faites-le (boutons, liens, titres…).

Conseil nº8 :  Faire les bons choix

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é.

En pratique

Pas de réelle garantie qu’un thème ou une extension est conforme WCAG ou RGAA sans formation et sans audit.

“Web site accessibility will only be broadly implemented if everybody who builds websites or web tools understands what they are personally doing wrong.”

Joe Dolson, Your Accessibility Toolbar Doesn’t Help

Quelques conseils

  • Si vous savez coder : développez votre propre thème et améliorez-le au fur et à mesure.
  • Si vous ne savez pas coder : privilégiez les thèmes officiels et créez un thème enfant pour les patcher.
  • Signalez les problèmes à l’auteur ou l’autrice du thème avant de l’afficher en public.
  • Demandez de l’aide par exemple sur WordPress francophone ou via #a11y sur Twitter.
  • Si vous êtes à l’aise : contribuez à WordPress !

Conclusion

À vous de jouer !

Merci de votre attention !

Tête de Shera

Suivez-nous sur Twitter : @access42net@kreestal

Slides : a42.fr/wordpress