QR code accessible : taille, hauteur, alternatives et tests

Pourquoi l'accessibilité compte

Plus d'un milliard de personnes vivent avec un handicap. Un QR code fixé à hauteur d'yeux d'une personne debout exclut un utilisateur en fauteuil ; une page sans texte alternatif exclut un lecteur d'écran ; un code « design » peu contrasté exclut toute personne malvoyante. Corriger ces points coûte rarement cher, et c'est souvent une obligation légale.

Comprendre les obstacles

Les déficiences visuelles

La cécité
La malvoyance
Le daltonisme
La photosensibilité

Les déficiences motrices

Une mobilité réduite
Les tremblements
La paralysie
Les troubles de la coordination

Les troubles cognitifs

Les troubles de l'apprentissage
Les troubles de la mémoire
Les troubles de l'attention
Les difficultés de traitement de l'information

Les déficiences auditives

La surdité
La malentendance
Les troubles du traitement auditif

L'accessibilité du QR code lui-même

Le design physique du code

Taille et contraste

2 cm x 2 cm minimum pour un scan de près
Un contraste élevé (sombre sur clair)
Évitez les associations de couleurs peu contrastées
Testez avec un vérificateur de contraste

L'emplacement

Une hauteur accessible en fauteuil (90 à 120 cm)
Évitez les surfaces réfléchissantes
Un bon éclairage
Des surfaces planes et stables

Les repères tactiles

Des bordures en relief pour les personnes aveugles
Une étiquette en braille à proximité
Des indications tactiles
Des guides physiques

Les autres moyens d'accès

Prévoyez toujours une alternative

L'URL en toutes lettres sous le QR code
Une étiquette NFC en complément
Une URL courte à saisir
Un numéro de téléphone

Exemple : « Scannez le QR code ou rendez-vous sur : bit.ly/abc123 Ou appelez le : 1-800-XXX-XXXX »

L'accessibilité de la page d'atterrissage

La conformité WCAG

Perceptible

Un texte alternatif pour les images
Des sous-titres pour les vidéos
Un contraste suffisant
Un texte redimensionnable

Utilisable

La navigation au clavier
Des liens d'évitement
Des indicateurs de focus
Aucune limite de temps

Compréhensible

Un langage clair
Une navigation cohérente
L'identification des erreurs
De l'aide disponible

Robuste

Un HTML valide
Des attributs ARIA
Une compatibilité avec les lecteurs d'écran
Un code qui vieillira bien

L'optimisation pour les lecteurs d'écran

Un HTML sémantique

Une hiérarchie de titres correcte
Des intitulés de liens explicites
Des libellés de formulaire
De vraies structures de liste

Les attributs ARIA

Des libellés descriptifs
Des indicateurs d'état
Des régions live
Des définitions de rôle

La navigation au clavier

Les éléments indispensables

Un ordre de tabulation logique
Un focus visible
L'évitement de la navigation
Des raccourcis clavier

Les éléments interactifs

L'accessibilité des boutons
Le parcours des champs de formulaire
La gestion des fenêtres modales
Les menus déroulants

Les aménagements pour les déficiences visuelles

Pour les personnes aveugles

Des pages d'atterrissage compatibles avec les lecteurs d'écran
Des audiodescriptions pour les contenus visuels
Des repères tactiles autour du QR code
Une alternative téléphonique

Pour les personnes malvoyantes

Un mode contraste élevé
Le redimensionnement du texte
La compatibilité avec le zoom
De grandes zones tactiles

Pour les personnes daltoniennes

Ne reposez jamais sur la seule couleur
Ajoutez motifs et libellés
Testez avec des simulateurs
Proposez des alternatives

Les aménagements pour les déficiences motrices

Faciliter le scan

Des QR codes plus grands
Une pose stable
Des délais rallongés
Un usage à une seule main

Le design de la page d'atterrissage

De grandes zones tactiles (44 px minimum)
Des espacements généreux
Des interactions simples
Une tolérance à l'erreur

L'accessibilité cognitive

Une communication claire

Un langage simple
Des phrases courtes
Des consignes explicites
Des repères visuels

La navigation

Une mise en page constante
Un retour d'information net
Des indicateurs de progression
Un retour en arrière facile

Alléger la charge cognitive

Un minimum de distractions
Un contenu resserré
Une information découpée
Des aides à la mémoire

Tester l'accessibilité

Les tests automatisés

L'outil WAVE
Axe DevTools
L'audit d'accessibilité Lighthouse
Les vérificateurs de contraste

Les tests manuels

La navigation au clavier seul
Les tests au lecteur d'écran
Les tests de zoom
La simulation du daltonisme

Les tests utilisateurs

Incluez des personnes en situation de handicap
Différentes technologies d'assistance
Des scénarios réels
L'intégration des retours

La conformité réglementaire

L'ADA (États-Unis)

Des sites web assimilés à des lieux ouverts au public
Une communication effective exigée
Des aménagements raisonnables
Un risque contentieux

Les niveaux WCAG

Niveau A : le minimum
Niveau AA : le recommandé
Niveau AAA : l'idéal
Une référence juridique

Les autres réglementations

La Section 508 (États-Unis)
La norme EN 301 549 (Europe)
L'AODA (Ontario, Canada)
Les lois propres à chaque pays

La check-list de mise en œuvre

Le design physique du QR code

[ ] Une taille suffisante pour le scan
[ ] Des couleurs très contrastées
[ ] Une hauteur de pose accessible
[ ] Un bon éclairage
[ ] Une URL alternative affichée
[ ] Des repères tactiles si pertinent

La page d'atterrissage

[ ] Conforme WCAG AA
[ ] Testée au lecteur d'écran
[ ] Navigable au clavier
[ ] Dotée d'un mode contraste élevé
[ ] Texte redimensionnable
[ ] Texte alternatif sur les images
[ ] Sous-titres sur les vidéos
[ ] Un langage clair et simple

Les tests

[ ] Un scan d'accessibilité automatisé
[ ] Un test clavier manuel
[ ] Un test au lecteur d'écran
[ ] Une simulation du daltonisme
[ ] Des tests avec des personnes en situation de handicap

Les ressources

Les outils de test

WAVE Web Accessibility Tool
Axe DevTools
Le lecteur d'écran NVDA
VoiceOver (iOS/Mac)
Color Oracle

Les référentiels

Les règles WCAG 2.1
Les ressources WebAIM
Le A11Y Project
Deque University

Et en France ?

Deux ressources françaises complètent les recommandations WCAG.

Le FALC. La méthode « Facile à lire et à comprendre » donne des règles d'écriture simples pour les personnes ayant une déficience intellectuelle : phrases courtes, un message par phrase, pictogrammes. Une page ouverte par QR code dans un lieu public gagne à proposer une version FALC de son information essentielle, signalée par le logo européen dédié.

La déclaration d'accessibilité. Les sites publics français doivent afficher leur niveau de conformité au RGAA (non conforme, partiellement ou totalement conforme). Si votre QR code renvoie vers un site d'une collectivité ou d'un établissement public, vérifiez que cette mention figure bien en pied de page.

Trois corrections livrables aujourd'hui

Trois gestes suffisent pour commencer : imprimer l'adresse de destination sous chaque code affiché en public, vérifier que vos codes sont posés entre 90 et 120 cm du sol, et faire passer une fois la page d'atterrissage dans un outil comme WAVE. Ils ne coûtent presque rien, règlent les obstacles les plus courants et vous laissent le temps de préparer un audit WCAG complet.