Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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

5 842 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
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Unlock Her Legs(Official) $69 | Get 90% Off + 8 Special Bonus?  http://scamcb.com/unlockher/pdf
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×