10 tests simples pour améliorer l'accessibilité de votre site - BreizhCamp

Derrière ce titre « clickbait » se cache une vraie méthode basée sur une checklist du W3C.

Elle permet de tester soit même l’accessibilité d’un site en 10 tests simple, même sans avoir un profil technique.

Cette méthode ne remplace pas un « vrais » audit de site, mais elle va permettre de donner une idée générale de l’accessibilité d'un site. Ces tests couvrent une bonne partie des problèmes bloquants d’accessibilité. Les passer avec succès est une base essentielle pour rendre accessible un site.

Ils sont rapides et faciles à faire, tous les intervenants d’un projet peuvent les réaliser : Clients, PO, CP, Dev, UX/UI Designers…

L’objectif de cette conférence est de présenter ces 10 tests et de les pratiquer en « live » pour que vous puissiez les mettre en places sur vos projets ou votre site.

Transcript

1. 10 tests simples pour améliorer l'accessibilité de votre site François-Xavier Lair Henri Gauffriau
2. @lair_net mastodon.top/@lair_net François-Xavier Lair mastodon.xyz/@becaye Henri Gauffriau
3. Présentations Et vous ?
4. Un droit : l’accessibilité Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales. Tim Berners-Lee, créateur du World Wide Web Consortium (W3C) 1994
5. Les chiffres du handicap
6. Les chiffres du handicap • 80% des handicaps sont invisibles • Les personnes en fauteuil roulant représentent 2% des personnes en situation de handicap • Des chiffres comme ça on peut les aligner comme des perles
7. Les chiffres du handicap • 80% des types de handicap surviennent entre 18 et 64 ans • 20% Personnes se retrouvent une fois en situation de handicap temporaire dans sa vie • Jusqu’à 30% chez les seniors Sources : , Nous sommes valides de façon temporaire INSEE Direction de la recherche des études de l’évaluation et des statistiques (DREES)
8. Handicap temporaire et situationnel
9. Bénéfices induits L'accessibilité c'est indispensable pour certains, mais bénéfique pour tous ! W3C Web Accessibility Initiative
10. Bénéfices induits • Trafic • Valeur produit • Bénéfices techniques • ÉcoConception • Référencement • Innovation • Valoriser l’image de marque • Limiter les risques juridiques Ressource : The Business Case for Digital Accessibility
11. Bénéfices induits L'accessibilité ce n'est pas une contrainte, c'est une opportunité. @lair_net, 2024
12. Les ≠ Easy Checks RGAA : Référentiel général d'amélioration de l'accessibilité
13. Les : quand faire ces tests ? Création • Tout au long de la création du site • À chaque fin de sprint Limiter l'effet « Boule de neige » Site existant • Il n'est jamais trop tard • Commencer par les parcours clés Tester, tester, tester ! Easy Checks
14. Disclaimer
15. Pourquoi vois-tu la paille qui est dans l'œil de ton frère et n'aperçois-tu pas la poutre qui est dans ton œil à toi ! Évangile de Luc, 6, 41
16. Pourquoi faire et refaire ces tests ? • Personne n'est parfait, une erreur arrive très vite • On voit plus facilement les erreurs des autres • Régressions Tester, tester, tester !
17. Qui fait quoi ? • Tous les intervenants sont concernés • Différents niveaux de tests L'accessibilité cela ne repose pas sur une personne : c'est un travail d'équipe
18. Test 1 : Titre de la page Pour qui, pour quoi ? • Aveugles ou malvoyants qui utilisent un lecteur d'écran • SEO • Permettre aux utilisateurs d'identifier immédiatement le site et la nature des contenus de chaque page Comment tester • Regarder l’onglet de votre navigateur • Inspecter le HTML directement • Bookmarklet W3C
19. Test 1 : Titre de la page Objectif Le titre de la page : • Il permet de retrouver la page dans l’historique de navigation ou la liste des onglets. • Contient le nom du site • Décrit le contenu ou la fonction de la page • Précise quelle est l'étape en cours d'un processus • Dans une série de résultats de recherche, précise quel est l'intervalle de résultats affichés.
20. Test 1 : Titre de la page Exemples • "" ou lapostemobile.fr/panier
21. Test 1 : Titre de la page Exemples • "" ou lapostemobile.fr/panier • Forfait mobile 140Go 5G 20,99 €
22. Test 1 : Titre de la page Exemples • "" ou lapostemobile.fr/panier • Forfait mobile 140Go 5G 20,99 € • Forfait Mobile 4G & 5G Sans Engagement – RED by SFR
23. Test 1 : Titre de la page Conseils et astuces • Automatiser • Utiliser un outil permettant de dresser la liste complète des titres de toutes les pages ( , ) Xenu Screaming Frog
24. Test 1 : Titre de la page Références • , • 8.5 et 8.6 Règle Opquast n°98 Règle Opquast n°97 Critères RGAA
25. Test 1 : Titre de la page À vous • Recherche | MAXI ZOO
26. Test 1 : Titre de la page À vous • Recherche | MAXI ZOO • Recherche | MAXI ZOO
27. Test 1 : Titre de la page À vous • Recherche | MAXI ZOO • Recherche | MAXI ZOO • Votre recherche : Souris
28. Test 1 : Titre de la page À vous • Recherche | MAXI ZOO • Recherche | MAXI ZOO • Votre recherche : Souris • Votre recherche sur Materiel.net : souris
29. Test 1 : Titre de la page À vous • Recherche | MAXI ZOO • Recherche | MAXI ZOO • Votre recherche : Souris • Votre recherche sur Materiel.net : souris • Votre recherche sur Materiel.net : souris
30. Test 1 : Titre de la page À vous • Recherche | MAXI ZOO • Recherche | MAXI ZOO • Votre recherche : Souris • Votre recherche sur Materiel.net : souris • Votre recherche sur Materiel.net : souris • Je recherche : services, Tous les types de contenu | 90 résultats | Page 6 | Région Pays de la Loire
31. Test 2 : Alternative des images Pour qui, pour quoi ? • Les personnes aveugles • Les personnes déficientes visuelles • Les personnes ayant des handicaps cognitifs Comment tester • Extension Web Developer - : Display alt attributes • Extension • • Inspecter le HTML directement • Inspecteur d'accessibilité Firefox ou Chrome aXe Bookmarklet W3C
32. Test 2 : Alternative des images Objectif • Les images de décorations sont ignorées par outils d'assistances • Les images porteuses d'informations ont une alternative Exemples • https:/ /www.fnac.com/
33. Test 2 : Alternative des images SVG, glyphes, émoticônes • https:/ /www.grandeecolenumerique.fr/
34. Test 2 : Alternative des images Conseils et astuces • • Tester, tester, tester Arbre de décision W3C
35. Test 2 : Alternative des images Références • , , • 1.1 à 1.9 Règle Opquast n°111 Règle Opquast n°112 Règle Opquast n°113 Critères RGAA
36. Test 2 : Alternative des images À vous • EDF télésurveillance
37. Test 3 : Structure des titres Pour qui, pour quoi ? • Aveugles et utilisateurs de technologies d'assistances • SEO • Permettre de visualiser la structure du contenu de la page et d’y naviguer Comment tester • Extension Heading Maps • Extension Web Developer - • • Inspecter le HTML directement Bookmarklet W3C
38. Test 3 : Structure des titres Objectif • La page doit être structurée selon un ordre logique • Un titre doit décrire le contenu qu’il introduit • Pas de titres "simulés" sans valeur sémantique Exemples • • • Ryanair Rooms https:/ /www.laposte.fr/ Cdiscount
39. Test 3 : Structure des titres À vous • • • RGAA https:/ /www.volotea.com/fr/ https:/ /www.darty.com
40. Test 3 : Structure des titres Conseils et astuces • Tester, tester, tester
41. Test 3 : Structure des titres Références • • • 9.1 TGPI : When do headings fail WCAG? Règle Opquast n°227 Critères RGAA
42. Test 4 : Contrastes Pour qui, pour quoi ? • Utilisateurs daltoniens ou malvoyants • Tous les utilisateurs Permettre une bonne lisibilité des contenus Limiter la charge mentale lors de la consultation
43. Test 4 : Contrastes Règles • Ratio de contraste minimal de 4.5:1 pour les textes de moins de 24px, ou 18.5px en gras • Ratio de contraste minimal de 3:1 pour les textes de plus de 24px ou 18.5px en gras
44. Test 4 : Contrastes Comment Tester • Inspecteur d'accessibilité Firefox ou Chrome • Exemples • • Colour Contrast Analyser (CCA) Volotéa Breizhcamp
45. Test 4 : Contrastes Conseils et astuces • Stéphanie Walter, • À intégrer dans les guidelines du design system • Atténuer l’intensité ou la luminosité, • Décaler la teinte, • Ajouter un arrière-plan, un contour... Documenter l’accessibilité en phase de design
46. Test 4 : Contrastes Outils • • • Axe Outils figma, sketch... https:/ /contrast-grid.eightshapes.com/
47. Test 4 : Contrastes Références • • • 3.2 et 3.3 Ben Myers "How to Fix Your Low-Contrast Text" Règle Opquast n°177 Critères RGAA
48. Test 4 : Contrastes À vous • • Corum Easyvols
49. Test 5 : Redimensionnement et zoom Pour qui, pour quoi ? • Déficients visuels • Permettre aux utilisateurs d’adapter le rendu à leurs besoins ou à leurs préférences • Améliorer la compatibilité avec les terminaux mobiles Comment Tester • Zoom texte seulement dans Firefox • Zoom graphique dans Chrome
50. Test 5 : Redimensionnement et zoom Objectif • Tous les textes doivent pouvoir être agrandis • Les textes ou contenus ne doivent pas être coupés • Les textes ou contenus ne doivent pas se superposer • Tous les boutons, champs et éléments de contrôles doivent rester visibles et utilisables Exemples • • Info-Retraite https:/ /onepoint.live/nos-offres
51. Test 5 : Redimensionnement et zoom À vous • • https:/ /www.bing.com/?cc=fr https:/ /www.laposte.fr/professionnel
52. Test 5 : Redimensionnement et zoom Conseils et astuces • Prévoir les cas marginaux : textes longs, césures, etc. • Utiliser des unités relatives (em, rem, %, etc.) pour définir les corps et dimensions. • Ne pas contraindre les hauteurs et les largeurs
53. Test 5 : Redimensionnement et zoom Références • • 10.4 et 10.11 Règle Opquast n°188 Critères RGAA
54. Test 5 : Redimensionnement et zoom À vous • • Corum Easyvols
55. Test 6 : Focus et navigation au clavier Pour qui, pour quoi ? • Utilisateurs de technologies d'assistances (aveugles, malvoyants). • Utilisateurs ne pouvant utiliser de souris (handicaps moteurs, arthrite, Parkinson, tendinites, troubles musculo–squelettiques, souris cassée ou déchargée) • Utilisateurs ne souhaitant pas utiliser de souris • Permettre la consultation des contenus et l'utilisation des services indépendamment du périphérique d'entrée.
56. Test 6 : Focus et navigation au clavier Objectif • Le focus clavier n'est ni supprimé ni masqué • Le site est intégralement utilisable au clavier • La navigation au clavier s'effectue dans un ordre prévisible • Le site propose des liens d'évitements
57. Test 6 : Focus et navigation au clavier Comment Tester • Votre clavier ! ▪ TAB pour faire avancer le focus, ▪ Shift + TAB pour le faire reculer, ▪ Entrée pour actionner un lien, un bouton, un formulaire... ▪ Espace pour (dé)cocher, actionner un bouton, etc ▪ Flèches (← ↑ → ↓) pour défiler, changer de bouton radio, se déplac dans un menu... ▪ Échap pour annuler ou fermer une modale, un menu, etc
58. Test 6 : Focus et navigation au clavier Comment Tester • Inspecteur d'accessibilité Firefox ou Chrome • Extension Stylish avec un style personnalisé *:focus { outline: 3px dashed #00ff00 !important; outline-offset:3px !important; }
59. Test 6 : Focus et navigation au clavier Exemples • • • https:/ /www.recyclivre.com/ https:/ /particulier.edf.fr/fr/accueil/economies-d-energie/ Drive Intermarché
60. Test 6 : Focus et navigation au clavier Conseils et astuces • Menus d'évitements • Utiliser les éléments HTML natifs correctement • Implémenter un motif de conception ARIA • Stéphanie Walter, • Utiliser la pseudo class css focus-visible • Tester, tester, tester Documenter l’accessibilité en phase de design
61. Test 6 : Focus et navigation au clavier Références • • , , • 4.11, 4.12, 7.1, 7.3, 10.14, 12.9 Motif de conception ARIA Règle Opquast n°160 Règle Opquast n°161 Règle Opquast n°162 Critères RGAA
62. Test 6 : Focus et navigation au clavier À vous • • https:/ /www.red-by-sfr.fr/forfaits-mobiles/ https:/ /www.paysdelaloire.fr/
63. Test 7 : Formulaires Pour qui, pour quoi ? • Utilisateurs de technologies d'assistances (aveugles, malvoyants) • Utilisateurs avec des problèmes cognitifs • Tous les utilisateurs
64. Test 7 : Formulaires Comment tester • Regarder l’onglet de votre navigateur • Inspecter le HTML directement • • Bookmarklet W3C : Label des champs Bookmarklet W3C : Champs requis
65. Test 7 : Formulaires Objectif • Chaque champ est • Les labels sont • Les champs obligatoires • Les champs de même nature sont regroupés • Le format attendu pour les (avant validation) • Un exemple de • Les champs correctement renseignés ne doivent pas être réinitialisés • Les erreurs sont associé à son label visuellement accolés à leurs champs sont indiqués et associés aux champs champs est indiqués saisie valide est proposé clairement indiquées et reliées aux champs
66. Test 7 : Formulaires Conseils et astuces • Associer chaque champ à son label avec les attributs for et id • Indiquer le caractère obligatoire avec l’attribut required ou aria- required • Lier les messages d’aide ou d’erreur avec aria-describedby • Expliciter le format attendu et suggérer des corrections • Utiliser autocomplete dès que possible
67. Test 7 : Formulaires Références • 67 à 93 • 11.1 à 11.13 Règle Opquast Critères RGAA
68. Test 7 : Formulaires À vous • • • Allianz assurance auto EDF Réclamation https:/ /site.arkea-banque-ei.com/contact/
69. Test 8 : Éléments en mouvements, clignotants ou flashant Pour qui, pour quoi ? • Epileptiques, Trouble de l'attention, Hyperactifs, Dys.. • Laisser à l'utilisateur le contrôle des animations • Ne pas perturber l'attention en imposant des éléments pouvant gêner celle-ci • Laisser les utilisateurs consulter l'information à leur rythme Objectif • Les animations visuelles de plus de 5 secondes et les sons de plus de 3 secondes doivent être dotés de moyen de contrôles.
70. Test 8 : Éléments en mouvements, clignotants ou flashant Exemples • • www.jackjaeschke.com Walker WordPress Ranger
71. Test 8 : Éléments en mouvements, clignotants ou flashant Conseils et astuces • Utiliser prefers-reduced-motion
72. Test 8 : Éléments en mouvements, clignotants ou flashant Références • • 11.1 et 11.13 Règle Opquast 121 Critères RGAA
73. Test 9 : Multimédia (vidéo, audio) alternatives Pour qui, pour quoi ? • Aveugles, sourds et malentendants • Tous les utilisateurs Objectif • Les éléments multimédias doivent pouvoir être contrôlés au clavier • Vérifier la présence de sous-titre et de transcription Comment tester ? • Navigation
74. Test 9 : Multimédia (vidéo, audio) alternatives Exemples • Vidéo présentation produit Amazon
75. Test 9 : Multimédia (vidéo, audio) alternatives Références • • • 4.1 à 4.6 Règle Opquast 116 Règle Opquast 117 Critères RGAA
76. Test 10 : Structure de l’information Pour qui, pour quoi ? • Non-voyants, mal-voyants • SEO Comment tester • Mode lecture du navigateur • Extension Web Developer - ,
77. Test 10 : Structure de l’information Objectif • Les contenus doivent rester lisibles et compréhensibles lorsque les feuilles de styles sont désactivées • Ordre de lecture • Les zones de regroupement de contenus peuvent être atteintes ou évitées ▪ Zone d’en-tête : role="banner" ▪ Menu de navigation principal : role="navigation” ▪ Contenu principal : role="main" ▪ Pied de page : role="contentinfo" ▪ Moteur de recherche : role="search"
78. Test 10 : Structure de l’information Comment tester • Via l'inspecteur de code • Extension Web Developper : Informations - display ARIA role • Bookmarklet de : Paul Jadam Landmarks Bookmarklet
79. Test 10 : Structure de l’information Exemples • https:/ /accessibilite.numerique.gouv.fr/
80. Test 10 : Structure de l’information Références • • 9.2, 10.3, 12.6 Règle Opquast 178 Critères RGAA
81. Test 10 : Structure de l’information À vous • Breizhcamp
82. Bonus – Pertinence des liens Pour qui, pour quoi ? • Utilisateurs de lecteur d'écran • SEO • Tous les utilisateurs • Permettre d'identifier précisément la nature des liens Objectif • Tous les liens doivent avoir un libellé explicite
83. Bonus – Pertinence des liens Comment tester • Extension a11y - • Navigation • Inspecteur d'accessibilité Firefox ou Chrome • Lecteur d'écran Exemples • • • https:/ /www.prixtel.com/ https:/ /particulier.edf.fr/fr/accueil.html https:/ /www.paysdelaloire.fr/
84. Bonus – Pertinence des liens Références • • 6.1 et 6.2 Règle Opquast 132 Critères RGAA
85. Bonus – Informations véhiculées uniquement par la couleur Pour qui, pour quoi ? • Aveugles, malvoyants, daltoniens Comment tester • Manuelle • Outils d'accessibilité de Firefox
86. Bonus – Informations véhiculées uniquement par la couleur Exemples • • • Express : Élections départementales Présidentielles 1965 Réservation gîte
87. Bonus – Informations véhiculées uniquement par la couleur Références • • 3.1 Règle Opquast 176 Critères RGAA
88. Bonus – Langue de la page Pour qui, pour quoi ? • Utilisateurs de lecteur d'écran • SEO • Faciliter l'identification de la langue par les outils (vocalisation, traduction, indexation) Objectif • L’indication de la langue de la page est indiquée • Les changements de langue sont indiqués
89. Bonus – Langue de la page Comment tester • Inspecter le HTML directement, • Extension a11y.css : « afficher les langues », Exemples • Devoxx 2024
90. Bonus – Langue de la page Références • • • • 8.3 et 8.4 Règle Opquast 125 Règle Opquast 125 Règle Opquast 127 Critères RGAA
91. Les outils • - • Tanaguru webext - • • et (accessoirement) Lighthouse - Axe DevTools Tanaguru Contrast finder Grille d'audit easy-checks
92. Cas pratique • • Boulanger Breizh C@mp
93. Conclusion Tester, tester, tester !
94. Feedbacks : @lair_net mastodon.top/@lair_net François-Xavier Lair mastodon.xyz/@becaye Henri Gauffriau