Accessibilité & WordPress - Tony Archambeau
Transcript of Accessibilité & WordPress - Tony Archambeau
Accessibilité & WordPressCréer des sites pour tous les utilisateurs
WordCamp Paris 2014
WordCamp Paris 2014 2/48
Tony Archambeau
Développeur web
● Sites web
Qui suisje ?
@TonyArchambeau
infowebmaster.fr
sql.sh
tonyarchambeau.com
WordCamp Paris 2014 3/48
1. État de l'accessibilité
2. HTML
3. CSS
4. Javascript
5. Contenu
Chapitre 1
WordCamp Paris 2014 4/48
● Déficience visuelle● Déficience auditive● Déficience moteur● Déficience « mentale »● Autres
Accessibilité : Quelles déficiences ?
WordCamp Paris 2014 5/48
● 1 personne sur 5 considère être limitée dans ses activités
● 1 personne sur 10 considère avoir un handicap
Accessibilité : Qui ?
http://www.insee.fr/fr/themes/document.asp?ref_id=ip1254
WordCamp Paris 2014 6/48
Accessibilité : Qui ?
Population vieillissante
WordCamp Paris 2014 7/48
● Bras dans le plâtre● Grosse migraine● Consommation excessive d'alcool● Perte ou bris de lunettes● Ordinateur sans haut-parleur● Souris cassée● Écran cassé● Reflet du soleil sur l'écran● …
Accessibilité : Déficiences temporaires
WordCamp Paris 2014 8/48
Accessibilité : Éthique
Tous les Hommes naissent et demeurent libres et égaux en droits
Déclaration des droits de l’homme et du citoyen de 1789
WordCamp Paris 2014 9/48
Accessibilité : Législation
Dura lex,sed lex
« La loi est dure, mais c’est la loi »
WordCamp Paris 2014 10/48
● Souris● Clavier● Micro● Clavier
virtuel● Plage braille● Trackball
● Écran● Haut parleur● Synthèse
vocale● Plage braille● Agrandisseur
d'écran
Accessibilité : Interaction avec un site
WordCamp Paris 2014 11/48
1. État de l'accessibilité
2. HTML
3. CSS
4. Javascript
5. Contenu
Chapitre 2
WordCamp Paris 2014 12/48
● Validité W3C aide mais ne suffit pas● Éviter de détourner le fonctionnement normal
HTML : W3C
WordCamp Paris 2014 13/48
● Langue avec l'attribut lang et sens de lecture avec dir– Langue courant sur la balise <html>
– Modifier la langue sur une balise <div>
– Modifier la langue sur une balise <span>
HTML : Langage
<div lang="en">Hello World!</div>
La phrase « <span lang="en">Hello World!</span> » signifie « bonjour le monde »
<html <?php language_attributes(); ?> dir="ltr">
WordCamp Paris 2014 14/48
HTML : Contenu en langue étrangère
● Shortcode : [div lang="en"]Hello World![/div]
● Idem pour <span>
WordCamp Paris 2014 15/48
HTML : Navigation● Prioriser le contenu pour la navigation au
clavier● Attribut tabindex pour changer l'ordre de
navigation
● Fil d'Ariane
<a href="page1.php" tabindex="2">lien 1</a><a href="page2.php" tabindex="1">lien 2</a><a href="page3.php" tabindex="3">lien 3</a>
WordCamp Paris 2014 16/48
HTML - Navigation (liens d'évitement)
● HTML
● CSS
WordCamp Paris 2014 17/48
HTML - Navigation (liens)
● Cohérence● Pertinence● Compréhension. Éviter les mots compliqués,
inventés ou les abréviations– Privilégier « Aide » plutôt que « FAQ »
– Éviter « lire la suite » ou utiliser une alternative
<a href="..." title="titre de l'article">lire la suite</a>
<a href="...">lire la suite<span class="sronly"> de l'article ...</span></a>
WordCamp Paris 2014 18/48
HTML : Liens (caractères spéciaux)
● Utiliser CSS pour intégrer des caractères spéciaux
WordCamp Paris 2014 19/48
HTML : Image
● Image informative– Éviter de mettre du texte dans l'image
– Texte alternatif pertinent
● Image d'illustration– Texte alternatif court
● Image de décoration– A placer dans le CSS ou laisser l'attribut alt vide
● Image dans un lien– Le texte alternatif doit servir pour le lien
WordCamp Paris 2014 20/48
HTML : Tableau
● Utiliser la sémantique :– <thead>, <tbody>, <tfoot> et surtout <th>
● Attributs :– -scope="row" et scope="col"
– abbr=""
● Description avec :– Attribut summary (en voie de disparition)
– <caption>
WordCamp Paris 2014 21/48
HTML : Formulaire
● Bonne sémantique● Ordre logique des champs● Utiliser <label> ou attribut title pour chaque
champ– Attribut placeholder ne suffit pas
– Pertinence des mots
● <fieldset> et <legend> pour regrouper les checkbox et boutons radio
WordCamp Paris 2014 22/48
HTML : Formulaire (HTML5)
● Reconnaissance vocale
● Attribut required
<input type="text" name="s" xwebkitspeech />
WordCamp Paris 2014 23/48
HTML : Erreur sur un formulaire
● Prévenir plutôt que guérir– Prévenir en javascript
– Comprendre en PHP
– Expliquer avec des mots
● Message récapitulatif – Texte dans le <title>
– Récapitulatif en haut de page
– Lien interne pour accéder rapidement au champ
● Message contextuel à côté des champs ayant une erreur● Pertinence du message d'erreur
WordCamp Paris 2014 24/48
HTML : WAI-ARIA
● Avenir de la sémantique● Attributs « role »
– role="article"
– role="search"
– ...
● Attributs « aria-* » pour les propriétés et états– aria-grabbed
– aria-describedby
– aria-labelledby
– ...
WordCamp Paris 2014 25/48
1. État de l'accessibilité
2. HTML
3. CSS
4. Javascript
5. Contenu
Chapitre 3
WordCamp Paris 2014 26/48
● Taille suffisante– Lecture
– Élément cliquable (lien, bouton, scrollbar …)
● Taille relative (em, rem ou %) plutôt qu'absolue (px ou pt)● Tester si police agrandie
– Attention aux blocs avec une taille fixe
● Espace suffisant– Entre les lignes
– Entre les paragraphes (1.5em plutôt que 1.2em)
CSS : Taille de la police
WordCamp Paris 2014 27/48
CSS : Taille de la police
WordCamp Paris 2014 28/48
● Bon contraste– Ni pas assez, ni trop (éviter #000000 sur #FFFFFF)
● Attention particulière :– Propriété CSS opacity
– Dégradé
– Ombre en CSS
– Couleur par défaut pour les images de fond
– Texte au dessus d'une image
CSS : Contraste
WordCamp Paris 2014 29/48
CSS : Couleurs
● Pourquoi Facebook est bleu ?
http://edition.cnn.com/2010/TECH/social.media/09/20/zuckerberg.facebook.list/
WordCamp Paris 2014 30/48
● Exemples de dyschromatopsie :
● Ne pas passer d'information par une couleur– Coupler avec texte ou iconographie
CSS : Daltonisme
Original Protanopie Deutéranopie Tritanopie Achromatopsie
WordCamp Paris 2014 31/48
● Ne pas mettre en justifier● Éviter les polices avec serif● Éviter les textes en italique● Polices spécifiques pour les dyslexiques
– Une open source et une sous licence payante
CSS : Police
WordCamp Paris 2014 32/48
● Display:none pas lu par les lecteurs d'écran● Alternative :
CSS : Cacher en CSS
Source : Bootstrap v3.0.0
WordCamp Paris 2014 33/48
● Style distinct● Lien actif :
– Utiliser :focus ou la propriété outline
– Tester
● Penser au style pour :– .current-menu-item
– .current-page-ancestor
– .current-post-ancestor
– .current-post-parent
– .current-menu-parent
CSS : Liens
WordCamp Paris 2014 34/48
● Champ actif mis en valeur● Message « (*) Champs obligatoire » à placer
avant le formulaire● CSS3
– :valid
– :invalid
CSS : Formulaire
WordCamp Paris 2014 35/48
1. État de l'accessibilité
2. HTML
3. CSS
4. Javascript
5. Contenu
Chapitre 4
WordCamp Paris 2014 36/48
● Tester la navigation au clavier– « onfocus » plutôt que « onclick »
– Éviter le double clic
● Tester si javascript désactivé● Attention à la manipulation du DOM● Attention au focus
– Prendre le focus : attribut tabindex="0"
– Enlever le focus : attribut tabindex="-1"
● Modifier les attributs WAI-ARIA si nécessaire● Éviter les polices en <canvas>
Javascript : Général
WordCamp Paris 2014 37/48
● Éviter de limiter dans le temps● Laisser le temps aux utilisateurs
– Slider
– Redirection
● Pouvoir augmenter
la limite de temps
Javascript : Actions temporelles
WordCamp Paris 2014 38/48
● Attention aux pièges– Infinite scrolling
– Boucle sans fin
– Événement keyup
– Événement keydown
– ...
Javascript : Pièges
WordCamp Paris 2014 39/48
1. État de l'accessibilité
2. HTML
3. CSS
4. Javascript
5. Contenu
Chapitre 5
WordCamp Paris 2014 40/48
● Pertinent● Pas trop long
Contenu : Titre de la page
WordCamp Paris 2014 41/48
● Respect sémantique
Contenu : Éditeur
WordCamp Paris 2014 42/48
● Éviter les doubles espaces entre 2 mots● Choix des mots adaptés à la cible
– Site généraliste : mots compréhensibles de tous
– Site spécialisé : autorisé à utiliser des termes plus ciblés
● Casser les grands blocs de texte en paragraphes● Titres compréhensibles et cohérents● Hiérarchie des titres
Contenu : Éditeur
WordCamp Paris 2014 43/48
Contenu : Sémantique
● Ne pas faire de paragraphe ou titre vide
WordCamp Paris 2014 44/48
Contenu : Liens● Ancre pertinente
– Télécharger un document : format, poids et langue
– Si possible inférieur à 80 caractères
● Possibilité de compléter avec attribut title● Éviter d'ouvrir
dans une nouvelle
fenêtre
WordCamp Paris 2014 45/48
Contenu : Image
● Titre :– Utile pour le Back-Office
● Légende :– Apparaît sous l'image
– Éviter la redondance avec le texte alternatif
● Texte alternatif :– Éviter de commencer par « image
de ... »
– Longue description soit dans le texte ou faire un lien vers une page spécifique à proximité de l'image
WordCamp Paris 2014 46/48
Contenu : <iframe>
● Utiliser un attribut title
WordCamp Paris 2014 47/48
Contenu : Vidéo/Audio
● Sous-titre● Audio-description● Retranscription en
langue des signes● Éviter autoplay● Éviter visionnage en boucle
WordCamp Paris 2014 48/48
Merci de votre attention