View
3.055
Download
1
Category
Preview:
Citation preview
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é
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émonstration
Claire Bizingre - WordCamp Paris 2016 5
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
Outils automatiques
• Opquast Desktop (temesis)
• aXe DevTools (deque)
• Tenon check (tenon et plugin Access monitor)
• a11y.css (ffoodd)
Claire Bizingre - WordCamp Paris 2016 7
Extensions Firefox
• Firebug
• Web developer
• HeadingsMap
• WCAG Constrast checker
• Accessibility Evaluator for Firefox
Claire Bizingre - WordCamp Paris 2016 8
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
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• 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
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
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
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
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
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
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
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
7. Liens « lire la suite »
Extension Web Developer, Menu Infos, Afficher les attributs title
Claire Bizingre - WordCamp Paris 2016 19
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
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
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
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
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
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
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
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
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
12. Formulaire de recherche
Extension Web DeveloperMenu Infos, Afficher les attributs title
Claire Bizingre - WordCamp Paris 2016 29
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
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
13. Couleurs
Claire Bizingre - WordCamp Paris 2016
Extension WCAG Contrast CheckerRatio 4.5
32
Améliorer le contraste
Tanaguru Contrast-Finder
Claire Bizingre - WordCamp Paris 2016 33
14. Lien visible dans le contenu
WCAG Contrast checkerRation 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)• 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
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
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
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
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
Merci de votre attention !
Recommended