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

François-Xavier Lair

Henri Gauffriau

Et si nous faisions plus ample connaissance ?

Et vous dans tout ça ?

L'accessibilité,
c'est un droit

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

Quelques chiffres

• 80% des handicaps sont invisibles
• Les personnes en fauteuil roulant représentent 2% des personnes en situation de 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)

Les easy checks ce n'est pas le RGAA

• Ça ne remplace pas un audit
• mais ça reste une méthode basée sur une checklist du W3C

Quand faire ces tests ?

Sur un nouveau projet

• Tout au long de la production d'un site/application
• À chaque fin de sprint

Cela permet d'éviter l'effet boule de neige

Quand faire ces tests ?

Sur un projet existant

• Il n'est jamais trop tard
• Commencer par tester les parcours clés
• Intégrer les ajustements au backlog du projet
• Et profiter des ajouts de fonctionnalités pour faire des correctifs

Il n'y a pas de secret....

"Ouais mais moi je fais pas de code..."

Qui fait quoi ?

• Tous les intervenants sont concernés
• Différents niveaux de tests en fonction de l'intervenant

Les easy checks, késako ?

Un petit tour sur la page dédiée du W3C

Le titre de la page

Objectifs

• 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.

Quelques exemples

• "" ou lapostemobile.fr/panier
• Forfait mobile 140Go 5G 20,99 €
• Forfait Mobile 4G & 5G Sans Engagement – RED by SFR

Comment tester

• Regarder l’onglet de votre navigateur
• Inspecter le HTML directement
• Bookmarklet W3C

Le 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

À vous de jouer

Recherche | Maxizoo

À vous de jouer

Recherche | Maxizoo

À vous de jouer

Recherche | Maxizoo

À vous de jouer

Votre recherche : Souris

À vous de jouer

Votre recherche sur Materiel.net : souris

À vous de jouer

Votre recherche sur Materiel.net : souris

À vous de jouer

Votre recherche sur Materiel.net : souris

À vous de jouer

Je recherche : services, Tous les types de contenu | 90 résultats | Page 6 | Région Pays de la Loire

Quelques outils...

Les extensions

• Extension Web Developer Web Developper Firefox - Web Developper Chrome
• Extension aXe
• Extension Heading Maps Heading Maps Firefox - Heading Maps Chrome
• Extension Stylish Extension stylish Firefox Extension stylish Chrome
• Axe DevTools Axe DevTools for Chrome - Axe DevTools extension for firefox
• Tanaguru webext Tanaguru webext for firefox - Tanaguru webext for Chrome
• Assistant RGAA Tanaguru webext for firefox - Tanaguru webext for Chrome
• et (accessoirement) Lighthouse Extension lighthouse pour firefox - Extension lighthouse pour Chrome

Les bookmarklets

Les bookmarklets, liens intégrant du javascript, s'installe dans la barre des favoris de votre navigateur.

Le W3C met à disposition une série de ces "favoris améliorés" sur la page suivante

Les bookmarklets orientés easy-check

Et pour aller plus loin...

Les bookmarklets accessibilité

Les alternatives d'image

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

Objectif

• Les images de décorations sont ignorées par les outils d'assistances
• Les images porteuses d'informations ont une alternative

Exemples

• https://www.fnac.com/

SVG, glyphes, émoticônes

• https://www.grandeecolenumerique.fr/

Activation de l'inspecteur d'accessibilité

Firefox

F12 pour ouvrir les DevTools

Activation de l'inspecteur d'accessibilité

Chrome

F12 pour ouvrir les DevTools

Conseils et astuces

• Arbre de décision W3C (Ressource FR)
• Tester, tester, tester

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

À vous de jouer

• Devoxx
• Free Pro
• 4 pieds

Structure des titres

Comment tester

• Extension Heading Maps
• Extension Web Developer Web Developper Firefox - Web Developper Chrome
• Bookmarklet W3C
• Inspecter le HTML directement

Objectifs

• 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

• https://www.laposte.fr/
• Cdiscount

À vous de jouer

• RGAA
• https://www.volotea.com/fr/
• https://www.darty.com

Conseils et astuces

• Tester, tester, tester

Références

• En-têtes et non-conformité aux WCAG : une clarification à juste titre
• Règle Opquast n°227
• Critères RGAA 9.1

Contraste

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

Comment Tester

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

Exemples

• Volotéa

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é,
• Utiliser un nouvel espace colorimétrique, tel que OKLCH, un excellent article sur La cascade
• et un autre tout aussi génial article sur le site Evil Martians
• Décaler la teinte,
• Ajouter un arrière-plan, un contour...

Outils

• Axe
• Outils figma, sketch...
• https://contrast-grid.eightshapes.com/
• Tanaguru Contrast finder
• OKLCH Color Picker & Converter

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

À vous de jouer

• Devoxx
• Nantes Métropole

Test 5 : Redimensionnement et zoom

Comment Tester

• Zoom texte seulement dans Firefox
• Zoom graphique dans Chrome

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
• Realme GT 6T

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

Références

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

À vous

• 4-pieds
• https://www.matrix.com/

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

Comment Tester

• Inspecteur d'accessibilité Firefox ou Chrome
• Extension Stylish Extension stylish Firefox Extension stylish Chrome avec un style personnalisé

  
            *:focus {
              outline: 3px dashed #00ff00 !important;
              outline-offset:3px !important;
            }
            

Exemples

• https://www.recyclivre.com/
• Course U
• Toulouse mairie métropole

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

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

À vous

• https://www.efrei.fr
• Jules

Formulaires

Comment tester

• Naviguer
• Inspecter le HTML directement
• Bookmarklet W3C : Label des champs
• Bookmarklet W3C : Champs requis

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

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

À vous

• Apec création de compte

Références

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

Éléments en mouvements, clignotants ou flashant

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.
• 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

Exemples

• www.jackjaeschke.com
• Fusalp
• Walker WordPress Ranger

Conseils et astuces

• Utiliser prefers-reduced-motion (Sur la doc Mozilla)

Références

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

À vous

• Carmila
• Audiens

Multimédia (vidéo, audio) alternatives

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

Exemples

• Vidéo présentation produit Amazon

Références

• Règle Opquast 116
• Règle Opquast 117
• Critères RGAA 4.1 à 4.6

Structure de l’information

Objectif

• 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>

Comment tester

• Via l'inspecteur de code
• Extension Web Developper : Informations - display ARIA role
• Bookmarklet de Paul Jadam : Landmarks Bookmarklet

Exemples

• https://accessibilite.numerique.gouv.fr/

Références

• Règle Opquast 178
• Critères RGAA 9.2, 10.3, 12.6

À vous

• Devoxx

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

Bonus – Langue de la page

Comment tester

• Inspecter le HTML directement,
• Extension a11y.css : « afficher les langues », a11y.css Firefox - a11y.css Chrome

Exemples

• Volotea

Responsabilité

• Développeur

Bonus – Langue de la page

Références

• Règle Opquast 125
• Règle Opquast 125
• Règle Opquast 127
• Critères RGAA 8.3 et 8.4

Conclusion

Merci de votre attention !

Feedbacks :