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

1. Tester le niveau d’accessibilité d’un thème WordPress Claire Bizingre

2. Qui suis-je ? Claire Bizingre Consultante formatrice Accessibilité numérique et WordPress @accesbilis www.accesbilis.fr Claire Bizingre - WordCamp Paris 2016 2

3. Rappel sur les usages Claire Bizingre - WordCamp Paris 2016 Contraste élevé Grossissement Guide-doigts Lecteur d’écran Plage braille Smartphone 3

4. Origine des défauts d’accessibilité Claire Bizingre - WordCamp Paris 2016 Thème ContenuPlugin 4

5. Jeu de tests • Installation d’un site WordPress en local • Chargement de thèmes gratuits • Utilisation des sites de démonstration Claire Bizingre - WordCamp Paris 2016 5

6. 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 Claire Bizingre - WordCamp Paris 2016 6

7. Outils automatiques • Opquast Desktop (temesis) • aXe DevTools (deque) • Tenon check (tenon et plugin Access monitor) • a11y.css (ffoodd) Claire Bizingre - WordCamp Paris 2016 7

8. Extensions Firefox • Firebug • Web developer • HeadingsMap • WCAG Constrast checker • Accessibility Evaluator for Firefox Claire Bizingre - WordCamp Paris 2016 8

9. 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"> Claire Bizingre - WordCamp Paris 2016 « Ne pas interdire le zoom » <meta content="width=device-width, initial-scale=1" name="viewport"> 9

10. 2. Les régions Claire Bizingre - WordCamp Paris 2016 Extension Web Developer, Menu Infos, Afficher les rôles ARIA 10

11. 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> Claire Bizingre - WordCamp Paris 2016 <header role="banner"> <div role="search"><form…> <nav role="navigation"> <main role="main"> <footer role="contentinfo"> 11

12. 3. Les titres Claire Bizingre - WordCamp Paris 2016 Extension HeadingsMap • Au moins un titre h1 • Pas de rupture (h2 suivi de h4) • Hiérarchie cohérente 12

13. 4. Deux moyens de navigation Menu, Plan de site, Moteur de recherche Claire Bizingre - WordCamp Paris 2016 Au même endroit, sur toutes les pages 13

14. 5. Les liens icônes Extension Web developer, Menu Entourer, Éléments personnalisés, entourer les a et les button Claire Bizingre - WordCamp Paris 2016 → Pour aller en haut de la page → Pour afficher le menu 14

15. Détecter les liens icônes vides Extension Firebug, inspecter le code <a id="site-scroll-top" href="#top" class="show"> <span class="fa fa-chevron-up"></span> </a> Claire Bizingre - WordCamp Paris 2016 « 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

16. Texte caché et vocalisé Pas de display:none, ni de visibility:hidden https://make.wordpress.org/accessibility Claire Bizingre - WordCamp Paris 2016 .screen-reader-text { /*WordPress*/ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } 16

17. Détecter les liens images vides Extension Firebug, inspecter le code <a id="site-scroll-top" href="#top" class="show"> <img src="haut-de-page.png" alt="" /> </a> Claire Bizingre - WordCamp Paris 2016 « 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

18. 6. Title identique au lien Extension Web Developer Menu Infos, Afficher les attributs title Claire Bizingre - WordCamp Paris 2016 Pas d’attribut title identique à l’intitulé du lien (exception pour les lien icônes/images) 18

19. 7. Liens « lire la suite » Extension Web Developer, Menu Infos, Afficher les attributs title Claire Bizingre - WordCamp Paris 2016 19

20. Vérifier le code du lien Extension Firebug, Inspecter le lien <a href="url-article" class="more-link"> Lire la suite</a> Claire Bizingre - WordCamp Paris 2016 « 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

21. 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> Claire Bizingre - WordCamp Paris 2016 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

22. 8. Ouverture d’une fenêtre Extension Web Developer, Menu Infos, Afficher les infos des liens, Rechercher target="_blank" Claire Bizingre - WordCamp Paris 2016 22

23. Avertir de l’ouverture d’une fenêtre Autre solution : l’attribut aria-label Claire Bizingre - WordCamp Paris 2016 <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

24. 9. Visibilité du focus clavier Positionner la souris sur la barre d’adresse Utiliser la touche TAB et shift TAB Claire Bizingre - WordCamp Paris 2016 Attention à : :focus{ outline:none; } :hover associé à :focus 24

25. 10. Menu de navigation Positionner la souris sur la barre d’adresse Utiliser la touche TAB et shift TAB Voir si les sous-menus sont manipulables au clavier Claire Bizingre - WordCamp Paris 2016 25

26. 11. Liens d’évitement Positionner la souris sur la barre d’adresse Utiliser la touche TAB et shift TAB Au moins un lien "aller au contenu" doit apparaître Claire Bizingre - WordCamp Paris 2016 26

27. Intégrer les liens d’évitement • Premier élément interactif • "Aller au menu", "Aller à la recherche" si éloigné • Attention à la traduction • Doit être fonctionnel Claire Bizingre - WordCamp Paris 2016 <a href="#content" class="screen-reader-text"> Aller au contenu</a> <main id="content" role="main" tabindex="-1" /> 27

28. Rendre visible le lien d’évitement Claire Bizingre - WordCamp Paris 2016 .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

29. 12. Formulaire de recherche Extension Web Developer Menu Infos, Afficher les attributs title Claire Bizingre - WordCamp Paris 2016 29

30. Attribut title supprimé Liaison entre étiquette et champ (for, id) Claire Bizingre - WordCamp Paris 2016 <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

31. Autre solution L’attribut aria-label Claire Bizingre - WordCamp Paris 2016 <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

32. 13. Couleurs Claire Bizingre - WordCamp Paris 2016 Extension WCAG Contrast Checker Ratio 4.5 32

33. Améliorer le contraste Tanaguru Contrast-Finder Claire Bizingre - WordCamp Paris 2016 33

34. 14. Lien visible dans le contenu WCAG Contrast checker Ration 3.0 Claire Bizingre - WordCamp Paris 2016 34

35. 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 » Claire Bizingre - WordCamp Paris 2016 35

36. 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) Claire Bizingre - WordCamp Paris 2016 36

37. Solutions • Thème sur mesure (mu-plugins) • Thème existant gratuit ou acheté (thème enfant, copie du thème et modification, mu- plugins) Claire Bizingre - WordCamp Paris 2016 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

38. 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/ Claire Bizingre - WordCamp Paris 2016 38

39. 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/ Claire Bizingre - WordCamp Paris 2016 39

40. Merci de votre attention !