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.
Comment booster le referencement naturel de votre site en publiant des articl...
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
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
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