♿ Accessibilité & WordPress : Créer des sites pour tous les utilisateurs

1. Accessibilité & WordPress Créer des sites pour tous les utilisateurs WordCamp Paris 2014

2. Qui suisje ? Tony Archambeau Développeur web ● Sites web infowebmaster.fr sql.sh tonyarchambeau.com ● Twitter @TonyArchambeau WordCamp Paris 2014 2/48

3. Chapitre 1 1. État de l'accessibilité 2. HTML 3. CSS 4. Javascript 5. Contenu WordCamp Paris 2014 3/48

4. Accessibilité : Quelles déficiences ? ● Déficience visuelle ● Déficience auditive ● Déficience moteur ● Déficience « mentale » ● Autres WordCamp Paris 2014 4/48

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

6. Accessibilité : Qui ? Population vieillissante WordCamp Paris 2014 6/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

9. Accessibilité : Législation Dura lex, sed lex « La loi est dure, mais c’est la loi » WordCamp Paris 2014 9/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

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

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

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

40. Contenu : Titre de la page ● Pertinent ● Pas trop long WordCamp Paris 2014 40/48

41. Contenu : Éditeur ● Respect sémantique WordCamp Paris 2014 41/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

43. Contenu : Sémantique ● Ne pas faire de paragraphe ou titre vide WordCamp Paris 2014 43/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

46. Contenu : <iframe> ● Utiliser un attribut title WordCamp Paris 2014 46/48

47. Contenu : Vidéo/Audio ● Sous-titre ● Audio-description ● Retranscription en langue des signes ● Éviter autoplay ● Éviter visionnage en boucle WordCamp Paris 2014 47/48

48. Merci de votre attention WordCamp Paris 2014 48/48

♿ Accessibilité & WordPress : Créer des sites pour tous les utilisateurs

Estás leyendo una previsualización.

Eche un vistazo a continuación

♿ Accessibilité & WordPress : Créer des sites pour tous les utilisateurs

Más Contenido Relacionado

Presentaciones para usted (20)

A los espectadores también les gustó (10)

Similares a ♿ Accessibilité & WordPress : Créer des sites pour tous les utilisateurs (20)

Más reciente (20)