Atelier présenté au WordCamp Paris 2015, présentation des besoins, des problèmes rencontrés par les utilisateurs, solutions proposées par WordPress, plugin et thèmes accessibility-ready.

1. Pourquoi et comment améliorer
l’accessibilité des sites WordPress
WordCamp Paris 2015

2. Présentation
Claire Bizingre
 Consultante formatrice
 Spécialisée en accessibilité
numérique
 Intégration WordPress Contact
 www.accesbilis.fr
 @accesbilis
WordCamp paris 2015 – Claire Bizingre 2

3. Sommaire
 Rappel des besoins
 Les problèmes rencontrés
 Les solutions proposées par WordPress
 Les thèmes accessibility-ready
WordCamp paris 2015 – Claire Bizingre 3

4. Les besoins
 Séniors
 Handicap
Auditif Cognitif
Moteur Visuel
WordCamp paris 2015 – Claire Bizingre 4

5. Handicap auditif
 Vidéo sous-titrée
 Transcription textuelle
 Traduction en langue des signes
 Sourds
 Malentendants
WordCamp paris 2015 – Claire Bizingre 5

6. Handicap cognitif
 Dyslexie
 Troubles de l’apprentissage
 Illettrisme
 Problème de mémorisation,
de compréhension
 Police adaptée
 Distance régulière
entre mots et lettres
 Ergonomie
 Vocaliser le texte
WordCamp paris 2015 – Claire Bizingre 6

7. Handicap moteur
 Paralysie des membres
supérieurs
 Maladie invalidante (parkinson)
 Difficultés dans les mouvements
Navigation au clavier
WordCamp paris 2015 – Claire Bizingre 7

8. Navigation au clavier avec liens d’évitement
Pour lancer la vidéo :
 1 appui sur TAB
 1 appui sur ENTER sur le
lien « aller au contenu »
 4 appuis sur TAB
 1 appui sur ENTER
WordCamp paris 2015 – Claire Bizingre 8
http://www.pasdecalais.fr/Solidarite-Sante/Retraites-et-personnes-agees/Les-Cheques-Solidarites

9. Navigation au clavier sans liens d’évitement
Hypothèse : pas de liens
d’évitement
 51 appuis sur TAB
 1 appui sur ENTER pour
lancer la vidéo
WordCamp paris 2015 – Claire Bizingre 9
http://www.pasdecalais.fr/Solidarite-Sante/Retraites-et-personnes-agees/Les-Cheques-Solidarites

10. Liens d’évitement visibles
WordCamp paris 2015 – Claire Bizingre 10
http://www.pasdecalais.fr/

11. Liens d’évitement cachés
WordCamp paris 2015 – Claire Bizingre 11
http://www.dila.premier-ministre.gouv.fr/activites/missions/

12. Plugin WP Accessibility
 Génère les liens d’évitement
 Cachés ou visibles
 Compatible avec Webkit (Chrome et Safari)
WordCamp paris 2015 – Claire Bizingre 12

13. Code liens d’évitement cachés
WordCamp paris 2015 – Claire Bizingre 13
#skiplinks a{
position: absolute;
left: -999999px;
}
#skiplinks a:focus{
left:0;
top:0;
}
<div id="skiplinks" role="navigation">
<a href="#content">Aller au contenu</a>
<a href="#navigation">Aller à la navigation</a>
<a href="#recherche">Aller à la recherche</a>
</div>
Pas de display:none, ni de visibility:hidden

14. Navigation au clavier et menu déroulant
 Utilisation des flèches
droite et gauche pour
changer de rubrique dans
le menu
 Évite de se déplacer dans
tous les sous-menus
WordCamp paris 2015 – Claire Bizingre 14
http://www.dila.premier-ministre.gouv.fr/activites/missions/

15. Design Patterns ARIA et menu déroulant
 Recommandation : 20 mars 2014
 Formalise l’implémentation des composants d’interface
(menus déroulants, onglets, plier-déplier…)
WordCamp paris 2015 – Claire Bizingre 15
http://www.w3.org/TR/wai-aria-practices/

16. Handicap visuel
Plage braille
Loupe d’écran
Lecteur d’écran
Contraste élevé
 Malvoyants
 Non voyants
 Daltoniens
 DMLA
 Mauvaise vue
Assurer la compatibilité
WordCamp paris 2015 – Claire Bizingre 16

17. Formulaire non accessible
Vocalisation par le lecteur d’écran
NVDA
 TAB édition obligatoire avec
auto complétion vide
 TAB édition obligatoire avec
auto complétion vide
 TAB édition avec auto
complétion vide
 TAB édition multi-lignes vide
 TAB cliquable envoyer bouton
WordCamp paris 2015 – Claire Bizingre 17

18. Formulaire accessible
WordCamp paris 2015 – Claire Bizingre 18
Vocalisation par le lecteur d’écran NVDA
 TAB votre nom édition obligatoire avec
auto complétion vide
 TAB votre email édition obligatoire avec
auto complétion vide
 TAB sujet édition obligatoire avec auto
complétion vide
 TAB votre message édition multi-lignes
obligatoire vide
 TAB combien fait 1 plus 1 édition
obligatoire avec auto complétion vide
 TAB cliquable envoyer bouton

19. Plugin Contact Form 7
WordCamp paris 2015 – Claire Bizingre 19
<p><label for="your-email">Votre email
[email* your-email id:your-email]
</label></p>
<p><label for="your-subject">Sujet
[text your-subject id:your-subject]
</label></p>
<p>Votre email
(obligatoire)<br />
[email* your-email] </p>
<p>Sujet<br />
[text your-subject] </p>
Par défaut Accessible

20. Lecteur d’écran – Liste des liens
WordCamp paris 2015 – Claire Bizingre 20
http://www.eure-en-ligne.fr

21. Améliorer le lien « read more »
function cb_custom_morelink() {
return '<a class="more-link" href="' . get_permalink() . '">Lire la suite
<span class="invisible">de ' . get_the_title() . ' </span></a>';
}
add_filter( 'the_content_more_link', 'cb_custom_morelink' );
WordCamp paris 2015 – Claire Bizingre 21
.invisible {
position: absolute;
left: -999999px;
}
Dans functions.php

22. Lecteur d’écran – Liste des régions
WordCamp paris 2015 – Claire Bizingre 22

23. Structure de la page et repères ARIA
WordCamp paris 2015 – Claire Bizingre 23
http://www.w3.org/TR/wai-aria/roles
role="banner"
role="navigation"
role="search"
role="complementary"
role="contentinfo"
role="main"
role="form"

24. Plugin WP Accessibility
 Ajout des attributs role ARIA
 Sur les balises header, footer, main, nav
WordCamp paris 2015 – Claire Bizingre 24

25. Lecteur d’écran - Liste des titres
WordCamp paris 2015 – Claire Bizingre 25

26. Contenu accessible
 Paragraphe, titre, sous-titre, liste ordonnée ou non
ordonnée, citation courte, bloc de citation, abréviation
 Accentuer les majuscules
 Changement de langue
 Tableau de données avec un titre, liaison entre entête et
cellule
 Lien et title si besoin
 Image et alternative textuelle
WordCamp paris 2015 – Claire Bizingre 26

27. Les tableaux de données
WordCamp paris 2015 – Claire Bizingre 27
Résumé
Entête de colonne
Entête de ligne
Évolution de la population
http://www.mere-village.fr/Decouvrir-Mere/Presentation-de-la-commune
Cellule

28. Éditeur WordPress
 Pas d’abréviation
 Pas de changement de langue
 Pas de tableau de données
 Pas de citation courte
WordCamp paris 2015 – Claire Bizingre 28

29. Éditeur amélioré
 WP Edit
 MCE Accessible Language Change
 Il reste la citation courte
WordCamp paris 2015 – Claire Bizingre 29

30. Shortcode citation courte
WordCamp paris 2015 – Claire Bizingre 30
function citation_shortcode( $atts, $content = null ) {
return '<q>' . $content . '</q>';
}
add_shortcode('citation', 'citation_shortcode' );
Prochaine étape : création d’un plugin !

31. Utilisation du shortcode
[citation]Une telle rencontre sportive permet de
rapprocher les jeunes du monde du travail[/citation] ,
explique-t-il.
WordCamp paris 2015 – Claire Bizingre 31
http://www.capital.fr

32. Title sur lien rempli automatiquement
WordCamp paris 2015 – Claire Bizingre 32

33. Image, alternative, légende
WordCamp paris 2015 – Claire Bizingre 33
La Plaza de Toros http://www.bayonne.fr/culture-et-loisirs/797-corridas.html
alt="Arènes de Bayonne, de style
néo mauresque, statue d'un
taureau au centre de la place"

34. Tester le contraste des couleurs
WordCamp paris 2015 – Claire Bizingre 34
http://www.lasalle-beauvais.fr

35. Proposer un contraste amélioré
http://www.lasalle-beauvais.fr
WordCamp paris 2015 – Claire Bizingre 35

36. Autre contraste
WordCamp paris 2015 – Claire Bizingre 36

37. Solution
 Doit être persistante
 Feuille de style alternative
 Ajout d’une classe "contraste" CSS par un script JS
 WP Accessibility
WordCamp paris 2015 – Claire Bizingre 37

38. Thème accessibility-ready
 1er posté le 16/12/2013
 Twenty Fifteen
 Twenty Fourteen
 Twenty Thirteen
 14-Glassy, Stock, Bosco, White Xmas, Simone
 Kuorinka, Wpstart, Tikva, Drop
 Accessible Zen, JBST, Cherish, Neighborly
WordCamp paris 2015 – Claire Bizingre 38
https://wordpress.org/themes/tags/accessibility-ready

39. Caractéristiques
 Ajout des repères, attribut role ARIA
 Liens d’évitement
 Read more amélioré
 Menu déroulant accessible au clavier
WordCamp paris 2015 – Claire Bizingre 39

40. Thème Simone
WordCamp paris 2015 – Claire Bizingre 40
http://www.lesyeuxdelimaginaire.com/

41. Ressources WordPress
 https://wordpress.org/plugins/tags/accessibility
 https://wordpress.org/themes/tags/accessibility-ready
 http://codex.wordpress.org/Accessibility
 Accessibility group :
https://make.wordpress.org/accessibility/
 https://make.wordpress.org/themes/handbook/review/
accessibility/
WordCamp paris 2015 – Claire Bizingre 41

42. Merci de votre attention !
WordCamp paris 2015 – Claire Bizingre 42