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

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

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

Origine des défauts d’accessibilité
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

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

Outils automatiques
• Opquast Desktop (temesis)
• aXe DevTools (deque)
• Tenon check (tenon et plugin Access monitor)
• a11y.css (ffoodd)

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,
maximum-scale=1, user-scalable=no" name="viewport">
« Ne pas interdire le zoom »
<meta content="width=device-width, initial-scale=1"
name="viewport">
9

2. Les régions
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>
<header role="banner">
<div role="search"><form…>
<nav role="navigation">
<main role="main">
<footer role="contentinfo">
11

3. Les titres
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
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
→ Pour aller en haut de la page
→ Pour afficher le menu
14

Détecter les liens icônes vides
<a id="site-scroll-top" href="#top" class="show">
<span class="fa fa-chevron-up"></span>
</a>
« Un lien doit avoir un intitulé »
<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
.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
<img src="haut-de-page.png" alt="" />
</a>
« L’alternative textuelle ne doit pas être vide »
<img src="haut-de-page.png" alt="Retour en haut de
page" />
</a>
17

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

7. Liens « lire la suite »

Vérifier le code du lien
Extension Firebug, Inspecter le lien
<a href="url-article" class="more-link">
Lire la suite</a>
« 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>
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
Menu Infos, Afficher les infos des liens,
Rechercher target="_blank"

Avertir de l’ouverture d’une fenêtre
Autre solution : l’attribut aria-label
<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’adresse
Utiliser la touche TAB et shift TAB
Attention à :
:focus{
outline:none;
}
:hover associé à :focus
24

10. Menu de navigation
Voir si les sous-menus sont manipulables au clavier

11. Liens d’évitement
Au moins un lien "aller au contenu" doit apparaître

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

Rendre visible le lien d’évitement
.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 Developer

Attribut title supprimé
Liaison entre étiquette et champ (for, id)
<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
<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
Extension WCAG Contrast Checker
Ratio 4.5
32

Améliorer le contraste
Tanaguru Contrast-Finder

14. Lien visible dans le contenu
WCAG Contrast checker
Ration 3.0

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 »

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)

Solutions
• Thème sur mesure (mu-plugins)
• Thème existant gratuit ou acheté (thème
enfant, copie du thème et modification, mu-
plugins)
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/

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/

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

Contenu connexe

Tendances

En vedette

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

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