10 tests simples pour améliorer l'accessibilité de votre site - Coder's Delight - Poitiers 2023

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
2. @lair_net mastodon.top/@lair_net François-Xavier Lair
3. Un droit : l’accessibilité [...] Protéger et assurer la pleine et égale jouissance de tous les droits de l’homme et de toutes les libertés fondamentales par les personnes handicapées et de promouvoir le respect de leur dignité intrinsèque. Convention relative aux droits des personnes handicapées
4. Les chiffres du handicap
5. Les chiffres du handicap • 80% des handicaps sont invisibles • Les personnes en fauteuil roulant représentent 2% des personnes en situation de handicap • 20% de la population Française est en situation de handicap • En France une personne sur sept de 15 ans ou plus est handicapée. • En France, près de 1,7 million de personnes sont atteintes d’un trouble de la vision.
6. 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)
7. Handicap temporaire et situationnel
8. Bénéfices induits L'accessibilité c'est indispensable pour certains, mais bénéfique pour tous ! W3C Web Accessibility Initiative
9. 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
10. 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
11. Disclaimer 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
12. 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 !
13. 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
14. 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
15. 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.
16. Test 1 : Titre de la page Exemples
17. Test 1 : Titre de la page Exemples • Forfait mobile 140Go 5G 20,99 €
18. Test 1 : Titre de la page Exemples • Forfait mobile 140Go 5G 20,99 € • Forfait Mobile 4G & 5G Sans Engagement – RED by SFR
19. Test 1 : Titre de la page Exemples • Recherche | MAXI ZOO
20. Test 1 : Titre de la page Exemples • Recherche | MAXI ZOO • Recherche | MAXI ZOO
21. Test 1 : Titre de la page Exemples • Recherche | MAXI ZOO • Recherche | MAXI ZOO • Votre recherche : Souris
22. Test 1 : Titre de la page Exemples • Recherche | MAXI ZOO • Recherche | MAXI ZOO • Votre recherche : Souris • Votre recherche sur Materiel.net : souris
23. Test 1 : Titre de la page Exemples • Recherche | MAXI ZOO • Recherche | MAXI ZOO • Votre recherche : Souris • Votre recherche sur Materiel.net : souris • Votre recherche sur Materiel.net : souris
24. Test 1 : Titre de la page Exemples • 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
25. Test 1 : Titre de la page Responsabilité • PO / Contributeurs • Développeur Conseils et astuces • Automatiser • Utiliser un outil permettant de dresser la liste complète des titres de toutes les pages ( , ) Xenu Screaming Frog
26. 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
27. 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 : Display alt attributes • Extension • Inspecter le HTML directement • Inspecteur d'accessibilité Firefox ou Chrome Web Developper aXe
28. 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 • SVG, Glyphs, émoticônes Exemples • • • https://www.fnac.com/ https://www.ag2rlamondiale.fr https://www.grandeecolenumerique.fr/
29. Test 2 : Alternative des images Responsabilité • Contributeur • Développeur • UX Conseils et astuces • • Tester, tester, tester Arbre de décision W3C
30. 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
31. 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 • Inspecter le HTML directement Web Developper
32. 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/
33. Test 3 : Structure des titres Responsabilité • UX / UI • PO • Contributeur • Développeur Conseils et astuces • Tester, tester, tester
34. Test 3 : Structure des titres Références • • • 9.1 TGPI : When do headings fail WCAG? Règle Opquast n°227 Critères RGAA
35. 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
36. 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
37. Test 4 : Contrastes Comment Tester • Inspecteur d'accessibilité Firefox ou Chrome • Exemples • • Colour Contrast Analyser (CCA) Volotéa Coder's Delight
38. Test 4 : Contrastes Responsabilité • UX Conseils et astuces • Stéphanie Walter, • 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
39. Test 4 : Contrastes Outils • • • Axe Outils figma, sketch... https://contrast-grid.eightshapes.com/
40. 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
41. 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
42. 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 retraites https://www.laposte.fr/professionnel
43. Test 5 : Redimensionnement et zoom Responsabilité • UX / UI • Développeur 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
44. Test 5 : Redimensionnement et zoom Références • • 10.4 et 10.11 Règle Opquast n°188 Critères RGAA
45. 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.
46. 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
47. 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éplacer dans un menu... ▪ Échap pour annuler ou fermer une modale, un menu, etc
48. Test 6 : Focus et navigation au clavier Comment Tester • Inspecteur d'accessibilité Firefox ou Chrome • Extension avec un style personnalisé stylish *:focus { outline: 3px dashed #00ff00 !important; outline-offset:3px !important; }
49. Test 6 : Focus et navigation au clavier Exemples • • • • Responsabilité • UX / UI • Développeurs https://www.recyclivre.com/ https://particulier.edf.fr/fr/accueil/economies-d-energie/ https://www.paysdelaloire.fr/ Drive Intermarché
50. 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
51. 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
52. Test 7 : Formulaires Pour qui, pour quoi ? • Utilisateurs de technologies d'assistances (aveugles, malvoyants) • Utilisateurs avec des problèmes cognitifs • Tous les utilisateurs
53. Test 7 : Formulaires Objectif • Chaque ou est accessible au clavier • 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 champs bouton 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
54. Test 7 : Formulaires Comment Tester • Navigation (clavier / souris) • Extension • Inspecter le HTML directement • Inspecteur d'accessibilité Firefox ou Chrome Exemples • • • aXe EDF Réclamation Groupama devis auto https://site.arkea-banque-ei.com/contact/
55. Test 7 : Formulaires Responsabilité • UX / UI • Développeur 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
56. Test 7 : Formulaires Références • 67 à 93 • 11.1 à 11.13 Règle Opquast Critères RGAA
57. 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.
58. Test 8 : Éléments en mouvements, clignotants ou flashant Exemples • • Responsabilité • Client • PO • UX • Intégrateur / Développeur www.jackjaeschke.com https://www.devoxx.fr/workflow-sponsor/devenir-exposant- formulaire/
59. Test 8 : Éléments en mouvements, clignotants ou flashant Conseils et astuces • Utiliser prefers-reduced-motion
60. Test 8 : Éléments en mouvements, clignotants ou flashant Références • • 11.1 et 11.13 Règle Opquast 121 Critères RGAA
61. 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
62. Test 9 : Multimédia (vidéo, audio) alternatives Exemples • • • Yomomi https://www.linxea.com/assurance-vie/ Crédit Mutuel, 50 ans
63. Test 9 : Multimédia (vidéo, audio) alternatives Responsabilité • Contributeurs • Développeurs Références • • • 4.1 à 4.6 Règle Opquast 116 Règle Opquast 117 Critères RGAA
64. Test 10 : Structure de l’information Pour qui, pour quoi ? • Non-voyants, mal-voyants • SEO Comment tester • Mode lecture du navigateur • Désactivation des styles avec , • Extension Web Developper A11y Outline
65. 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"
66. Test 10 : Structure de l’information Exemples • • • https://www.laposte.fr/ https://www.paysdelaloire.fr/ https://accessibilite.numerique.gouv.fr/
67. Test 10 : Structure de l’information Responsabilité • Développeur Références • • 9.2, 10.3, 12.6 Règle Opquast 178 Critères RGAA
68. 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
69. Bonus – Pertinence des liens Comment tester • Extension • Navigation • Inspecteur d'accessibilité Firefox ou Chrome • Lecteur d'écran Exemples • • A11y Outline https://particulier.edf.fr/fr/accueil.html https://www.paysdelaloire.fr/
70. Bonus – Pertinence des liens Responsabilité • Contributeurs • Développeurs Références • • 6.1 et 6.2 Règle Opquast 132 Critères RGAA
71. Bonus – Informations véhiculées uniquement par la couleur Pour qui, pour quoi ? • Aveugles, malvoyants, daltoniens Comment tester • Manuelle • Outils d'accessibilité de Firefox
72. Bonus – Informations véhiculées uniquement par la couleur Exemples • • • Express : Élections départementales Présidentielles 1965 https://espace-client.edf.fr/sso/XUI/#login
73. Bonus – Informations véhiculées uniquement par la couleur Responsabilité • UX/UI Références • • 3.1 Règle Opquast 176 Critères RGAA
74. 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
75. Bonus – Langue de la page Comment tester • Inspecter le HTML directement, • Extension a11y.css : « afficher les langues », Exemples • Responsabilité • Développeur https://www.audencia.com/
76. 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
77. Conclusion Tester, tester, tester !
78. Feedbacks : @lair_net mastodon.top/@lair_net François-Xavier Lair