Tester le niveau d’accessibilité
d’un thème WordPress
Claire
Bizingre
Qui suis-je ?
Claire Bizingre
Consultante formatrice
Accessibilité numérique et WordPress
@accesbilis
www.accesbilis.fr
Cl...
Rappel sur les usages
Claire Bizingre - WordCamp Paris 2016
Contraste élevé
Grossissement Guide-doigts
Lecteur d’écran
Pla...
Origine des défauts d’accessibilité
Claire Bizingre - WordCamp Paris 2016
Thème
ContenuPlugin
4
Jeu de tests
• Installation d’un site WordPress en local
• Chargement de thèmes gratuits
• Utilisation des sites de démons...
Méthode
• Examen des défauts les plus fréquents
• Définition d’une liste de 15 points à tester
• Tests concernant le desig...
Outils automatiques
• Opquast Desktop (temesis)
• aXe DevTools (deque)
• Tenon check (tenon et plugin Access monitor)
• a1...
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,
max...
2. Les régions
Claire Bizingre - WordCamp Paris 2016
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
• ...
3. Les titres
Claire Bizingre - WordCamp Paris 2016
Extension HeadingsMap
• Au moins un titre h1
• Pas de rupture (h2 suiv...
4. Deux moyens de navigation
Menu, Plan de site, Moteur de recherche
Claire Bizingre - WordCamp Paris 2016
Au même endroit...
5. Les liens icônes
Extension Web developer, Menu Entourer,
Éléments personnalisés, entourer les a et les button
Claire Bi...
Détecter les liens icônes vides
Extension Firebug, inspecter le code
<a id="site-scroll-top" href="#top" class="show">
<sp...
Texte caché et vocalisé
Pas de display:none, ni de visibility:hidden
https://make.wordpress.org/accessibility
Claire Bizin...
Détecter les liens images vides
Extension Firebug, inspecter le code
<a id="site-scroll-top" href="#top" class="show">
<im...
6. Title identique au lien
Extension Web Developer
Menu Infos, Afficher les attributs title
Claire Bizingre - WordCamp Par...
7. Liens « lire la suite »
Extension Web Developer,
Menu Infos, Afficher les attributs title
Claire Bizingre - WordCamp Pa...
Vérifier le code du lien
Extension Firebug, Inspecter le lien
<a href="url-article" class="more-link">
Lire la suite</a>
C...
Autre solution
Utilisation de l’attribut title
<a href="url-article" class="more-link" title="Bonjour
tout le monde ! (Lir...
8. Ouverture d’une fenêtre
Extension Web Developer,
Menu Infos, Afficher les infos des liens,
Rechercher target="_blank"
C...
Avertir de l’ouverture d’une fenêtre
Autre solution : l’attribut aria-label
Claire Bizingre - WordCamp Paris 2016
<p>Propu...
9. Visibilité du focus clavier
Positionner la souris sur la barre d’adresse
Utiliser la touche TAB et shift TAB
Claire Biz...
10. Menu de navigation
Positionner la souris sur la barre d’adresse
Utiliser la touche TAB et shift TAB
Voir si les sous-m...
11. Liens d’évitement
Positionner la souris sur la barre d’adresse
Utiliser la touche TAB et shift TAB
Au moins un lien "a...
Intégrer les liens d’évitement
• Premier élément interactif
• "Aller au menu", "Aller à la recherche" si éloigné
• Attenti...
Rendre visible le lien d’évitement
Claire Bizingre - WordCamp Paris 2016
.screen-reader-text:focus {
display:block;
clip: ...
12. Formulaire de recherche
Extension Web Developer
Menu Infos, Afficher les attributs title
Claire Bizingre - WordCamp Pa...
Attribut title supprimé
Liaison entre étiquette et champ (for, id)
Claire Bizingre - WordCamp Paris 2016
<form role="searc...
Autre solution
L’attribut aria-label
Claire Bizingre - WordCamp Paris 2016
<div role="search" >
<form method="get" class="...
13. Couleurs
Claire Bizingre - WordCamp Paris 2016
Extension WCAG Contrast Checker
Ratio 4.5
32
Améliorer le contraste
Tanaguru Contrast-Finder
Claire Bizingre - WordCamp Paris 2016 33
14. Lien visible dans le contenu
WCAG Contrast checker
Ration 3.0
Claire Bizingre - WordCamp Paris 2016 34
15. Présentation du texte
Extension Firebug, inspecter le code CSS
• Texte non justifié
• Interlignage suffisant (1.5)
• E...
Mais aussi
• <html <?php language_attributes(); ?> >
• Contenu de la balise <title> pertinent
• Valider le code
• Attentio...
Solutions
• Thème sur mesure (mu-plugins)
• Thème existant gratuit ou acheté (thème
enfant, copie du thème et modification...
Thèmes étudiés
• http://www.templateexpress.com/discovery/
• http://eighties.me/
• http://wptema.se/Aaron/
• http://wpjuri...
Pour aller plus loin
• Contenus accessibles : http://gta21.accesbilis.fr séminaire
BrailleNet
• Notices AcceDe Web d’Atala...
Merci de votre attention !
Prochain SlideShare
Chargement dans…5
×

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

3 069 vues

Publié le

Les personnes en situation de handicap peuvent rencontrer des difficultés dans l’utilisation des sites Web. WordPress a de nombreux atouts pour la création de sites avec un bon niveau d’accessibilité. Mais le thème choisi ou développé joue un rôle important pour permettre à tous les utilisateurs d’accéder à un site WordPress. C’est pourquoi, à l’aide d’un ensemble d’outils, nous allons voir comment tester un thème WordPress dans le but d’évaluer son niveau d’accessibilité pour ensuite en déduire la liste des améliorations à effectuer.

Publié dans : Internet
0 commentaire
6 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 069
Sur SlideShare
0
Issues des intégrations
0
Intégrations
736
Actions
Partages
0
Téléchargements
23
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. Tester le niveau d’accessibilité d’un thème WordPress Claire Bizingre
  2. 2. Qui suis-je ? Claire Bizingre Consultante formatrice Accessibilité numérique et WordPress @accesbilis www.accesbilis.fr Claire Bizingre - WordCamp Paris 2016 2
  3. 3. Rappel sur les usages Claire Bizingre - WordCamp Paris 2016 Contraste élevé Grossissement Guide-doigts Lecteur d’écran Plage braille Smartphone 3
  4. 4. Origine des défauts d’accessibilité Claire Bizingre - WordCamp Paris 2016 Thème ContenuPlugin 4
  5. 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. 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. 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. 8. Extensions Firefox • Firebug • Web developer • HeadingsMap • WCAG Constrast checker • Accessibility Evaluator for Firefox Claire Bizingre - WordCamp Paris 2016 8
  9. 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. 10. 2. Les régions Claire Bizingre - WordCamp Paris 2016 Extension Web Developer, Menu Infos, Afficher les rôles ARIA 10
  11. 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. 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. 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. 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. 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. 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. 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. 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. 19. 7. Liens « lire la suite » Extension Web Developer, Menu Infos, Afficher les attributs title Claire Bizingre - WordCamp Paris 2016 19
  20. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29. 12. Formulaire de recherche Extension Web Developer Menu Infos, Afficher les attributs title Claire Bizingre - WordCamp Paris 2016 29
  30. 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. 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. 32. 13. Couleurs Claire Bizingre - WordCamp Paris 2016 Extension WCAG Contrast Checker Ratio 4.5 32
  33. 33. Améliorer le contraste Tanaguru Contrast-Finder Claire Bizingre - WordCamp Paris 2016 33
  34. 34. 14. Lien visible dans le contenu WCAG Contrast checker Ration 3.0 Claire Bizingre - WordCamp Paris 2016 34
  35. 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. 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. 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. 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. 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. 40. Merci de votre attention !

×