Comprendre les handicaps : vivez le web autrement
Derrière chaque critère du RGAA, il y a une personne bloquée. Cette page vous met à sa place à travers des situations réelles et des démonstrations interactives. Chaque démonstration se déclenche à votre demande : rien ne bouge ni ne clignote sans votre accord.
Le handicap, c’est une question d’environnement
Une personne aveugle n’est pas « handicapée » face à un site bien construit : son lecteur d’écran lui lit les titres, les liens et les formulaires. Elle le devient face à une image sans description ou à un bouton qui n’est qu’une couleur. Le handicap naît de la rencontre entre une déficience et un environnement inadapté. Le RGAA sert précisément à adapter l’environnement numérique.
Les chiffres qui suivent sont des ordres de grandeur issus de sources publiques françaises (INSEE, DREES, ministère de la Santé, associations). Ils varient selon les définitions retenues mais racontent une même histoire : vos utilisateurs concernés sont nombreux, et le plus souvent invisibles.
- 1,7 millionde personnes déficientes visuelles en France, dont environ 207 000 aveugles ou malvoyantes profondes
- 7 millionsde personnes sourdes ou malentendantes, un chiffre qui augmente avec l’âge de la population
- 8 %des hommes sont daltoniens : c’est au moins un visiteur sur vingt de votre site
- 6 à 8 %de la population présente une dyslexie ; les troubles « dys » touchent 4 à 5 millions de Français
Handicap visuel
Cécité : le web se lit à l’oreille
Nadia, 34 ans, développeuse, aveugle de naissance
Nadia navigue avec le lecteur d’écran NVDA et un clavier. Elle n’utilise jamais la souris. Elle parcourt les pages en sautant de titre en titre, de lien en lien, de champ en champ, à une vitesse de lecture vocale deux fois supérieure à la vôtre.
Sa mise en situation : réserver un billet de train pour un déplacement professionnel, mardi soir, en dix minutes avant une réunion.
Site non conforme Ce qui se passe
- Le logo et les visuels sont lus « image, image, IMG_2048.jpg ». Aucune information.
- Les liens s’appellent tous « Cliquez ici » ou « En savoir plus ». Impossible de savoir où ils mènent.
- Les champs du formulaire n’ont pas d’étiquette : « zone de texte, zone de texte ». Lequel est la gare de départ ?
- Le bouton « Rechercher » est une div cliquable : le lecteur d’écran ne le voit même pas.
Résultat : Nadia abandonne au bout de quatre minutes et appelle un collègue. Le site a perdu une cliente et Nadia a perdu son autonomie.
Site conforme Ce qui change
- Chaque image porteuse d’information a une alternative ; les images décoratives sont ignorées.
- Chaque lien dit où il mène : « Réserver un aller simple Paris – Lyon ».
- Chaque champ est étiqueté : « Gare de départ, obligatoire ».
- Les boutons sont de vrais boutons : annoncés, activables au clavier.
Résultat : billet réservé en trois minutes, sans aide.
Démonstration : ce que « voit » un lecteur d’écran
Voici la même page d’offres, telle qu’un lecteur d’écran l’annonce quand on la parcourt élément par élément. Choisissez la version puis lisez, ou écoutez avec la synthèse vocale de votre navigateur.
La synthèse vocale utilise la voix de votre système ; les utilisateurs expérimentés écoutent à une vitesse bien plus élevée que celle proposée ici.
Critères RGAA concernés
- 1.1 Chaque image porteuse d’information a-t-elle une alternative textuelle ?
- 6.1 Chaque lien est-il explicite ?
- 7.1 Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
- 9.1 L’information est-elle structurée par l’utilisation appropriée de titres ?
- 11.1 Chaque champ de formulaire a-t-il une étiquette ?
Handicap visuel
Basse vision : quand le contraste et le zoom décident de tout
Jean-Marc, 67 ans, retraité, atteint de DMLA
La dégénérescence maculaire liée à l’âge brouille le centre de son champ visuel. Il lit encore, mais avec un zoom à 200 % et des contrastes forts. Les textes gris clair « élégants » disparaissent pour lui.
Sa mise en situation : consulter le montant et la date de prélèvement de sa facture d’électricité sur l’espace client.
Site non conforme Ce qui se passe
- Le montant est affiché en gris clair, taille 12 pixels, sur fond blanc : contraste 2,4 : 1.
- À 200 % de zoom, le menu se superpose au contenu et la colonne de droite sort de l’écran.
- Les textes sont dans des images : ils deviennent flous en zoomant.
Résultat : Jean-Marc appelle le service client, attend douze minutes, et finit par demander le retour au courrier papier.
Site conforme Ce qui change
- Contraste minimal 4,5 : 1 pour le texte, 3 : 1 pour les composants.
- La mise en page se réorganise jusqu’à 400 % de zoom sans perte d’information.
- Le texte est du vrai texte, agrandissable sans dégradation.
Résultat : information lue en trente secondes, en toute autonomie.
Démonstration : réglez le flou
Déplacez le curseur pour simuler une baisse d’acuité visuelle. Observez quel texte reste lisible le plus longtemps.
Votre facture de septembre
Montant prélevé le 12 octobre : 87,40 € — texte gris clair, 13 px (non conforme)
Montant prélevé le 12 octobre : 87,40 € — texte noir, 17 px (conforme)
Voir le détail de ma consommation
Essayez aussi le raccourci Ctrl + + plusieurs fois sur cette page : elle doit rester utilisable à 200 % sans défilement horizontal.
Critères RGAA concernés
- 3.2 Le contraste entre le texte et son arrière-plan est-il suffisamment élevé ?
- 3.3 Les couleurs des composants d’interface sont-elles suffisamment contrastées ?
- 10.4 Le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu’à 200 % ?
- 10.11 Les contenus peuvent-ils être présentés sans perte d’information ni de fonctionnalité et sans défilement horizontal ?
- 1.8 Chaque image texte porteuse d’information doit être remplacée par du texte stylé.
Handicap visuel
Daltonisme : la couleur ne doit jamais être seule
Thomas, 29 ans, logisticien, deutéranope
Thomas distingue mal le rouge du vert. Il ne se considère pas handicapé, jusqu’au moment où un tableau de bord lui demande de réagir « aux lignes rouges ».
Sa mise en situation : vérifier, sur l’outil de suivi de son entreprise, quels entrepôts sont en rupture de stock.
Démonstration : voyez à travers d’autres yeux
Sélectionnez un type de vision des couleurs, puis activez la version corrigée qui ajoute une forme et un texte à la couleur.
- Entrepôt de Lille — En stock
- Entrepôt de Lyon — Rupture
- Entrepôt de Nantes — En stock
- Entrepôt de Marseille — Rupture
- Entrepôt de Strasbourg — En stock
Sans la version corrigée, un utilisateur deutéranope ne peut pas dire quels entrepôts sont en rupture. Avec la forme et le texte, tout le monde le sait, y compris un lecteur d’écran.
Critères RGAA concernés
- 3.1 Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur.
- 3.2 Contraste du texte suffisamment élevé
- 3.3 Contraste des composants d’interface et des éléments graphiques
Handicap auditif
Surdité : une vidéo sans sous-titres est une vidéo vide
Karim, 41 ans, cadre, sourd profond
Karim lit parfaitement le français et communique en langue des signes française. Pour lui, l’audio d’une vidéo n’existe tout simplement pas. Sans sous-titres ni transcription, il voit des gens parler sans savoir de quoi.
Sa mise en situation : suivre la vidéo d’explication obligatoire avant de signer un contrat d’assurance en ligne.
Démonstration : la vidéo vue par Karim
Ce lecteur simule une vidéo d’explication. Sans sous-titres, l’information est inaccessible. Activez les sous-titres ou affichez la transcription.
Une conseillère parle face caméra pendant 2 min 30.
Ce que perçoit Karim : des lèvres qui bougent, des gestes, un sourire.
« Vous disposez de 14 jours pour renoncer au contrat sans frais, par courrier recommandé. »
Transcription
« Bonjour, et merci de votre confiance. Avant de signer, trois informations importantes. Premièrement, vous disposez de 14 jours pour renoncer au contrat sans frais, par courrier recommandé. Deuxièmement, la franchise s’applique à chaque sinistre, à hauteur de 150 euros. Troisièmement, votre contrat se renouvelle automatiquement chaque année, sauf résiliation deux mois avant l’échéance. »
La transcription sert aussi aux personnes qui ne peuvent pas lancer le son au bureau ou dans les transports, et elle est indexée par les moteurs de recherche.
Critères RGAA concernés
- 4.1 Chaque média temporel pré-enregistré a-t-il, si nécessaire, une transcription textuelle ou une audiodescription ?
- 4.3 Chaque média temporel synchronisé pré-enregistré a-t-il, si nécessaire, des sous-titres synchronisés ?
- 4.5 Chaque média temporel pré-enregistré a-t-il, si nécessaire, une audiodescription synchronisée ?
- 4.10 Chaque son déclenché automatiquement est-il contrôlable par l’utilisateur ?
Et la malentendance ? Lina, 72 ans, entend mal les voix dans le bruit. Les sous-titres l’aident autant que Karim. Avec le vieillissement de la population, la part des utilisateurs concernés ne cesse d’augmenter.
Handicap moteur
Handicap moteur : le clavier, le temps et la taille des cibles
Paul, 52 ans, tétraplégique, et Sophie, 63 ans, atteinte de la maladie de Parkinson
Paul pilote son ordinateur avec un contacteur et une commande vocale : il n’utilise ni souris ni écran tactile, et chaque action lui prend plusieurs secondes. Sophie utilise une souris, mais ses tremblements rendent les petites cibles et les menus déroulants « au survol » presque impossibles à atteindre.
Leur mise en situation : valider un paiement en ligne avec un code de confirmation à saisir en moins de 60 secondes.
Démonstration 1 : naviguez au clavier seulement
Cliquez sur « Commencer » (ou n’importe où dans la zone), puis appuyez sur Tab pour avancer et Entrée pour activer. Le premier bouton est une simple div stylée : il est inaccessible au clavier. Les suivants sont de vrais boutons.
Cliquez sur « Commencer », puis appuyez sur Tab.
Si vous n’arrivez pas à atteindre le premier bouton au clavier, vous venez de vivre la situation de Paul. Pour lui, ce bouton n’existe pas.
Démonstration 2 : la course contre la montre
Les codes de confirmation expirent souvent au bout de quelques secondes. Lancez le compte à rebours et imaginez devoir saisir six chiffres avec un seul doigt, ou en dictant chaque chiffre à la voix.
Aucun compte à rebours en cours.
Le RGAA exige que l’utilisateur puisse supprimer, prolonger ou ajuster toute limite de temps, hormis quelques exceptions comme les enchères en direct.
Démonstration 3 : la taille des cibles
Essayez de cliquer sur les petites croix de fermeture ci-dessous, puis sur les grandes. Pour Sophie, la première ligne est une loterie.
Cibles minuscules (environ 14 pixels) :
Cibles recommandées (44 pixels minimum) :
Critères RGAA concernés
- 7.3 Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage ?
- 10.7 Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
- 12.8 Dans chaque page web, l’ordre de tabulation est-il cohérent ?
- 12.9 La navigation ne doit pas contenir de piège au clavier.
- 13.1 Pour chaque page web, l’utilisateur a-t-il le contrôle de chaque limite de temps modifiant le contenu ?
Handicap cognitif
Dyslexie : lire coûte de l’énergie
Léa, 19 ans, étudiante, dyslexique
Léa lit, mais lentement : les lettres se mélangent, les lignes se perdent, les mots longs se confondent. Les blocs de texte justifiés et serrés, les polices fantaisie et les consignes à double négation l’épuisent.
Sa mise en situation : remplir sa demande de bourse en ligne avant la date limite.
Démonstration : lire avec une dyslexie
La simulation mélange les lettres intérieures des mots, comme Léa les perçoit parfois. La version adaptée agrandit le texte, aère les lignes et simplifie la formulation.
Nonobstant les dispositions précédentes, le demandeur ne saurait prétendre au versement de l’aide s’il n’a pas préalablement transmis l’ensemble des pièces justificatives mentionnées à l’article 4, à défaut de quoi la demande sera réputée incomplète.
Version simple : pour recevoir l’aide, envoyez d’abord tous les documents demandés à l’article 4. Sinon, votre demande sera considérée comme incomplète.
Aucune simulation en cours.
La simulation s’arrête avec le même bouton, avec la touche Échap, ou automatiquement après 20 secondes. Si votre système est réglé sur « réduire les animations », le mélange est fixe plutôt qu’animé. Le texte mélangé est masqué aux lecteurs d’écran pendant la simulation.
Critères RGAA concernés et bonnes pratiques
- 10.9 L’information ne doit pas être donnée uniquement par la forme, la taille ou la position.
- 10.12 Les propriétés d’espacement du texte peuvent-elles être redéfinies sans perte de contenu ?
- 11.10 Le contrôle de saisie est-il utilisé de manière pertinente ?
- 11.11 Les erreurs de saisie sont-elles accompagnées de suggestions de correction ?
- 13.9 Le contenu est-il consultable quelle que soit l’orientation de l’écran ?
Bonnes pratiques au-delà du RGAA : texte aligné à gauche, interligne généreux, phrases courtes, un seul message par paragraphe, vocabulaire courant, « Facile à lire et à comprendre » (FALC) pour les démarches essentielles.
Handicap cognitif
Troubles de l’attention : chaque distraction est un décrochage
Hugo, 24 ans, graphiste, TDAH
Hugo a un trouble du déficit de l’attention avec hyperactivité. Un carrousel qui défile, une bannière qui clignote, une fenêtre surgissante : son attention est happée et il perd le fil de ce qu’il faisait. Les parcours longs, sans indication de progression, sont abandonnés en route.
Sa mise en situation : renseigner ses coordonnées bancaires sur un site marchand couvert de promotions animées.
Démonstration : remplir un formulaire au milieu du bruit
Activez les distractions puis essayez de remplir le formulaire. Rien ne clignote : les éléments glissent lentement, mais c’est déjà suffisant pour perturber.
Le RGAA exige que tout contenu en mouvement ou clignotant puisse être arrêté, mis en pause ou masqué par l’utilisateur.
Critères RGAA concernés
- 13.8 Chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?
- 12.1 Chaque ensemble de pages dispose-t-il de deux systèmes de navigation différents ?
- 12.2 La position des menus est-elle cohérente de page en page ?
- 11.10 Le contrôle de saisie est-il utilisé de manière pertinente ?
- 7.5 Les messages de statut sont-ils correctement restitués par les technologies d’assistance ?
Handicap neurologique
Épilepsie photosensible : quand un site peut faire mal
Inès, 31 ans, infirmière, épilepsie photosensible
Chez Inès, des flashs lumineux répétés entre 3 et 60 fois par seconde peuvent déclencher une crise. Une animation publicitaire stroboscopique, une vidéo de concert en lecture automatique, un effet « glitch » à la mode : ce n’est pas une gêne, c’est un danger physique.
Sa mise en situation : arriver sur la page d’accueil d’un festival dont la vidéo d’ambiance démarre automatiquement, en plein écran, avec des flashs.
Pourquoi il n’y a pas de démonstration ici
Nous ne reproduisons volontairement aucun effet de clignotement : il serait dangereux pour une partie de nos visiteurs. C’est la règle à retenir : aucun contenu ne doit clignoter plus de trois fois par seconde, et toute vidéo doit pouvoir être arrêtée avant son démarrage.
Environ 1 personne épileptique sur 20 est photosensible, soit plusieurs dizaines de milliers de personnes en France. Les crises déclenchées par des contenus numériques sont documentées et ont déjà fait l’objet de poursuites.
Critères RGAA concernés
- 13.7 Dans chaque page web, les changements brusques de luminosité ou les effets de flash sont-ils correctement utilisés ?
- 4.10 Chaque son déclenché automatiquement est-il contrôlable ?
- 13.8 Chaque contenu en mouvement ou clignotant est-il contrôlable ?
Épreuve commune
Le formulaire : là où tout le monde se retrouve bloqué
Le formulaire concentre la plupart des défauts d’accessibilité. Un seul formulaire défaillant peut exclure à la fois Nadia, Jean-Marc, Thomas, Paul, Léa et Hugo. Comparez.
Non conforme Formulaire d’inscription
- Pas d’étiquette : le placeholder disparaît à la saisie et n’est pas lu de façon fiable.
- L’erreur n’est signalée que par une bordure rouge : invisible pour Thomas et Nadia.
- Aucun champ marqué obligatoire, aucun format indiqué.
- Le bouton est une div : Paul ne peut pas l’activer.
Conforme Le même formulaire
Critères RGAA concernés
- 11.1 Chaque champ de formulaire a-t-il une étiquette ?
- 11.2 Chaque étiquette associée à un champ est-elle pertinente ?
- 11.10 Le contrôle de saisie est-il utilisé de manière pertinente ?
- 11.11 Les erreurs sont-elles accompagnées de suggestions de correction ?
- 11.13 La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique ?
Et vous ?
Handicaps temporaires et situationnels : l’accessibilité profite à tous
Le handicap n’est pas toujours permanent, ni toujours médical. Chaque amélioration réalisée pour Nadia, Paul ou Léa sert aussi ces situations très ordinaires.
Bras dans le plâtre
Trois semaines à naviguer d’une main, souvent au clavier. Les raccourcis et la navigation au Tab deviennent indispensables.
Soleil sur l’écran
Sur un téléphone en plein jour, seul un contraste élevé reste lisible. Les textes gris clair disparaissent, comme pour Jean-Marc.
Transports bruyants
Impossible d’entendre une vidéo dans le métro. Les sous-titres de Karim servent à des millions de trajets quotidiens.
Connexion lente
Les images ne se chargent pas : les alternatives textuelles de Nadia s’affichent à leur place. Le sens est préservé.
Fatigue et stress
Un parcours administratif à 23 h, après une journée épuisante : les consignes claires de Léa évitent l’abandon.
Langue étrangère
Un nouvel arrivant qui apprend le français bénéficie du vocabulaire simple et de la structure prévisible.
Vieillissement
Baisse de la vue, de l’audition, de la dextérité : avec l’âge, nous rejoignons presque tous un de ces profils.
Bébé dans les bras
Une seule main, l’attention fragmentée : les grandes cibles et les formulaires courts font la différence.
Vos utilisateurs vivent cela chaque jour sur votre site
Un audit RGAA identifie précisément les blocages et vous donne un plan de correction priorisé. Nous animons aussi cet atelier de mise en situation dans vos locaux pour embarquer vos équipes.