42
Pourquoi et comment améliorer l’accessibilité des sites WordPress WordCamp Paris 2015

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

Embed Size (px)

Citation preview

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

Pourquoi et comment améliorer l’accessibilité des sites WordPress

WordCamp Paris 2015

Page 2: 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

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

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

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

Les besoins

Séniors

HandicapAuditif Cognitif

Moteur Visuel

WordCamp paris 2015 – Claire Bizingre 4

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

Handicap auditif

Vidéo sous-titrée

Transcription textuelle

Traduction en langue des signes

Sourds

Malentendants

WordCamp paris 2015 – Claire Bizingre 5

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

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

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

Handicap moteur

Paralysie des membres supérieurs

Maladie invalidante (parkinson)

Difficultés dans les mouvements

Navigation au clavier

WordCamp paris 2015 – Claire Bizingre 7

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

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

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

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

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

Liens d’évitement visibles

WordCamp paris 2015 – Claire Bizingre 10

http://www.pasdecalais.fr/

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

Liens d’évitement cachés

WordCamp paris 2015 – Claire Bizingre 11

http://www.dila.premier-ministre.gouv.fr/activites/missions/

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

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

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

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

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

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/

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

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/

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

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

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

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

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

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

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

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

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

Lecteur d’écran – Liste des liens

WordCamp paris 2015 – Claire Bizingre 20

http://www.eure-en-ligne.fr

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

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

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

Lecteur d’écran – Liste des régions

WordCamp paris 2015 – Claire Bizingre 22

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

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"

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

Plugin WP Accessibility

Ajout des attributs role ARIA

Sur les balises header, footer, main, nav

WordCamp paris 2015 – Claire Bizingre 24

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

Lecteur d’écran - Liste des titres

WordCamp paris 2015 – Claire Bizingre 25

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

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

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

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

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

É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

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

Éditeur amélioré

WP Edit

MCE Accessible Language Change

Il reste la citation courte

WordCamp paris 2015 – Claire Bizingre 29

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

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 !

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

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

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

Title sur lien rempli automatiquement

WordCamp paris 2015 – Claire Bizingre 32

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

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"

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

Tester le contraste des couleurs

WordCamp paris 2015 – Claire Bizingre 34

http://www.lasalle-beauvais.fr

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

Proposer un contraste amélioré

http://www.lasalle-beauvais.fr

WordCamp paris 2015 – Claire Bizingre 35

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

Autre contraste

WordCamp paris 2015 – Claire Bizingre 36

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

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

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

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

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

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

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

Thème Simone

WordCamp paris 2015 – Claire Bizingre 40

http://www.lesyeuxdelimaginaire.com/

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

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

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

Merci de votre attention !

WordCamp paris 2015 – Claire Bizingre 42