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

by lair_net

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

@lair_net mastodon.top/@lair_net François-Xavier Lair

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Les : quand faire ces tests ? Easy Checks

Slide 6

Slide 6 text

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 !

Slide 7

Slide 7 text

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

Slide 8

Slide 8 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 9

Slide 9 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 10

Slide 10 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

Slide 11

Slide 11 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 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 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 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

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

Slide 21

Slide 21 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 22

Slide 22 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 23

Slide 23 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 : Display alt attributes • Extension • Inspecter le HTML directement • Inspecteur d'accessibilité Firefox ou Chrome Web Developper aXe

Slide 24

Slide 24 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 • SVG, Glyphs, émoticônes Exemples • • https:/ /www.fnac.com/ https:/ /www.ag2rlamondiale.fr

Slide 25

Slide 25 text

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

Slide 26

Slide 26 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 27

Slide 27 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 • Inspecter le HTML directement Web Developper

Slide 28

Slide 28 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/

Slide 29

Slide 29 text

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

Slide 30

Slide 30 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 31

Slide 31 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 32

Slide 32 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 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 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 37

Slide 37 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 38

Slide 38 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 retraites https:/ /www.laposte.fr/professionnel

Slide 39

Slide 39 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 40

Slide 40 text

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

Slide 41

Slide 41 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 42

Slide 42 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 43

Slide 43 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 44

Slide 44 text

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

Slide 45

Slide 45 text

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é

Slide 46

Slide 46 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 47

Slide 47 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 48

Slide 48 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 49

Slide 49 text

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

Slide 50

Slide 50 text

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/

Slide 51

Slide 51 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 52

Slide 52 text

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

Slide 53

Slide 53 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 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 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 57

Slide 57 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 58

Slide 58 text

Test 9 : Multimédia (vidéo, audio) alternatives Exemples • • • Yomomi https:/ /www.linxea.com/assurance-vie/ Crédit Mutuel, 50 ans

Slide 59

Slide 59 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 60

Slide 60 text

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

Slide 61

Slide 61 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 62

Slide 62 text

Test 10 : Structure de l’information Comment tester • Via l'inspecteur de code • Extension Web Developper : Informations - display ARIA role

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 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 66

Slide 66 text

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/

Slide 67

Slide 67 text

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