![Page 1: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/1.jpg)
Tester le niveau d’accessibilité d’un thème WordPress
Claire Bizingre
![Page 2: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/2.jpg)
Qui suis-je ?
Claire BizingreConsultante formatrice
Accessibilité numérique et WordPress
@accesbiliswww.accesbilis.fr
Claire Bizingre - WordCamp Paris 2016 2
![Page 3: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/3.jpg)
Rappel sur les usages
Claire Bizingre - WordCamp Paris 2016
Contraste élevé
Grossissement Guide-doigts
Lecteur d’écranPlage braille
Smartphone
3
![Page 4: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/4.jpg)
Origine des défauts d’accessibilité
Claire Bizingre - WordCamp Paris 2016
Thème
ContenuPlugin
4
![Page 5: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/5.jpg)
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
![Page 6: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/6.jpg)
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
![Page 7: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/7.jpg)
Outils automatiques
• Opquast Desktop (temesis)
• aXe DevTools (deque)
• Tenon check (tenon et plugin Access monitor)
• a11y.css (ffoodd)
Claire Bizingre - WordCamp Paris 2016 7
![Page 8: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/8.jpg)
Extensions Firefox
• Firebug
• Web developer
• HeadingsMap
• WCAG Constrast checker
• Accessibility Evaluator for Firefox
Claire Bizingre - WordCamp Paris 2016 8
![Page 9: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/9.jpg)
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
![Page 10: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/10.jpg)
2. Les régions
Claire Bizingre - WordCamp Paris 2016
Extension Web Developer, Menu Infos, Afficher les rôles ARIA
10
![Page 11: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/11.jpg)
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
![Page 12: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/12.jpg)
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
![Page 13: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/13.jpg)
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
![Page 14: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/14.jpg)
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
![Page 15: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/15.jpg)
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
![Page 16: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/16.jpg)
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
![Page 17: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/17.jpg)
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
![Page 18: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/18.jpg)
6. Title identique au lien
Extension Web DeveloperMenu 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
![Page 19: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/19.jpg)
7. Liens « lire la suite »
Extension Web Developer, Menu Infos, Afficher les attributs title
Claire Bizingre - WordCamp Paris 2016 19
![Page 20: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/20.jpg)
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
![Page 21: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/21.jpg)
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
![Page 22: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/22.jpg)
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
![Page 23: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/23.jpg)
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
![Page 24: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/24.jpg)
9. Visibilité du focus clavier
Positionner la souris sur la barre d’adresseUtiliser la touche TAB et shift TAB
Claire Bizingre - WordCamp Paris 2016
Attention à ::focus{
outline:none;}
:hover associé à :focus
24
![Page 25: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/25.jpg)
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
Claire Bizingre - WordCamp Paris 2016 25
![Page 26: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/26.jpg)
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
Claire Bizingre - WordCamp Paris 2016 26
![Page 27: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/27.jpg)
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"> Allerau contenu</a>
<main id="content" role="main" tabindex="-1" />
27
![Page 28: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/28.jpg)
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
![Page 29: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/29.jpg)
12. Formulaire de recherche
Extension Web DeveloperMenu Infos, Afficher les attributs title
Claire Bizingre - WordCamp Paris 2016 29
![Page 30: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/30.jpg)
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
![Page 31: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/31.jpg)
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
![Page 32: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/32.jpg)
13. Couleurs
Claire Bizingre - WordCamp Paris 2016
Extension WCAG Contrast CheckerRatio 4.5
32
![Page 33: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/33.jpg)
Améliorer le contraste
Tanaguru Contrast-Finder
Claire Bizingre - WordCamp Paris 2016 33
![Page 34: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/34.jpg)
14. Lien visible dans le contenu
WCAG Contrast checkerRation 3.0
Claire Bizingre - WordCamp Paris 2016 34
![Page 35: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/35.jpg)
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
![Page 36: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/36.jpg)
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
![Page 37: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/37.jpg)
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
![Page 38: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/38.jpg)
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
![Page 39: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/39.jpg)
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
![Page 40: Tester le niveau d'accessibilité d'un thème WordPress](https://reader034.vdocuments.fr/reader034/viewer/2022052514/587e1c741a28abbc2e8b646b/html5/thumbnails/40.jpg)
Merci de votre attention !