Tester le niveau d'accessibilité d'un thème WordPress

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

Claire Bizingre

Qui suis-je ?

Claire BizingreConsultante formatrice

Accessibilité numérique et WordPress

@accesbiliswww.accesbilis.fr

Claire Bizingre - WordCamp Paris 2016 2

Rappel sur les usages

Claire Bizingre - WordCamp Paris 2016

Contraste élevé

Grossissement Guide-doigts

Lecteur d’écranPlage braille

Smartphone

3

Origine des défauts d’accessibilité


Thème

ContenuPlugin

4

Jeu de tests

• Installation d’un site WordPress en local

• Chargement de thèmes gratuits

• Utilisation des sites de démonstration


Méthode

• Examen des défauts les plus fréquents

• Définition d’une liste de 15 points à tester

• Tests concernant le design et l’intégration des gabarits (issus du RGAA et des WCAG)

• Application des tests sur les pages types

• Proposition de corrections


Outils automatiques

• Opquast Desktop (temesis)

• aXe DevTools (deque)

• Tenon check (tenon et plugin Access monitor)

• a11y.css (ffoodd)


https://desktop.opquast.com/fr/

http://www.deque.com/products/axe/

http://www.tenon.io/

http://www.ffoodd.fr/a11y-css-version-deux/

Extensions Firefox

• Firebug

• Web developer

• HeadingsMap

• WCAG Constrast checker

• Accessibility Evaluator for Firefox


1. Meta viewport

Extension Firebug, inspecter le contenu de <head>

<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">


« Ne pas interdire le zoom »

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

9

2. Les régions


Extension Web Developer, Menu Infos, Afficher les rôles ARIA

10

Vérifier le code des régions

Extension Firebug, inspecter le code

• Unicité des rôles main, banner, contentinfo, search• Unicité de la balise <main>


<header role="banner"><div role="search"><form…><nav role="navigation"><main role="main"><footer role="contentinfo">

11

3. Les titres


Extension HeadingsMap

• Au moins un titre h1• Pas de rupture (h2 suivi de h4)• Hiérarchie cohérente

12

4. Deux moyens de navigation

Menu, Plan de site, Moteur de recherche


Au même endroit, sur toutes les pages

13

5. Les liens icônes

Extension Web developer, Menu Entourer, Éléments personnalisés, entourer les a et les button


→ Pour aller en haut de la page

→ Pour afficher le menu

14

Détecter les liens icônes vides


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

</a>


« Un lien doit avoir un intitulé »<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>

15

Texte caché et vocalisé

Pas de display:none, ni de visibility:hidden

https://make.wordpress.org/accessibility


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

}

16

Détecter les liens images vides


<a id="site-scroll-top" href="#top" class="show"><img src="haut-de-page.png" alt="" />

</a>


« L’alternative textuelle ne doit pas être vide »

<a id="site-scroll-top" href="#top" class="show"><img src="haut-de-page.png" alt="Retour en haut de page" />

</a>

17

6. Title identique au lien

Extension Web DeveloperMenu Infos, Afficher les attributs title


Pas d’attribut title identique à l’intitulé du lien (exception pour les lien icônes/images)

18

7. Liens « lire la suite »

Extension Web Developer, Menu Infos, Afficher les attributs title


Vérifier le code du lien

Extension Firebug, Inspecter le lien

<a href="url-article" class="more-link">Lire la suite</a>


« Rendre explicite le lien »

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

20

Autre solution

Utilisation de l’attribut title

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


Utilisation de l’attribut aria-label

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

21

8. Ouverture d’une fenêtre

Extension Web Developer, Menu Infos, Afficher les infos des liens,

Rechercher target="_blank"


Avertir de l’ouverture d’une fenêtre

Autre solution : l’attribut aria-label


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

Utilisation de l’attribut title

23

9. Visibilité du focus clavier

Positionner la souris sur la barre d’adresseUtiliser la touche TAB et shift TAB


Attention à ::focus{

outline:none;}

:hover associé à :focus

24

10. Menu de navigation

Positionner la souris sur la barre d’adresseUtiliser la touche TAB et shift TAB

Voir si les sous-menus sont manipulables au clavier


11. Liens d’évitementPositionner la souris sur la barre d’adresse

Utiliser la touche TAB et shift TABAu moins un lien "aller au contenu" doit apparaître


Intégrer les liens d’évitement

• Premier élément interactif• "Aller au menu", "Aller à la recherche" si éloigné• Attention à la traduction• Doit être fonctionnel


<a href="#content" class="screen-reader-text"> Allerau contenu</a>

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

27

Rendre visible le lien d’évitement


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

}

28

12. Formulaire de recherche

Extension Web DeveloperMenu Infos, Afficher les attributs title


Attribut title supprimé

Liaison entre étiquette et champ (for, id)


<form role="search" method="get" class="search-form"action="url">

<label for="search" class="screen-reader-text" > Rechercher :</label> <input id="search" name="search" type="text"value="" placeholder="Recherche…" ><input type="submit" value="Rechercher">

</form>

30

Autre solution

L’attribut aria-label


<div role="search" ><form method="get" class="search-form" action="url">

<input name="search" type="text" value=""placeholder="Recherche…" aria-label="Rechercher"><input type="submit" value="Rechercher">

</form> </div>

L’attribut role en dehors

31

13. Couleurs


Extension WCAG Contrast CheckerRatio 4.5

32

Améliorer le contraste

Tanaguru Contrast-Finder


14. Lien visible dans le contenu

WCAG Contrast checkerRation 3.0


15. Présentation du texte

Extension Firebug, inspecter le code CSS

• Texte non justifié• Interlignage suffisant (1.5)• Espace entre les paragraphes suffisant• Largeur de texte raisonnable (80 caractères)• Pas d’unité px sur la propriété « font-size »


Mais aussi

• <html <?php language_attributes(); ?> >• Contenu de la balise <title> pertinent• Valider le code• Attention à la traduction• Doubler la taille des caractères sans perte d’information

(zoom texte seulement)• Prévoir l’installation d’un fil d’Ariane (plugin)


Solutions

• Thème sur mesure (mu-plugins)• Thème existant gratuit ou acheté (thème

enfant, copie du thème et modification, mu-plugins)


Hooks :

add_filter( 'get_search_form', 'my_search_form' ); add_filter( 'the_content_more_link', 'my_morelink' );add_filter( 'wp_title', 'my_title', 10, 2);

37

Thèmes étudiés

• http://www.templateexpress.com/discovery/• http://eighties.me/• http://wptema.se/Aaron/• http://wpjurist.com/• http://wpexplorer-demos.com/elegant/• http://demo.presscustomizr.com/• http://themegrill.com/themes/spacious/• https://www.competethemes.com/apex/


http://www.templateexpress.com/discovery/

http://eighties.me/

http://wptema.se/Aaron/

http://wpjurist.com/

http://wpexplorer-demos.com/elegant/

http://demo.presscustomizr.com/

http://themegrill.com/themes/spacious/

https://www.competethemes.com/apex/

Pour aller plus loin

• Contenus accessibles : http://gta21.accesbilis.fr séminaire BrailleNet

• Notices AcceDe Web d’Atalan: http://www.accede-web.com/

• RGAA : https://references.modernisation.gouv.fr/rgaa-3-0

• WordPress a11y group : https://make.wordpress.org/accessibility/


http://gta21.accesbilis.fr/

http://www.accede-web.com/

https://references.modernisation.gouv.fr/rgaa-3-0

https://make.wordpress.org/accessibility/

Merci de votre attention !

Internet

Tester le niveau d'accessibilité d'un thème WordPress