✮ Présentation pour le WordCamp Paris 2014 ✮
L’accessibilité web : tout le monde en a plus au moins entendu parlé. Mais qui l’utilise vraiment au quotidien ?
Tous les acteurs impliquées dans la conception, le développement et la vie d’un site web (rédacteur, blogueur, SEO, SMO ...) devraient être sensibilisées aux différents types de déficiences. Cela permet de mieux comprendre les potentielles situation de handicap sur le web.
Cette conférence tend à expliquer les déficiences qui peuvent affecter l'usage d'un site web et détail une série de bonnes pratiques pour coder correctement un thème et un WordPress avec du code adapté pour le HTML, le CSS et le Javascript. Enfin, il est expliqué comment utiliser correctement l'espace administrateur de WordPress (le Back-Office de WordPress) pour qu'un maximum d'internautes et visiteurs puissent consulter le contenu.
5. Accessibilité : Qui ?
●
●
1 personne sur 5 considère être limitée dans
ses activités
1 personne sur 10 considère avoir un handicap
http://www.insee.fr/fr/themes/document.asp?ref_id=ip1254
WordCamp Paris 2014
5/48
7. Accessibilité : Déficiences temporaires
●
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
●
…
WordCamp Paris 2014
7/48
8. 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
8/48
10. Accessibilité : Interaction avec un site
●
Souris
●
Écran
●
Clavier
●
Haut parleur
●
Micro
●
●
Clavier
virtuel
●
Plage braille
●
Trackball
WordCamp Paris 2014
●
●
Synthèse
vocale
Plage braille
Agrandisseur
d'écran
10/48
11. Chapitre 2
1. État de l'accessibilité
2. HTML
3. CSS
4. Javascript
5. Contenu
WordCamp Paris 2014
11/48
12. HTML : W3C
●
Validité W3C aide mais ne suffit pas
●
Éviter de détourner le fonctionnement normal
WordCamp Paris 2014
12/48
13. HTML : Langage
●
Langue avec l'attribut lang et sens de lecture
avec dir
–
Langue courant sur la balise <html>
<html <?php language_attributes(); ?> dir="ltr">
–
Modifier la langue sur une balise <div>
<div lang="en">Hello World!</div>
–
Modifier la langue sur une balise <span>
La phrase « <span lang="en">Hello World!</span> »
signifie « bonjour le monde »
WordCamp Paris 2014
13/48
14. HTML : Contenu en langue étrangère
●
Shortcode : [div lang="en"]Hello World![/div]
●
Idem pour <span>
WordCamp Paris 2014
14/48
15. HTML : Navigation
●
●
Prioriser le contenu pour la navigation au
clavier
Attribut tabindex pour changer l'ordre de
navigation
<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>
●
Fil d'Ariane
WordCamp Paris 2014
15/48
16. HTML - Navigation (liens d'évitement)
●
HTML
●
CSS
WordCamp Paris 2014
16/48
17. 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="...">lire la suite<span class="sronly">
de l'article ...</span></a>
<a href="..." title="titre de l'article">lire la
suite</a>
WordCamp Paris 2014
17/48
18. HTML : Liens (caractères spéciaux)
●
Utiliser CSS pour intégrer des caractères
spéciaux
WordCamp Paris 2014
18/48
19. HTML : Image
●
Image informative
–
–
●
Éviter de mettre du texte dans l'image
Texte alternatif pertinent
Image d'illustration
–
●
Image de décoration
–
●
Texte alternatif court
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
19/48
20. 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
20/48
21. 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
21/48
22. HTML : Formulaire (HTML5)
●
Reconnaissance vocale
<input type="text" name="s" xwebkitspeech />
●
Attribut required
WordCamp Paris 2014
22/48
23. HTML : Erreur sur un formulaire
●
Prévenir plutôt que guérir
–
–
Comprendre en PHP
–
●
Prévenir en javascript
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
23/48
24. HTML : WAI-ARIA
●
Avenir de la sémantique
●
Attributs « role »
–
–
role="search"
–
●
role="article"
...
Attributs « aria-* » pour les propriétés et états
–
aria-grabbed
–
aria-describedby
–
aria-labelledby
–
...
WordCamp Paris 2014
24/48
25. Chapitre 3
1. État de l'accessibilité
2. HTML
3. CSS
4. Javascript
5. Contenu
WordCamp Paris 2014
25/48
26. CSS : Taille de la police
●
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)
WordCamp Paris 2014
26/48
27. CSS : Taille de la police
WordCamp Paris 2014
27/48
28. CSS : Contraste
●
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
WordCamp Paris 2014
28/48
29. CSS : Couleurs
●
Pourquoi Facebook est bleu ?
http://edition.cnn.com/2010/TECH/social.media/09/20/zuckerberg.facebook.list/
WordCamp Paris 2014
29/48
30. CSS : Daltonisme
●
Exemples de dyschromatopsie :
Original
●
Protanopie
Deutéranopie
Tritanopie
Achromatopsie
Ne pas passer d'information par une couleur
–
Coupler avec texte ou iconographie
WordCamp Paris 2014
30/48
31. CSS : Police
●
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
WordCamp Paris 2014
31/48
32. CSS : Cacher en CSS
●
Display:none pas lu par les lecteurs d'écran
●
Alternative :
Source : Bootstrap v3.0.0
WordCamp Paris 2014
32/48
33. CSS : Liens
●
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
WordCamp Paris 2014
33/48
34. CSS : Formulaire
●
●
●
Champ actif mis en valeur
Message « (*) Champs obligatoire » à placer
avant le formulaire
CSS3
–
:valid
–
:invalid
WordCamp Paris 2014
34/48
35. Chapitre 4
1. État de l'accessibilité
2. HTML
3. CSS
4. Javascript
5. Contenu
WordCamp Paris 2014
35/48
36. Javascript : Général
●
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>
WordCamp Paris 2014
36/48
37. Javascript : Actions temporelles
●
Éviter de limiter dans le temps
●
Laisser le temps aux utilisateurs
–
–
●
Slider
Redirection
Pouvoir augmenter
la limite de temps
WordCamp Paris 2014
37/48
38. Javascript : Pièges
●
Attention aux pièges
–
Infinite scrolling
–
Boucle sans fin
–
Événement keyup
–
Événement keydown
–
...
WordCamp Paris 2014
38/48
39. Chapitre 5
1. État de l'accessibilité
2. HTML
3. CSS
4. Javascript
5. Contenu
WordCamp Paris 2014
39/48
40. Contenu : Titre de la page
●
Pertinent
●
Pas trop long
WordCamp Paris 2014
40/48
42. Contenu : Éditeur
●
É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
WordCamp Paris 2014
42/48
44. 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
44/48
45. 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
45/48