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

Slide 1

Slide 1 text

10 tests simples pour améliorer l'accessibilité de votre site François-Xavier Lair Henri Gauffriau

Slide 2

Slide 2 text

@lair_net mastodon.top/@lair_net François-Xavier Lair mastodon.xyz/@becaye Henri Gauffriau

Slide 3

Slide 3 text

Présentations Et vous ?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Les chiffres du handicap

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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)

Slide 8

Slide 8 text

Handicap temporaire et situationnel

Slide 9

Slide 9 text

Bénéfices induits L'accessibilité c'est indispensable pour certains, mais bénéfique pour tous ! W3C Web Accessibility Initiative

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Bénéfices induits L'accessibilité ce n'est pas une contrainte, c'est une opportunité. @lair_net, 2024

Slide 12

Slide 12 text

Les ≠ Easy Checks RGAA : Référentiel général d'amélioration de l'accessibilité

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Disclaimer

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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 !

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Test 1 : Titre de la page Exemples • "" ou lapostemobile.fr/panier • Forfait mobile 140Go 5G 20,99 €

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Test 1 : Titre de la page À vous • Recherche | MAXI ZOO

Slide 26

Slide 26 text

Test 1 : Titre de la page À vous • Recherche | MAXI ZOO • Recherche | MAXI ZOO

Slide 27

Slide 27 text

Test 1 : Titre de la page À vous • Recherche | MAXI ZOO • Recherche | MAXI ZOO • Votre recherche : Souris

Slide 28

Slide 28 text

Test 1 : Titre de la page À vous • Recherche | MAXI ZOO • Recherche | MAXI ZOO • Votre recherche : Souris • Votre recherche sur Materiel.net : souris

Slide 29

Slide 29 text

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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/

Slide 33

Slide 33 text

Test 2 : Alternative des images SVG, glyphes, émoticônes • https:/ /www.grandeecolenumerique.fr/

Slide 34

Slide 34 text

Test 2 : Alternative des images Conseils et astuces • • Tester, tester, tester Arbre de décision W3C

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Test 2 : Alternative des images À vous • EDF télésurveillance

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Test 3 : Structure des titres À vous • • • RGAA https:/ /www.volotea.com/fr/ https:/ /www.darty.com

Slide 40

Slide 40 text

Test 3 : Structure des titres Conseils et astuces • Tester, tester, tester

Slide 41

Slide 41 text

Test 3 : Structure des titres Références • • • 9.1 TGPI : When do headings fail WCAG? Règle Opquast n°227 Critères RGAA

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Test 4 : Contrastes Comment Tester • Inspecteur d'accessibilité Firefox ou Chrome • Exemples • • Colour Contrast Analyser (CCA) Volotéa Breizhcamp

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Test 4 : Contrastes Outils • • • Axe Outils figma, sketch... https:/ /contrast-grid.eightshapes.com/

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Test 4 : Contrastes À vous • • Corum Easyvols

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Test 5 : Redimensionnement et zoom À vous • • https:/ /www.bing.com/?cc=fr https:/ /www.laposte.fr/professionnel

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Test 5 : Redimensionnement et zoom Références • • 10.4 et 10.11 Règle Opquast n°188 Critères RGAA

Slide 54

Slide 54 text

Test 5 : Redimensionnement et zoom À vous • • Corum Easyvols

Slide 55

Slide 55 text

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.

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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; }

Slide 59

Slide 59 text

Test 6 : Focus et navigation au clavier Exemples • • • https:/ /www.recyclivre.com/ https:/ /particulier.edf.fr/fr/accueil/economies-d-energie/ Drive Intermarché

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Test 6 : Focus et navigation au clavier À vous • • https:/ /www.red-by-sfr.fr/forfaits-mobiles/ https:/ /www.paysdelaloire.fr/

Slide 63

Slide 63 text

Test 7 : Formulaires Pour qui, pour quoi ? • Utilisateurs de technologies d'assistances (aveugles, malvoyants) • Utilisateurs avec des problèmes cognitifs • Tous les utilisateurs

Slide 64

Slide 64 text

Test 7 : Formulaires Comment tester • Regarder l’onglet de votre navigateur • Inspecter le HTML directement • • Bookmarklet W3C : Label des champs Bookmarklet W3C : Champs requis

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Test 7 : Formulaires Références • 67 à 93 • 11.1 à 11.13 Règle Opquast Critères RGAA

Slide 68

Slide 68 text

Test 7 : Formulaires À vous • • • Allianz assurance auto EDF Réclamation https:/ /site.arkea-banque-ei.com/contact/

Slide 69

Slide 69 text

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.

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Test 8 : Éléments en mouvements, clignotants ou flashant Conseils et astuces • Utiliser prefers-reduced-motion

Slide 72

Slide 72 text

Test 8 : Éléments en mouvements, clignotants ou flashant Références • • 11.1 et 11.13 Règle Opquast 121 Critères RGAA

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Test 9 : Multimédia (vidéo, audio) alternatives Exemples • Vidéo présentation produit Amazon

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Test 10 : Structure de l’information Pour qui, pour quoi ? • Non-voyants, mal-voyants • SEO Comment tester • Mode lecture du navigateur • Extension Web Developer - ,

Slide 77

Slide 77 text

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"

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

Test 10 : Structure de l’information Exemples • https:/ /accessibilite.numerique.gouv.fr/

Slide 80

Slide 80 text

Test 10 : Structure de l’information Références • • 9.2, 10.3, 12.6 Règle Opquast 178 Critères RGAA

Slide 81

Slide 81 text

Test 10 : Structure de l’information À vous • Breizhcamp

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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/

Slide 84

Slide 84 text

Bonus – Pertinence des liens Références • • 6.1 et 6.2 Règle Opquast 132 Critères RGAA

Slide 85

Slide 85 text

Bonus – Informations véhiculées uniquement par la couleur Pour qui, pour quoi ? • Aveugles, malvoyants, daltoniens Comment tester • Manuelle • Outils d'accessibilité de Firefox

Slide 86

Slide 86 text

Bonus – Informations véhiculées uniquement par la couleur Exemples • • • Express : Élections départementales Présidentielles 1965 Réservation gîte

Slide 87

Slide 87 text

Bonus – Informations véhiculées uniquement par la couleur Références • • 3.1 Règle Opquast 176 Critères RGAA

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Bonus – Langue de la page Comment tester • Inspecter le HTML directement, • Extension a11y.css : « afficher les langues », Exemples • Devoxx 2024

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

Les outils • - • Tanaguru webext - • • et (accessoirement) Lighthouse - Axe DevTools Tanaguru Contrast finder Grille d'audit easy-checks

Slide 92

Slide 92 text

Cas pratique • • Boulanger Breizh C@mp

Slide 93

Slide 93 text

Conclusion Tester, tester, tester !

Slide 94

Slide 94 text

Feedbacks : @lair_net mastodon.top/@lair_net François-Xavier Lair mastodon.xyz/@becaye Henri Gauffriau