View
1.311
Download
0
Category
Preview:
Citation preview
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
HandicapAuditif 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
Recommended