Pourquoi et comment améliorer l'accessibilité des sites WordPress -...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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