Télécharger en tant que ODP, PPTX
![HTML : Contenu en langue étrangère
●
Shortcode : [div lang="en"]Hello World![/div]
●
Idem pour <span>
WordCamp Paris 2014
14/48](https://image.slidesharecdn.com/wordcamp-accessibilite-tony-archambeau-140118175454-phpapp01/85/Accessibilite-WordPress-Creer-des-sites-pour-tous-les-utilisateurs-14-320.jpg)
Téléchargé parTony Archambeau
♿ Accessibilité & WordPress : Créer des sites pour tous les utilisateurs
Le document présente une synthèse sur l'accessibilité des sites web, en se concentrant sur les aspects techniques liés à HTML, CSS et JavaScript pour répondre aux besoins des utilisateurs ayant des déficiences. Il aborde également l'éthique, la législation et les meilleures pratiques pour garantir une navigation inclusive. Des recommandations précises sont fournies pour améliorer la lisibilité et la navigabilité des contenus en ligne.
![[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress](https://cdn.slidesharecdn.com/ss_thumbnails/wordcamp-wordpress-2017-170319180930-thumbnail.jpg?width=640&height=640&fit=bounds)
![Guide moodle handicap [Septembre 2013]](https://cdn.slidesharecdn.com/ss_thumbnails/guidemoodlehandicap2013-140611023700-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
♿ Accessibilité & WordPress : Créer des sites pour tous les utilisateurs
- 1. Accessibilité & WordPress Créerdes sites pour tous les utilisateurs WordCamp Paris 2014
- 2. Qui suisje ? Tony Archambeau Développeur web ● Sitesweb infowebmaster.fr sql.sh tonyarchambeau.com ● Twitter @TonyArchambeau WordCamp Paris 2014 2/48
- 3. Chapitre 1 1. Étatde l'accessibilité 2. HTML 3. CSS 4. Javascript 5. Contenu WordCamp Paris 2014 3/48
- 4. Accessibilité : Quellesdé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éficiencestemporaires ● 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 Tousles 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 Duralex, sed lex « La loi est dure, mais c’est la loi » WordCamp Paris 2014 9/48
- 10. Accessibilité : Interactionavec 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. Étatde 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 ● Langueavec 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 : Contenuen langue étrangère ● Shortcode : [div lang="en"]Hello World![/div] ● Idem pour <span> WordCamp Paris 2014 14/48
- 15. HTML : Navigation ● ● Prioriserle 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 ● Imageinformative – – ● É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 ● Utiliserla 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 ● Bonnesé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 : Erreursur 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 ● Avenirde 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. Étatde l'accessibilité 2. HTML 3. CSS 4. Javascript 5. Contenu WordCamp Paris 2014 25/48
- 26. CSS : Taillede 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 : Taillede la police WordCamp Paris 2014 27/48
- 28. CSS : Contraste ● Boncontraste – ● 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 ● PourquoiFacebook est bleu ? http://edition.cnn.com/2010/TECH/social.media/09/20/zuckerberg.facebook.list/ WordCamp Paris 2014 29/48
- 30. CSS : Daltonisme ● Exemplesde 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 ● Nepas 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 : Cacheren CSS ● Display:none pas lu par les lecteurs d'écran ● Alternative : Source : Bootstrap v3.0.0 WordCamp Paris 2014 32/48
- 33. CSS : Liens ● Styledistinct ● 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 ● ● ● Champactif mis en valeur Message « (*) Champs obligatoire » à placer avant le formulaire CSS3 – :valid – :invalid WordCamp Paris 2014 34/48
- 35. Chapitre 4 1. Étatde l'accessibilité 2. HTML 3. CSS 4. Javascript 5. Contenu WordCamp Paris 2014 35/48
- 36. Javascript : Général ● Testerla 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 : Actionstemporelles ● É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 ● Attentionaux pièges – Infinite scrolling – Boucle sans fin – Événement keyup – Événement keydown – ... WordCamp Paris 2014 38/48
- 39. Chapitre 5 1. Étatde l'accessibilité 2. HTML 3. CSS 4. Javascript 5. Contenu WordCamp Paris 2014 39/48
- 40. Contenu : Titrede la page ● Pertinent ● Pas trop long WordCamp Paris 2014 40/48
- 41. Contenu : Éditeur ● Respectsémantique WordCamp Paris 2014 41/48
- 42. Contenu : Éditeur ● Éviterles 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 ● Nepas faire de paragraphe ou titre vide WordCamp Paris 2014 43/48
- 44. Contenu : Liens ● Ancrepertinente – 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> ● Utiliserun attribut title WordCamp Paris 2014 46/48
- 47. Contenu : Vidéo/Audio ● Sous-titre ● Audio-description ● Retranscriptionen langue des signes ● Éviter autoplay ● Éviter visionnage en boucle WordCamp Paris 2014 47/48
- 48. Merci de votreattention WordCamp Paris 2014 48/48