21 février 2018

1. Meetup Nice 21 février 2018
Accessibilité (A11Y) et
WordPress

2. Claire Bizingre
• Consultante formatrice
• Accessibilité numérique - Qualité Web - WordPress
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 2
@accesbilis
www.accesbilis.fr

3. 3Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre
Accessibilité
universelle
Non-voyants
Séniors
Sourds
Malvoyants
Daltoniens
Handicap moteur
Membres supérieurs
Malentendants
Dyslexiques Handicap
mental, cognitif
Les internautes concernés

4. Handicap auditif
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 4
• Vidéo sous-titrée
• Transcription textuelle
• Traduction en langue des signes
Sourds
Malentendants
Solutions

5. Handicap cognitif
Dyslexie
Problème de concentration, mémorisation, compréhension
Troubles neurologiques
Handicap mental
• Police adaptée
• Distance régulière entre mots et lettres
• Éléments en mouvements contrôlables
• Formulaires avec guidage
• FALC
• Version vocalisée
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 5
Solutions

6. Pas de texte-align:justify
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 6
body{
text-align:left;
}
Solution

7. Polices à éviter
• Avec empattement (serif)
• Trop fine
• Police écriture manuscrite
• Police avec le a et le o trop proches
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 7
Comme chaque semaine
Comme chaque semaine

8. Pas de font-size, height et line-height en px
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 8
eure-en-ligne.fr

9. Confort +, aide à la lecture
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 9
http://confort-plus.orange.com/

10. Confort +, réglette, alignement à gauche
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 10

11. Stopper chaque contenu animé > 5 secondes
http://www.sncf.com/
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 11

12. Attention au placeholder
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 12
https://lab.anybodesign.com/wc13/
• Le placeholder ne doit pas
remplacer une étiquette
• Il donne un exemple de
saisie

13. Handicap moteur
Paralysie des membres supérieurs
Maladie invalidante (parkinson)
Difficultés dans les mouvements
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 13
• Visibilité du focus au clavier
• Liens d’évitement
• Actions activables au clavier
Solution : permettre la navigation au clavier

14. Lien d’évitement
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 14

15. Visibilité du focus au clavier
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 15

16. Action activable au clavier
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 16

17. Navigation au clavier - techniquement
• Liens d’évitement
• Outline visible
• Composants activables au clavier
<a href="#main">Aller au contenu</a>
<a href="#main" class="sr-only sr-only-focusable">Aller au contenu</a>
:focus{
outline:1px dotted #f8be4c;
}
<button type="button" aria-expanded="true">Qui est concerné?</button>
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 17

18. Handicap visuel
Malvoyants
Non voyants
Daltoniens
DMLA
Mauvaise vue
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 18
• Lecteur d’écran
• Loupe d’écran
• Contraste élevé
Solution : rendre son site compatible

19. Daltonisme: graphisme accessible
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 19

20. Contraste des couleurs
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 20

21. Outils tota11y
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 21

22. Bouton de contraste renforcé
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 22

23. Navigation par titres avec NVDA
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 23

24. Navigation par liens
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 24

25. Navigation par région
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 25
<header role="banner">
<nav role="navigation" aria-label="menu principal">
<nav role="navigation" aria-label="menu Particuliers">
<form role="search">
<main role="main">
<footer role="contentinfo">

26. Lecteur d’écran et browser
• NVDA + FF
• JAWS+ IE
• Narrator + Edge
• Talkback + FF
• VoiceOver + Safari
Raccourcis clavier : https://dequeuniversity.com/screenreaders/
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 26

27. Thèmes accessibility-ready
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 27

28. Recommandations pour un thème a11y
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 28
https://make.wordpress.org/themes/handbook/
review/accessibility/required/

29. 29Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre
Thèmes
Contenus
Plugins
Défauts potentiels d’accessibilité dans WP

30. Plugins à tester
Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre 30
WP Accessibility de Joe Dolson
WP Accessibility Helper (WAH) par Alex Volkov

31. 31Meetup WordPress de Nice - 21 février 2018 - Claire Bizingre
Claire Bizingre
@accesbilis
accesbilis.fr
https://www.linkedin.com/in/claire-bizingre/
Merci !