Pourquoi et comment améliorer
l’accessibilité des sites WordPress
WordCamp Paris 2015
Présentation
Claire Bizingre
 Consultante formatrice
 Spécialisée en accessibilité
numérique
 Intégration WordPress Con...
Sommaire
 Rappel des besoins
 Les problèmes rencontrés
 Les solutions proposées par WordPress
 Les thèmes accessibilit...
Les besoins
 Séniors
 Handicap
Auditif Cognitif
Moteur Visuel
WordCamp paris 2015 – Claire Bizingre 4
Handicap auditif
 Vidéo sous-titrée
 Transcription textuelle
 Traduction en langue des signes
 Sourds
 Malentendants
...
Handicap cognitif
 Dyslexie
 Troubles de l’apprentissage
 Illettrisme
 Problème de mémorisation,
de compréhension
 Po...
Handicap moteur
 Paralysie des membres
supérieurs
 Maladie invalidante (parkinson)
 Difficultés dans les mouvements
Nav...
Navigation au clavier avec liens d’évitement
Pour lancer la vidéo :
 1 appui sur TAB
 1 appui sur ENTER sur le
lien « al...
Navigation au clavier sans liens d’évitement
Hypothèse : pas de liens
d’évitement
 51 appuis sur TAB
 1 appui sur ENTER ...
Liens d’évitement visibles
WordCamp paris 2015 – Claire Bizingre 10
http://www.pasdecalais.fr/
Liens d’évitement cachés
WordCamp paris 2015 – Claire Bizingre 11
http://www.dila.premier-ministre.gouv.fr/activites/missi...
Plugin WP Accessibility
 Génère les liens d’évitement
 Cachés ou visibles
 Compatible avec Webkit (Chrome et Safari)
Wo...
Code liens d’évitement cachés
WordCamp paris 2015 – Claire Bizingre 13
#skiplinks a{
position: absolute;
left: -999999px;
...
Navigation au clavier et menu déroulant
 Utilisation des flèches
droite et gauche pour
changer de rubrique dans
le menu
...
Design Patterns ARIA et menu déroulant
 Recommandation : 20 mars 2014
 Formalise l’implémentation des composants d’inter...
Handicap visuel
Plage braille
Loupe d’écran
Lecteur d’écran
Contraste élevé
 Malvoyants
 Non voyants
 Daltoniens
 DMLA...
Formulaire non accessible
Vocalisation par le lecteur d’écran
NVDA
 TAB édition obligatoire avec
auto complétion vide
 T...
Formulaire accessible
WordCamp paris 2015 – Claire Bizingre 18
Vocalisation par le lecteur d’écran NVDA
 TAB votre nom éd...
Plugin Contact Form 7
WordCamp paris 2015 – Claire Bizingre 19
<p><label for="your-email">Votre email
[email* your-email i...
Lecteur d’écran – Liste des liens
WordCamp paris 2015 – Claire Bizingre 20
http://www.eure-en-ligne.fr
Améliorer le lien « read more »
function cb_custom_morelink() {
return '<a class="more-link" href="' . get_permalink() . '...
Lecteur d’écran – Liste des régions
WordCamp paris 2015 – Claire Bizingre 22
Structure de la page et repères ARIA
WordCamp paris 2015 – Claire Bizingre 23
http://www.w3.org/TR/wai-aria/roles
role="ba...
Plugin WP Accessibility
 Ajout des attributs role ARIA
 Sur les balises header, footer, main, nav
WordCamp paris 2015 – ...
Lecteur d’écran - Liste des titres
WordCamp paris 2015 – Claire Bizingre 25
Contenu accessible
 Paragraphe, titre, sous-titre, liste ordonnée ou non
ordonnée, citation courte, bloc de citation, abr...
Les tableaux de données
WordCamp paris 2015 – Claire Bizingre 27
Résumé
Entête de colonne
Entête de ligne
Évolution de la ...
Éditeur WordPress
 Pas d’abréviation
 Pas de changement de langue
 Pas de tableau de données
 Pas de citation courte
W...
Éditeur amélioré
 WP Edit
 MCE Accessible Language Change
 Il reste la citation courte
WordCamp paris 2015 – Claire Biz...
Shortcode citation courte
WordCamp paris 2015 – Claire Bizingre 30
function citation_shortcode( $atts, $content = null ) {...
Utilisation du shortcode
[citation]Une telle rencontre sportive permet de
rapprocher les jeunes du monde du travail[/citat...
Title sur lien rempli automatiquement
WordCamp paris 2015 – Claire Bizingre 32
Image, alternative, légende
WordCamp paris 2015 – Claire Bizingre 33
La Plaza de Toros http://www.bayonne.fr/culture-et-lo...
Tester le contraste des couleurs
WordCamp paris 2015 – Claire Bizingre 34
http://www.lasalle-beauvais.fr
Proposer un contraste amélioré
http://www.lasalle-beauvais.fr
WordCamp paris 2015 – Claire Bizingre 35
Autre contraste
WordCamp paris 2015 – Claire Bizingre 36
Solution
 Doit être persistante
 Feuille de style alternative
 Ajout d’une classe "contraste" CSS par un script JS
 WP...
Thème accessibility-ready
 1er posté le 16/12/2013
 Twenty Fifteen
 Twenty Fourteen
 Twenty Thirteen
 14-Glassy, Stoc...
Caractéristiques
 Ajout des repères, attribut role ARIA
 Liens d’évitement
 Read more amélioré
 Menu déroulant accessi...
Thème Simone
WordCamp paris 2015 – Claire Bizingre 40
http://www.lesyeuxdelimaginaire.com/
Ressources WordPress
 https://wordpress.org/plugins/tags/accessibility
 https://wordpress.org/themes/tags/accessibility-...
Merci de votre attention !
WordCamp paris 2015 – Claire Bizingre 42
Prochain SlideShare
Chargement dans…5
×

Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp Paris 2015

3 364 vues

Publié le

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.

Publié dans : Internet
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 364
Sur SlideShare
0
Issues des intégrations
0
Intégrations
644
Actions
Partages
0
Téléchargements
19
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp Paris 2015

  1. 1. Pourquoi et comment améliorer l’accessibilité des sites WordPress WordCamp Paris 2015
  2. 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. 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. 4. Les besoins  Séniors  Handicap Auditif Cognitif Moteur Visuel WordCamp paris 2015 – Claire Bizingre 4
  5. 5. Handicap auditif  Vidéo sous-titrée  Transcription textuelle  Traduction en langue des signes  Sourds  Malentendants WordCamp paris 2015 – Claire Bizingre 5
  6. 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. 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. 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. 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. 10. Liens d’évitement visibles WordCamp paris 2015 – Claire Bizingre 10 http://www.pasdecalais.fr/
  11. 11. Liens d’évitement cachés WordCamp paris 2015 – Claire Bizingre 11 http://www.dila.premier-ministre.gouv.fr/activites/missions/
  12. 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. 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. 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. 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. 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. 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. 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. 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. 20. Lecteur d’écran – Liste des liens WordCamp paris 2015 – Claire Bizingre 20 http://www.eure-en-ligne.fr
  21. 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. 22. Lecteur d’écran – Liste des régions WordCamp paris 2015 – Claire Bizingre 22
  23. 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. 24. Plugin WP Accessibility  Ajout des attributs role ARIA  Sur les balises header, footer, main, nav WordCamp paris 2015 – Claire Bizingre 24
  25. 25. Lecteur d’écran - Liste des titres WordCamp paris 2015 – Claire Bizingre 25
  26. 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. 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. 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. 29. Éditeur amélioré  WP Edit  MCE Accessible Language Change  Il reste la citation courte WordCamp paris 2015 – Claire Bizingre 29
  30. 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. 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. 32. Title sur lien rempli automatiquement WordCamp paris 2015 – Claire Bizingre 32
  33. 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. 34. Tester le contraste des couleurs WordCamp paris 2015 – Claire Bizingre 34 http://www.lasalle-beauvais.fr
  35. 35. Proposer un contraste amélioré http://www.lasalle-beauvais.fr WordCamp paris 2015 – Claire Bizingre 35
  36. 36. Autre contraste WordCamp paris 2015 – Claire Bizingre 36
  37. 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. 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. 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. 40. Thème Simone WordCamp paris 2015 – Claire Bizingre 40 http://www.lesyeuxdelimaginaire.com/
  41. 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. 42. Merci de votre attention ! WordCamp paris 2015 – Claire Bizingre 42

×