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

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. n 10 tests simples pour améliorer l'accessibilité de votre site François-Xavier Lair
3. @lair_net mastodon.top/@lair_net François-Xavier Lair
4. Les ≠ Easy Checks RGAA : Référentiel général d'amélioration de l'accessibilité
5. Les : quand faire ces tests ? Easy Checks
6. Les : quand faire ces tests ? Easy Checks 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 !
7. 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
8. 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 !
9. 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
10. 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
11. 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.
12. Test 1 : Titre de la page Exemples • "" ou lapostemobile.fr/panier
13. Test 1 : Titre de la page Exemples • "" ou lapostemobile.fr/panier • Forfait mobile 140Go 5G 20,99 €
14. 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
15. Test 1 : Titre de la page Exemples • Recherche | MAXI ZOO
16. Test 1 : Titre de la page Exemples • Recherche | MAXI ZOO • Recherche | MAXI ZOO
17. Test 1 : Titre de la page Exemples • Recherche | MAXI ZOO • Recherche | MAXI ZOO • Votre recherche : Souris
18. Test 1 : Titre de la page Exemples • Recherche | MAXI ZOO • Recherche | MAXI ZOO • Votre recherche : Souris • Votre recherche sur Materiel.net : souris
19. 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
20. 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
21. 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
22. 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
23. 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
24. 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
25. Test 2 : Alternative des images Conseils et astuces • • Tester, tester, tester Arbre de décision W3C
26. 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
27. 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
28. 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/
29. Test 3 : Structure des titres Conseils et astuces • Tester, tester, tester
30. Test 3 : Structure des titres Références • • • 9.1 TGPI : When do headings fail WCAG? Règle Opquast n°227 Critères RGAA
31. 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
32. 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
33. Test 4 : Contrastes Comment Tester • Inspecteur d'accessibilité Firefox ou Chrome • Exemples • • Colour Contrast Analyser (CCA) Volotéa Snowcamp.io
34. Test 4 : Contrastes 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
35. Test 4 : Contrastes Outils • • • Axe Outils figma, sketch... https:/ /contrast-grid.eightshapes.com/
36. 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
37. 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
38. 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
39. 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
40. Test 5 : Redimensionnement et zoom Références • • 10.4 et 10.11 Règle Opquast n°188 Critères RGAA
41. 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.
42. 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
43. 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
44. 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; }
45. Test 6 : Focus et navigation au clavier Exemples • • • • https:/ /www.recyclivre.com/ https:/ /particulier.edf.fr/fr/accueil/economies-d-energie/ https:/ /www.paysdelaloire.fr/ Drive Intermarché
46. 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
47. 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
48. Test 7 : Formulaires Pour qui, pour quoi ? • Utilisateurs de technologies d'assistances (aveugles, malvoyants) • Utilisateurs avec des problèmes cognitifs • Tous les utilisateurs
49. 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
50. 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/
51. 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
52. Test 7 : Formulaires Références • 67 à 93 • 11.1 à 11.13 Règle Opquast Critères RGAA
53. 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.
54. Test 8 : Éléments en mouvements, clignotants ou flashant Exemples • • www.jackjaeschke.com Walker WordPress Ranger
55. Test 8 : Éléments en mouvements, clignotants ou flashant Conseils et astuces • Utiliser prefers-reduced-motion
56. Test 8 : Éléments en mouvements, clignotants ou flashant Références • • 11.1 et 11.13 Règle Opquast 121 Critères RGAA
57. 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
58. Test 9 : Multimédia (vidéo, audio) alternatives Exemples • • • Yomomi https:/ /www.linxea.com/assurance-vie/ Crédit Mutuel, 50 ans
59. 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
60. Test 10 : Structure de l’information Pour qui, pour quoi ? • Non-voyants, mal-voyants • SEO Comment tester • Mode lecture du navigateur • , Web Developper
61. 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"
62. Test 10 : Structure de l’information Comment tester • Via l'inspecteur de code • Extension Web Developper : Informations - display ARIA role
63. Test 10 : Structure de l’information Exemples • • Snowcamp https:/ /accessibilite.numerique.gouv.fr/
64. Test 10 : Structure de l’information Références • • 9.2, 10.3, 12.6 Règle Opquast 178 Critères RGAA
65. 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
66. 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.prixtel.com/ https:/ /www.paysdelaloire.fr/
67. Bonus – Pertinence des liens Références • • 6.1 et 6.2 Règle Opquast 132 Critères RGAA
68. Conclusion Tester, tester, tester !
69. Feedbacks : @lair_net mastodon.top/@lair_net François-Xavier Lair