Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,812 views

Published on

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.

Published in: Internet

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

×