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

François-Xavier Lair

Henri Gauffriau

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

Présentation

Et vous ?

Un droit : l’accessibilité

Mettre le Web et ses services à 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

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

Les chiffres du handicap

Nous sommes valides de façon temporaire

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 : INSEE, Direction de la recherche des études de l’évaluation et des statistiques (DREES)

Bénéfices induits

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

Les Easy Checks

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

Les Easy Checks : 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 !

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

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 !

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

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

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.

Test 1 : Titre de la page

Exemples

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)

Test 1 : Titre de la page

Références

Règle Opquast n°98, Règle Opquast n°97
Critères RGAA 8.5 et 8.6

Test 1 : Titre de la page

À vous

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

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/

Test 2 : Alternative des images

SVG, glyphes, émoticônes

https://www.grandeecolenumerique.fr/

Test 2 : Alternative des images

Conseils et astuces

Arbre de décision W3C
Tester, tester, tester

Test 2 : Alternative des images

Références

Règle Opquast n°111, Règle Opquast n°112, Règle Opquast n°113
Critères RGAA 1.1 à 1.9

Test 2 : Alternative des images

À vous

https://easychecks.netlify.app

EDF télésurveillance

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 Web Developper Firefox - Web Developper Chrome
Bookmarklet W3C
Inspecter le HTML directement

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

Test 3 : Structure des titres

À vous

Test 3 : Structure des titres

Conseils et astuces

Tester, tester, tester

Test 3 : Structure des titres

Références

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

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

Test 4 : Contrastes

Comment Tester

Inspecteur d'accessibilité Firefox ou Chrome
Colour Contrast Analyser (CCA)

Exemples

Volotéa

Test 4 : Contrastes

Conseils et astuces

Stéphanie Walter, Documenter l’accessibilité en phase de design
À 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...

Test 4 : Contrastes

Outils

Test 4 : Contrastes

Références

Ben Myers "How to Fix Your Low-Contrast Text"
Règle Opquast n°177
Critères RGAA 3.2 et 3.3

Test 4 : Contrastes

À vous

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

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

Test 5 : Redimensionnement et zoom

À vous

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

Test 5 : Redimensionnement et zoom

Références

Règle Opquast n°188
Critères RGAA 10.4 et 10.11

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.

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

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

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

Test 6 : Focus et navigation au clavier

Exemples

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, Documenter l’accessibilité en phase de design
Utiliser la pseudo class css focus-visible
Tester, tester, tester

Test 6 : Focus et navigation au clavier

Références

Motif de conception ARIA
Règle Opquast n°160, Règle Opquast n°161, Règle Opquast n°162
Critères RGAA 4.11, 4.12, 7.1, 7.3, 10.14, 12.9

Test 6 : Focus et navigation au clavier

À vous

Test 7 : Formulaires

Pour qui, pour quoi ?

Utilisateurs de technologies d'assistances (aveugles, malvoyants)
Utilisateurs avec des problèmes cognitifs
Tous les utilisateurs

Test 7 : Formulaires

Comment tester

Regarder l’onglet de votre navigateur
Inspecter le HTML directement
Bookmarklet W3C : Label des champs
Bookmarklet W3C : Champs requis

Test 7 : Formulaires

Objectif

Chaque champ est associé à son label
Les labels sont visuellement accolés à leurs champs
Les champs obligatoires sont indiqués et associés aux champs
Les champs de même nature sont regroupés
Le format attendu pour les champs est indiqués (avant validation)
Un exemple de saisie valide est proposé
Les champs correctement renseignés ne doivent pas être réinitialisés
Les erreurs sont clairement indiquées et reliées aux champs

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

Test 7 : Formulaires

Références

Règle Opquast 67 à 93
Critères RGAA 11.1 à 11.13

Test 7 : Formulaires

À vous

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.

Test 8 : Éléments en mouvements, clignotants ou flashant

Exemples

Test 8 : Éléments en mouvements, clignotants ou flashant

Conseils et astuces

Utiliser prefers-reduced-motion (< href="https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-reduced-motion">Sur la doc Mozilla)

Test 8 : Éléments en mouvements, clignotants ou flashant

Références

Règle Opquast 121
Critères RGAA 11.1 et 11.13

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

Test 9 : Multimédia (vidéo, audio) alternatives

Exemples

Vidéo présentation produit Amazon

Test 9 : Multimédia (vidéo, audio) alternatives

Références

Test 10 : Structure de l’information

Pour qui, pour quoi ?

Non-voyants, mal-voyants
SEO

Comment tester

Mode lecture du navigateur
Extension Web Developer Web Developper Firefox - Web Developper Chrome,

Test 10 : Structure de l’information

Objectif

Les contenus doivent rester lisibles et compréhensibles lorsque les feuilles de styles sont désactivées
Les zones de regroupement de contenus peuvent être atteintes ou évitées


<header role="banner">
	(...)
	<nav role="navigation" aria-label="Menu principal">(...)</nav>
	(...)
	<search role="search" >(...)</search>
</header>

<main role="main">
	(...)
</main>

<footer role="contentinfo">
	(...)
</footer>