Upgrade to Pro — share decks privately, control downloads, hide ads and more …

10 tests simples pour améliorer l'accessibilité...

lair_net
February 01, 2024

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.

lair_net

February 01, 2024
Tweet

More Decks by lair_net

Other Decks in Programming

Transcript

  1. 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 !
  2. 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
  3. 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 !
  4. 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
  5. 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
  6. 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.
  7. Test 1 : Titre de la page Exemples • ""

    ou lapostemobile.fr/panier
  8. Test 1 : Titre de la page Exemples • ""

    ou lapostemobile.fr/panier • Forfait mobile 140Go 5G 20,99 €
  9. 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
  10. Test 1 : Titre de la page Exemples • Recherche

    | MAXI ZOO • Recherche | MAXI ZOO
  11. Test 1 : Titre de la page Exemples • Recherche

    | MAXI ZOO • Recherche | MAXI ZOO • Votre recherche : Souris
  12. Test 1 : Titre de la page Exemples • Recherche

    | MAXI ZOO • Recherche | MAXI ZOO • Votre recherche : Souris • Votre recherche sur Materiel.net : souris
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. Test 2 : Alternative des images Conseils et astuces •

    • Tester, tester, tester Arbre de décision W3C
  20. 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
  21. 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
  22. 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/
  23. Test 3 : Structure des titres Références • • •

    9.1 TGPI : When do headings fail WCAG? Règle Opquast n°227 Critères RGAA
  24. 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
  25. 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
  26. Test 4 : Contrastes Comment Tester • Inspecteur d'accessibilité Firefox

    ou Chrome • Exemples • • Colour Contrast Analyser (CCA) Volotéa Snowcamp.io
  27. 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
  28. Test 4 : Contrastes Outils • • • Axe Outils

    figma, sketch... https:/ /contrast-grid.eightshapes.com/
  29. 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
  30. 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
  31. 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
  32. 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
  33. Test 5 : Redimensionnement et zoom Références • • 10.4

    et 10.11 Règle Opquast n°188 Critères RGAA
  34. 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.
  35. 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
  36. 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
  37. 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; }
  38. 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é
  39. 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
  40. 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
  41. Test 7 : Formulaires Pour qui, pour quoi ? •

    Utilisateurs de technologies d'assistances (aveugles, malvoyants) • Utilisateurs avec des problèmes cognitifs • Tous les utilisateurs
  42. 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
  43. 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/
  44. 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
  45. Test 7 : Formulaires Références • 67 à 93 •

    11.1 à 11.13 Règle Opquast Critères RGAA
  46. 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.
  47. Test 8 : Éléments en mouvements, clignotants ou flashant Exemples

    • • www.jackjaeschke.com Walker WordPress Ranger
  48. Test 8 : Éléments en mouvements, clignotants ou flashant Conseils

    et astuces • Utiliser prefers-reduced-motion
  49. Test 8 : Éléments en mouvements, clignotants ou flashant Références

    • • 11.1 et 11.13 Règle Opquast 121 Critères RGAA
  50. 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
  51. Test 9 : Multimédia (vidéo, audio) alternatives Exemples • •

    • Yomomi https:/ /www.linxea.com/assurance-vie/ Crédit Mutuel, 50 ans
  52. 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
  53. Test 10 : Structure de l’information Pour qui, pour quoi

    ? • Non-voyants, mal-voyants • SEO Comment tester • Mode lecture du navigateur • , Web Developper
  54. 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"
  55. Test 10 : Structure de l’information Comment tester • Via

    l'inspecteur de code • Extension Web Developper : Informations - display ARIA role
  56. Test 10 : Structure de l’information Exemples • • Snowcamp

    https:/ /accessibilite.numerique.gouv.fr/
  57. Test 10 : Structure de l’information Références • • 9.2,

    10.3, 12.6 Règle Opquast 178 Critères RGAA
  58. 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
  59. 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/
  60. Bonus – Pertinence des liens Références • • 6.1 et

    6.2 Règle Opquast 132 Critères RGAA