SlideShare une entreprise Scribd logo
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 Contact
 www.accesbilis.fr
 @accesbilis
WordCamp paris 2015 – Claire Bizingre 2
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
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
WordCamp paris 2015 – Claire Bizingre 5
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
Handicap moteur
 Paralysie des membres
supérieurs
 Maladie invalidante (parkinson)
 Difficultés dans les mouvements
Navigation au clavier
WordCamp paris 2015 – Claire Bizingre 7
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
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
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/missions/
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
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
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/
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/
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
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
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
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
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() . '">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
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="banner"
role="navigation"
role="search"
role="complementary"
role="contentinfo"
role="main"
role="form"
Plugin WP Accessibility
 Ajout des attributs role ARIA
 Sur les balises header, footer, main, nav
WordCamp paris 2015 – Claire Bizingre 24
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é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
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
É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
Éditeur amélioré
 WP Edit
 MCE Accessible Language Change
 Il reste la citation courte
WordCamp paris 2015 – Claire Bizingre 29
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 !
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
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-loisirs/797-corridas.html
alt="Arènes de Bayonne, de style
néo mauresque, statue d'un
taureau au centre de la place"
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 Accessibility
WordCamp paris 2015 – Claire Bizingre 37
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
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
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-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
Merci de votre attention !
WordCamp paris 2015 – Claire Bizingre 42

Contenu connexe

Tendances

Wordpress et la sécurité des plugins
Wordpress et la sécurité des pluginsWordpress et la sécurité des plugins
Wordpress et la sécurité des plugins
Boiteaweb
 
Conférence WordPress & E-commerce
Conférence WordPress & E-commerceConférence WordPress & E-commerce
Conférence WordPress & E-commerce
Fabrice Ducarme
 
Wcparis 2014 content_chouing2
Wcparis 2014 content_chouing2Wcparis 2014 content_chouing2
Wcparis 2014 content_chouing2
Cedric Motte
 
Stratégie d'acquisition de trafic (Webisland)
Stratégie d'acquisition de trafic (Webisland)Stratégie d'acquisition de trafic (Webisland)
Stratégie d'acquisition de trafic (Webisland)
Daniel Roch - SeoMix
 
L’envers du décor d’un site WooCommerce | WP Tech Nantes
L’envers du décord’un site WooCommerce | WP Tech NantesL’envers du décord’un site WooCommerce | WP Tech Nantes
L’envers du décor d’un site WooCommerce | WP Tech Nantes
Fabrice Ducarme
 
Dette technique et WordPress
Dette technique et WordPressDette technique et WordPress
Dette technique et WordPress
Daniel Roch - SeoMix
 
Ouvrir vos plugins aux autres développeurs - WPTech Nantes
Ouvrir vos plugins aux autres développeurs - WPTech NantesOuvrir vos plugins aux autres développeurs - WPTech Nantes
Ouvrir vos plugins aux autres développeurs - WPTech Nantes
corsonr
 
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
Sébastien Grillot
 
CESEO: Certification Expert SEO
CESEO: Certification Expert SEOCESEO: Certification Expert SEO
CESEO: Certification Expert SEO
SEO CAMP
 
Développer son entreprise grâce à joomla - Webinar
Développer son entreprise grâce à joomla - WebinarDévelopper son entreprise grâce à joomla - Webinar
Développer son entreprise grâce à joomla - Webinar
Jean-Charles GAUTARD
 
Interview Métier : Web Designer / Intégrateur
Interview Métier : Web Designer / Intégrateur Interview Métier : Web Designer / Intégrateur
Interview Métier : Web Designer / Intégrateur
#SUPDEWEB
 
Le graphisme d'un site internet !
Le graphisme d'un site internet !Le graphisme d'un site internet !
Le graphisme d'un site internet !
elaugier
 
Comment optimiser la Création ou la refonte de son site internet ?
Comment optimiser la Création ou la refonte de son site internet ?Comment optimiser la Création ou la refonte de son site internet ?
Comment optimiser la Création ou la refonte de son site internet ?
Office de Tourisme Val de Cher Controis
 
Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...
Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...
Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...
Alphorm
 
Monetiser ses plugins WordPress
Monetiser ses plugins WordPressMonetiser ses plugins WordPress
Monetiser ses plugins WordPress
vpratfr
 
Projet job ia
Projet job iaProjet job ia
Projet job ia
abfeuille
 
Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014
Thierry Pigot
 
Alphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architectural
Alphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architecturalAlphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architectural
Alphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architectural
Alphorm
 
Site Web Centrale Eco
Site Web   Centrale EcoSite Web   Centrale Eco
Site Web Centrale Eco
m.dubucq
 
Alphorm.com Support de la Formation Sketchup 2016, Perfectionnement
Alphorm.com Support de la Formation Sketchup 2016, PerfectionnementAlphorm.com Support de la Formation Sketchup 2016, Perfectionnement
Alphorm.com Support de la Formation Sketchup 2016, Perfectionnement
Alphorm
 

Tendances (20)

Wordpress et la sécurité des plugins
Wordpress et la sécurité des pluginsWordpress et la sécurité des plugins
Wordpress et la sécurité des plugins
 
Conférence WordPress & E-commerce
Conférence WordPress & E-commerceConférence WordPress & E-commerce
Conférence WordPress & E-commerce
 
Wcparis 2014 content_chouing2
Wcparis 2014 content_chouing2Wcparis 2014 content_chouing2
Wcparis 2014 content_chouing2
 
Stratégie d'acquisition de trafic (Webisland)
Stratégie d'acquisition de trafic (Webisland)Stratégie d'acquisition de trafic (Webisland)
Stratégie d'acquisition de trafic (Webisland)
 
L’envers du décor d’un site WooCommerce | WP Tech Nantes
L’envers du décord’un site WooCommerce | WP Tech NantesL’envers du décord’un site WooCommerce | WP Tech Nantes
L’envers du décor d’un site WooCommerce | WP Tech Nantes
 
Dette technique et WordPress
Dette technique et WordPressDette technique et WordPress
Dette technique et WordPress
 
Ouvrir vos plugins aux autres développeurs - WPTech Nantes
Ouvrir vos plugins aux autres développeurs - WPTech NantesOuvrir vos plugins aux autres développeurs - WPTech Nantes
Ouvrir vos plugins aux autres développeurs - WPTech Nantes
 
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
 
CESEO: Certification Expert SEO
CESEO: Certification Expert SEOCESEO: Certification Expert SEO
CESEO: Certification Expert SEO
 
Développer son entreprise grâce à joomla - Webinar
Développer son entreprise grâce à joomla - WebinarDévelopper son entreprise grâce à joomla - Webinar
Développer son entreprise grâce à joomla - Webinar
 
Interview Métier : Web Designer / Intégrateur
Interview Métier : Web Designer / Intégrateur Interview Métier : Web Designer / Intégrateur
Interview Métier : Web Designer / Intégrateur
 
Le graphisme d'un site internet !
Le graphisme d'un site internet !Le graphisme d'un site internet !
Le graphisme d'un site internet !
 
Comment optimiser la Création ou la refonte de son site internet ?
Comment optimiser la Création ou la refonte de son site internet ?Comment optimiser la Création ou la refonte de son site internet ?
Comment optimiser la Création ou la refonte de son site internet ?
 
Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...
Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...
Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...
 
Monetiser ses plugins WordPress
Monetiser ses plugins WordPressMonetiser ses plugins WordPress
Monetiser ses plugins WordPress
 
Projet job ia
Projet job iaProjet job ia
Projet job ia
 
Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014
 
Alphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architectural
Alphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architecturalAlphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architectural
Alphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architectural
 
Site Web Centrale Eco
Site Web   Centrale EcoSite Web   Centrale Eco
Site Web Centrale Eco
 
Alphorm.com Support de la Formation Sketchup 2016, Perfectionnement
Alphorm.com Support de la Formation Sketchup 2016, PerfectionnementAlphorm.com Support de la Formation Sketchup 2016, Perfectionnement
Alphorm.com Support de la Formation Sketchup 2016, Perfectionnement
 

En vedette

Conseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numériqueConseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numérique
Claire Bizingre
 
Ns petite histoire de ergonomie web
Ns petite histoire de ergonomie webNs petite histoire de ergonomie web
Ns petite histoire de ergonomie web
Olivier Rovellotti
 
Ergonomie d'un site
Ergonomie d'un siteErgonomie d'un site
Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEO
Sébastien Delorme
 
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exempleErgonomie d’un site et navigation de l’internaute : anatomie d’un exemple
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple
SilicomVallee
 
Les nouveautés de TYPO3 4.2
Les nouveautés de TYPO3 4.2Les nouveautés de TYPO3 4.2
Les nouveautés de TYPO3 4.2
Yannick Pavard
 
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et WordpressL'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
Yannick Pavard
 
Du marketing d'hier au marketing de demain - La création des supports digitaux
Du marketing d'hier au marketing de demain - La création des supports digitauxDu marketing d'hier au marketing de demain - La création des supports digitaux
Du marketing d'hier au marketing de demain - La création des supports digitaux
Pim-Bim - The Inbound Suite
 
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
Flupa
 
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
Bertrand Cochet
 
Ergonomie des interfaces web
Ergonomie des interfaces webErgonomie des interfaces web
Ergonomie des interfaces web
Renaud Biemans
 
Lois de la Gestalt et Webdesign
Lois de la Gestalt et WebdesignLois de la Gestalt et Webdesign
Lois de la Gestalt et Webdesign
MC Casal
 
Ergonomie et accessibilité du Web
Ergonomie et accessibilité du WebErgonomie et accessibilité du Web
Ergonomie et accessibilité du Web
Genève Lab
 
L'ergonomie d'un site web par Fred Colantonio
L'ergonomie d'un site web par Fred ColantonioL'ergonomie d'un site web par Fred Colantonio
L'ergonomie d'un site web par Fred Colantonio
J'ai besoin de com
 
4 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
4 sites communautaires faits avec BuddyPress, WordCamp Paris 20164 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
4 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
Sylvie Clément
 
Ergonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site webErgonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site web
Laurent Mottet
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapes
Rodolphe Finamore
 
Handicap et accessibilité : où en est le e-learning ?
Handicap et  accessibilité : où en est le e-learning ?Handicap et  accessibilité : où en est le e-learning ?
Handicap et accessibilité : où en est le e-learning ?
UnI Learning France
 
Ergonomie web & interface tactile
Ergonomie web & interface tactileErgonomie web & interface tactile
Ergonomie web & interface tactile
IdnetInfo
 

En vedette (20)

Conseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numériqueConseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numérique
 
Ns petite histoire de ergonomie web
Ns petite histoire de ergonomie webNs petite histoire de ergonomie web
Ns petite histoire de ergonomie web
 
Ergonomie d'un site
Ergonomie d'un siteErgonomie d'un site
Ergonomie d'un site
 
Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEO
 
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exempleErgonomie d’un site et navigation de l’internaute : anatomie d’un exemple
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple
 
Les nouveautés de TYPO3 4.2
Les nouveautés de TYPO3 4.2Les nouveautés de TYPO3 4.2
Les nouveautés de TYPO3 4.2
 
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et WordpressL'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
 
Du marketing d'hier au marketing de demain - La création des supports digitaux
Du marketing d'hier au marketing de demain - La création des supports digitauxDu marketing d'hier au marketing de demain - La création des supports digitaux
Du marketing d'hier au marketing de demain - La création des supports digitaux
 
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
 
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
 
Gestalt
GestaltGestalt
Gestalt
 
Ergonomie des interfaces web
Ergonomie des interfaces webErgonomie des interfaces web
Ergonomie des interfaces web
 
Lois de la Gestalt et Webdesign
Lois de la Gestalt et WebdesignLois de la Gestalt et Webdesign
Lois de la Gestalt et Webdesign
 
Ergonomie et accessibilité du Web
Ergonomie et accessibilité du WebErgonomie et accessibilité du Web
Ergonomie et accessibilité du Web
 
L'ergonomie d'un site web par Fred Colantonio
L'ergonomie d'un site web par Fred ColantonioL'ergonomie d'un site web par Fred Colantonio
L'ergonomie d'un site web par Fred Colantonio
 
4 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
4 sites communautaires faits avec BuddyPress, WordCamp Paris 20164 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
4 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
 
Ergonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site webErgonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site web
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapes
 
Handicap et accessibilité : où en est le e-learning ?
Handicap et  accessibilité : où en est le e-learning ?Handicap et  accessibilité : où en est le e-learning ?
Handicap et accessibilité : où en est le e-learning ?
 
Ergonomie web & interface tactile
Ergonomie web & interface tactileErgonomie web & interface tactile
Ergonomie web & interface tactile
 

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

Les erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdfLes erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Julien Dereumaux
 
Réussir son projet e-commerce
Réussir son projet e-commerceRéussir son projet e-commerce
Réussir son projet e-commerce
Aymeric Auberton
 
Cours de Weekend Pour Valdier et Obtenir un Master
Cours de Weekend Pour Valdier et Obtenir un MasterCours de Weekend Pour Valdier et Obtenir un Master
Cours de Weekend Pour Valdier et Obtenir un Master
Abdou Karim GUEYE
 
Erellis- Agence en communication interactive
Erellis- Agence en communication interactiveErellis- Agence en communication interactive
Erellis- Agence en communication interactive
ERELLIS
 
Développer avec le sylius resourcebundle (Symfony live Paris 2015)
Développer avec le sylius resourcebundle (Symfony live Paris 2015) Développer avec le sylius resourcebundle (Symfony live Paris 2015)
Développer avec le sylius resourcebundle (Symfony live Paris 2015)
Arnaud Langlade
 
De component à feature team (Rex STIME DSI Groupement des Mousquetaires)
De component à feature team (Rex STIME DSI Groupement des Mousquetaires)De component à feature team (Rex STIME DSI Groupement des Mousquetaires)
De component à feature team (Rex STIME DSI Groupement des Mousquetaires)
Agile En Seine
 
Desig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustratorDesig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustrator
CERTyou Formation
 
Regards croisés sur les badges web-conférence du 28/03/17
Regards croisés sur les badges web-conférence du 28/03/17 Regards croisés sur les badges web-conférence du 28/03/17
Regards croisés sur les badges web-conférence du 28/03/17
FFFOD
 
Cci internet au service de votre productivité commerciale
Cci internet au service de votre productivité commercialeCci internet au service de votre productivité commerciale
Cci internet au service de votre productivité commerciale
O S
 
Organigramme présentation i déalmag
Organigramme présentation i déalmagOrganigramme présentation i déalmag
Organigramme présentation i déalmag
Syl Videal
 
Experimentez lesprocessus.handsout
Experimentez lesprocessus.handsoutExperimentez lesprocessus.handsout
Experimentez lesprocessus.handsout
Laurent Morisseau
 
Formation M2i - Apprendre à utiliser Microsoft Power Pages pour créer des sit...
Formation M2i - Apprendre à utiliser Microsoft Power Pages pour créer des sit...Formation M2i - Apprendre à utiliser Microsoft Power Pages pour créer des sit...
Formation M2i - Apprendre à utiliser Microsoft Power Pages pour créer des sit...
M2i Formation
 
Webinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdf
Webinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdfWebinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdf
Webinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdf
Julien Dereumaux
 
Webinar une journee dans la peau d'un directeur artistique
Webinar   une journee dans la peau d'un directeur artistiqueWebinar   une journee dans la peau d'un directeur artistique
Webinar une journee dans la peau d'un directeur artistique
Julien Dereumaux
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
Manuel Adele
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
Bruno Bonnin
 
Catalogue de formations webmarketing Cibleweb 2016
Catalogue de formations webmarketing Cibleweb 2016Catalogue de formations webmarketing Cibleweb 2016
Catalogue de formations webmarketing Cibleweb 2016
CibleWeb
 
Formation - découvrir Activecampaign - l'outil de marketing automation de Pil...
Formation - découvrir Activecampaign - l'outil de marketing automation de Pil...Formation - découvrir Activecampaign - l'outil de marketing automation de Pil...
Formation - découvrir Activecampaign - l'outil de marketing automation de Pil...
Julien Dereumaux
 
Conférence cibleweb pass-tek
Conférence cibleweb pass-tekConférence cibleweb pass-tek
Conférence cibleweb pass-tek
Guilhem GLEIZES
 
Panorama des leviers e-commerce (Conférence Medinsoft - dec 2013)
Panorama des leviers e-commerce (Conférence Medinsoft - dec 2013)Panorama des leviers e-commerce (Conférence Medinsoft - dec 2013)
Panorama des leviers e-commerce (Conférence Medinsoft - dec 2013)
Needeo
 

Similaire à Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp Paris 2015 (20)

Les erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdfLes erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdf
 
Réussir son projet e-commerce
Réussir son projet e-commerceRéussir son projet e-commerce
Réussir son projet e-commerce
 
Cours de Weekend Pour Valdier et Obtenir un Master
Cours de Weekend Pour Valdier et Obtenir un MasterCours de Weekend Pour Valdier et Obtenir un Master
Cours de Weekend Pour Valdier et Obtenir un Master
 
Erellis- Agence en communication interactive
Erellis- Agence en communication interactiveErellis- Agence en communication interactive
Erellis- Agence en communication interactive
 
Développer avec le sylius resourcebundle (Symfony live Paris 2015)
Développer avec le sylius resourcebundle (Symfony live Paris 2015) Développer avec le sylius resourcebundle (Symfony live Paris 2015)
Développer avec le sylius resourcebundle (Symfony live Paris 2015)
 
De component à feature team (Rex STIME DSI Groupement des Mousquetaires)
De component à feature team (Rex STIME DSI Groupement des Mousquetaires)De component à feature team (Rex STIME DSI Groupement des Mousquetaires)
De component à feature team (Rex STIME DSI Groupement des Mousquetaires)
 
Desig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustratorDesig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustrator
 
Regards croisés sur les badges web-conférence du 28/03/17
Regards croisés sur les badges web-conférence du 28/03/17 Regards croisés sur les badges web-conférence du 28/03/17
Regards croisés sur les badges web-conférence du 28/03/17
 
Cci internet au service de votre productivité commerciale
Cci internet au service de votre productivité commercialeCci internet au service de votre productivité commerciale
Cci internet au service de votre productivité commerciale
 
Organigramme présentation i déalmag
Organigramme présentation i déalmagOrganigramme présentation i déalmag
Organigramme présentation i déalmag
 
Experimentez lesprocessus.handsout
Experimentez lesprocessus.handsoutExperimentez lesprocessus.handsout
Experimentez lesprocessus.handsout
 
Formation M2i - Apprendre à utiliser Microsoft Power Pages pour créer des sit...
Formation M2i - Apprendre à utiliser Microsoft Power Pages pour créer des sit...Formation M2i - Apprendre à utiliser Microsoft Power Pages pour créer des sit...
Formation M2i - Apprendre à utiliser Microsoft Power Pages pour créer des sit...
 
Webinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdf
Webinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdfWebinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdf
Webinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdf
 
Webinar une journee dans la peau d'un directeur artistique
Webinar   une journee dans la peau d'un directeur artistiqueWebinar   une journee dans la peau d'un directeur artistique
Webinar une journee dans la peau d'un directeur artistique
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 
Catalogue de formations webmarketing Cibleweb 2016
Catalogue de formations webmarketing Cibleweb 2016Catalogue de formations webmarketing Cibleweb 2016
Catalogue de formations webmarketing Cibleweb 2016
 
Formation - découvrir Activecampaign - l'outil de marketing automation de Pil...
Formation - découvrir Activecampaign - l'outil de marketing automation de Pil...Formation - découvrir Activecampaign - l'outil de marketing automation de Pil...
Formation - découvrir Activecampaign - l'outil de marketing automation de Pil...
 
Conférence cibleweb pass-tek
Conférence cibleweb pass-tekConférence cibleweb pass-tek
Conférence cibleweb pass-tek
 
Panorama des leviers e-commerce (Conférence Medinsoft - dec 2013)
Panorama des leviers e-commerce (Conférence Medinsoft - dec 2013)Panorama des leviers e-commerce (Conférence Medinsoft - dec 2013)
Panorama des leviers e-commerce (Conférence Medinsoft - dec 2013)
 

Plus de Claire Bizingre

WordCamp Paris 2019
WordCamp Paris 2019 WordCamp Paris 2019
WordCamp Paris 2019
Claire Bizingre
 
WordCamp Nice 2018-10-19
WordCamp Nice 2018-10-19 WordCamp Nice 2018-10-19
WordCamp Nice 2018-10-19
Claire Bizingre
 
WPNdigital ux et a11y par Claire Bizingre et Thomas Villain
WPNdigital ux et a11y par Claire Bizingre et Thomas VillainWPNdigital ux et a11y par Claire Bizingre et Thomas Villain
WPNdigital ux et a11y par Claire Bizingre et Thomas Villain
Claire Bizingre
 
A11y et WordPress meetup de Nice
A11y et WordPress meetup de NiceA11y et WordPress meetup de Nice
A11y et WordPress meetup de Nice
Claire Bizingre
 
Accessibilité numérique : comment la prendre en compte dans vos projets WordP...
Accessibilité numérique : comment la prendre en compte dans vos projets WordP...Accessibilité numérique : comment la prendre en compte dans vos projets WordP...
Accessibilité numérique : comment la prendre en compte dans vos projets WordP...
Claire Bizingre
 
A11y et WordPress
A11y et WordPressA11y et WordPress
A11y et WordPress
Claire Bizingre
 

Plus de Claire Bizingre (6)

WordCamp Paris 2019
WordCamp Paris 2019 WordCamp Paris 2019
WordCamp Paris 2019
 
WordCamp Nice 2018-10-19
WordCamp Nice 2018-10-19 WordCamp Nice 2018-10-19
WordCamp Nice 2018-10-19
 
WPNdigital ux et a11y par Claire Bizingre et Thomas Villain
WPNdigital ux et a11y par Claire Bizingre et Thomas VillainWPNdigital ux et a11y par Claire Bizingre et Thomas Villain
WPNdigital ux et a11y par Claire Bizingre et Thomas Villain
 
A11y et WordPress meetup de Nice
A11y et WordPress meetup de NiceA11y et WordPress meetup de Nice
A11y et WordPress meetup de Nice
 
Accessibilité numérique : comment la prendre en compte dans vos projets WordP...
Accessibilité numérique : comment la prendre en compte dans vos projets WordP...Accessibilité numérique : comment la prendre en compte dans vos projets WordP...
Accessibilité numérique : comment la prendre en compte dans vos projets WordP...
 
A11y et WordPress
A11y et WordPressA11y et WordPress
A11y et WordPress
 

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

  • 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