Basse vision : mise en situation et 10 améliorations prioritaires



La basse vision ne signifie pas nécessairement ne plus voir. De nombreuses personnes malvoyantes utilisent un site web en agrandissant fortement les contenus, en augmentant les contrastes ou en adaptant les couleurs à leurs besoins. Un site peut pourtant devenir très difficile, voire impossible à utiliser dès que l’affichage est modifié : textes tronqués, menus qui disparaissent, boutons peu visibles, défilement horizontal permanent ou informations uniquement présentées dans une image.

Pour une collectivité territoriale ou une destination touristique, ces difficultés peuvent empêcher un usager d’effectuer une démarche administrative, de consulter les horaires d’un équipement, de préparer un séjour ou de réserver une activité.

Comprendre ces situations permet d’identifier les améliorations réellement prioritaires. Voici une mise en situation concrète et dix actions à engager pour rendre un site plus facilement utilisable par les personnes ayant une basse vision.

Qu’est-ce que la basse vision et quelles conséquences sur l’utilisation d’un site web ?

La basse vision correspond à une déficience visuelle qui persiste malgré une correction optique classique. Elle recouvre des situations très différentes : diminution de l’acuité visuelle, réduction du champ visuel, difficultés à distinguer certains contrastes, sensibilité importante à la lumière ou encore vision partielle de certaines zones.

Il n’existe donc pas une manière unique de consulter un site lorsque l’on est malvoyant.

Certaines personnes utilisent des logiciels d’agrandissement. D’autres augmentent simplement le zoom de leur navigateur à 150 %, 200 %, voire davantage. Certaines modifient également les couleurs ou les contrastes du système afin de mieux distinguer les éléments.

Cette diversité des usages est importante à comprendre. L’accessibilité d’un site pour les personnes malvoyantes ne peut pas se résumer à augmenter légèrement la taille de la police ou à ajouter un bouton « A+ » dans l’en-tête.

L’enjeu consiste surtout à permettre à l’utilisateur d’adapter l’interface à ses besoins sans perdre de contenu ni de fonctionnalité.

Mise en situation : préparer une démarche ou un séjour avec une basse vision

Imaginons Marie. Elle présente une basse vision et utilise principalement son ordinateur avec le navigateur réglé à 200 % de zoom. Pour certains contenus particulièrement détaillés, elle augmente encore davantage l’affichage.

Marie souhaite consulter un site public pour connaître les horaires d’ouverture d’un équipement municipal.

À 100 %, la page semble parfaitement fonctionnelle. Le menu est horizontal, trois actualités apparaissent côte à côte et les horaires sont présentés dans un petit encadré placé sur la droite.

Marie augmente le zoom.

Le menu occupe désormais deux lignes. Une partie des liens disparaît derrière le logo. L’encadré des horaires est repoussé vers la droite et oblige à utiliser une barre de défilement horizontale. Pour lire une phrase, elle doit constamment déplacer l’écran vers la gauche, puis vers la droite.

L’information existe toujours, mais son accès devient laborieux.

Consulter une offre touristique

Quelques jours plus tard, Marie prépare un séjour et consulte le site d’un office de tourisme. Elle souhaite comparer plusieurs visites.

Les fiches contiennent de belles photographies sur lesquelles sont superposés le nom de l’activité, le tarif et la disponibilité. Le texte blanc est placé sur des zones parfois très claires des photographies.

À fort grossissement, Marie ne distingue plus correctement certaines informations. Un pictogramme vert signifie qu’une activité est disponible, tandis qu’un pictogramme rouge indique qu’elle est complète. Aucun texte ne vient préciser cette différence.

Plus loin, le programme complet de la semaine est présenté sous la forme d’une affiche JPEG.

Marie peut agrandir l’image, mais la lecture devient pénible et elle ne peut pas modifier l’espacement ou la présentation du texte.

Remplir un formulaire

Marie tente finalement de réserver une visite.

À 200 % de zoom, certains champs du formulaire restent accessibles. Mais les libellés ont été positionnés dans une colonne fixe qui devient trop étroite. Plusieurs mots sont coupés.

Après validation, un message d’erreur apparaît en rouge au-dessus du formulaire. Marie ne remarque pas immédiatement cette information et ne sait pas quel champ doit être corrigé.

Elle abandonne finalement sa réservation.

Pour la destination touristique, la conséquence est très concrète : une conversion est perdue. Pour Marie, un service qui semblait disponible ne l’est pas réellement dans ses conditions d’utilisation.

Ce que cette situation révèle

Pour une personne ayant une basse vision, les obstacles ne proviennent pas seulement de la taille du texte.

Ils concernent également la possibilité d’agrandir l’interface, la capacité du contenu à se réorganiser, les contrastes, la distinction des composants, l’utilisation de la couleur, la densité visuelle et la manière dont l’information est structurée.

Une interface accessible doit donc être adaptable.

1. Garantir un contraste suffisant entre le texte et son arrière-plan

Le contraste constitue l’un des premiers points à contrôler.

Un gris clair sur fond blanc peut sembler élégant sur une maquette mais devenir très difficile à lire pour une personne malvoyante. Le problème est encore plus fréquent lorsque du texte est placé directement sur une photographie ou sur un dégradé.

Le RGAA prévoit notamment un rapport de contraste d’au moins 4,5:1 pour les textes de taille courante, avec des exigences adaptées aux textes de grande taille.

Ces seuils doivent être considérés comme un minimum, pas comme un objectif esthétique.

Sur un site touristique, par exemple, le nom d’une activité affiché en blanc sur une photographie très lumineuse peut être parfaitement lisible sur une image et quasiment invisible sur une autre. Ajouter un fond suffisamment contrasté derrière le texte apporte généralement une solution plus robuste.

Pour une collectivité, la même vigilance doit s’appliquer aux informations pratiques, aux actualités, aux alertes et aux démarches en ligne.

2. Permettre l’agrandissement du texte sans perte d’information

Une personne malvoyante doit pouvoir augmenter la taille du texte sans provoquer la disparition d’informations ou de fonctionnalités.

Le critère WCAG relatif au redimensionnement du texte prévoit notamment qu’il puisse être agrandi jusqu’à 200 % sans perte de contenu ou de fonctionnalité.

Les problèmes apparaissent souvent lorsque des blocs possèdent une hauteur fixe. Lorsque le texte devient plus grand, celui-ci dépasse de son conteneur, disparaît ou recouvre un autre élément.

Cette situation est fréquente dans les cartes de contenus : événements, actualités, prestations touristiques, élus, équipements ou résultats d’un moteur de recherche.

Le test est simple : augmenter le zoom du navigateur à 200 % et vérifier que l’intégralité du texte, des boutons et des informations reste disponible.

3. Concevoir des pages qui se réorganisent avec un zoom important

L’agrandissement ne doit pas transformer chaque paragraphe en exercice de navigation horizontale.

Lorsque l’utilisateur zoome fortement, la largeur disponible diminue. Le contenu doit alors se réorganiser comme il le ferait sur un écran plus petit.

C’est le principe de reflow, ou redistribution du contenu.

Les WCAG demandent notamment que le contenu puisse être présenté sans perte d’information ou de fonctionnalité à une largeur équivalente à 320 pixels CSS, sauf pour les contenus dont la compréhension exige réellement une présentation en deux dimensions.

Concrètement, les colonnes peuvent passer les unes sous les autres, un menu horizontal peut devenir un menu compact et les blocs doivent s’adapter à la largeur disponible.

Pour les personnes malvoyantes, ce comportement évite de devoir déplacer continuellement la page de gauche à droite pour lire chaque ligne.

4. Prévoir une typographie confortable et adaptable

Le RGAA ne fixe pas une taille de police universelle à utiliser sur tous les sites. Il serait donc incorrect d’affirmer qu’un texte doit obligatoirement mesurer 16 pixels ou davantage.

Il existe néanmoins une différence importante entre conformité minimale et confort de lecture.

Une typographie très petite oblige immédiatement certains utilisateurs à agrandir la page. Une police très fine ou trop condensée peut également diminuer la lisibilité.

Il est préférable d’utiliser des tailles confortables, des hauteurs de ligne suffisantes et des espacements cohérents.

Les unités relatives sont également à privilégier lorsqu’elles permettent aux réglages utilisateurs de fonctionner correctement.

Sur un site comportant beaucoup d’informations pratiques, comme un portail municipal ou touristique, la hiérarchie typographique joue aussi un rôle majeur. Un titre, un sous-titre, un tarif ou un horaire doivent être distingués facilement sans exiger un effort important de repérage.

5. Renforcer la visibilité des boutons, champs et composants

Les contrastes ne concernent pas uniquement les textes.

Une personne malvoyante doit également pouvoir repérer un champ de formulaire, un bouton, une case à cocher, un onglet actif ou un indicateur de focus.

Les WCAG prévoient un rapport de contraste d’au moins 3:1 pour certaines informations visuelles nécessaires à l’identification des composants d’interface.

Un champ composé uniquement d’une fine bordure gris clair sur fond blanc peut ainsi être difficile à détecter.

Même difficulté avec un bouton secondaire à peine différent de l’arrière-plan ou une icône très discrète utilisée pour fermer une fenêtre.

Ces problèmes peuvent paraître mineurs lors d’une revue graphique classique. Ils deviennent pourtant déterminants lorsqu’une personne doit examiner une zone réduite de l’écran avec un fort grossissement.

6. Ne jamais transmettre une information uniquement par la couleur

Une information importante ne doit pas dépendre exclusivement de la perception d’une couleur.

Prenons un formulaire : les champs obligatoires sont entourés en rouge lorsqu’une erreur est détectée. Sans texte complémentaire ou autre indication perceptible, certains utilisateurs risquent de ne pas comprendre ce qui doit être corrigé.

Même problème pour une carte touristique où trois itinéraires seraient représentés uniquement en rouge, vert et bleu.

La couleur peut parfaitement compléter une information, mais elle ne doit pas en être le seul vecteur.

Le W3C rappelle explicitement que la couleur ne doit pas constituer l’unique moyen de communiquer une information ou d’identifier un contenu.

Pour une activité touristique, mieux vaut par exemple associer une couleur à un texte tel que « Disponible », « Complet » ou « Quelques places ».

7. Réduire la densité visuelle des interfaces

La basse vision oblige souvent l’utilisateur à consulter seulement une petite partie de l’écran à la fois.

Plus la page contient de blocs, de boutons, de carrousels, de bannières et d’informations concurrentes, plus le repérage devient complexe.

Les sites touristiques sont particulièrement exposés à cette difficulté. Pour valoriser l’offre, la page d’accueil peut accumuler moteur de recherche, sélections, événements, suggestions, campagnes promotionnelles, cartes et appels à l’action.

Une interface plus sobre ne signifie pas une interface moins attractive.

Il s’agit de créer une hiérarchie claire : une fonction principale identifiable, des contenus organisés en ensembles cohérents et suffisamment d’espace pour distinguer visuellement les informations.

Cette approche bénéficie d’ailleurs à l’ensemble des utilisateurs, notamment sur mobile.

8. Rendre les liens et boutons faciles à identifier

Un lien intégré dans un paragraphe ne doit pas dépendre d’une variation de couleur quasiment imperceptible.

De la même manière, un bouton ne doit pas être confondu avec un simple texte ou avec un élément décoratif.

Les intitulés doivent également rester explicites.

« Consulter les horaires du musée » est généralement plus compréhensible que « En savoir plus », particulièrement lorsqu’une personne utilise une forte magnification et ne voit plus immédiatement le contexte situé autour du lien.

Il faut aussi porter une attention particulière à l’indicateur de focus lorsqu’un utilisateur navigue au clavier. Celui-ci doit rester visible et identifiable, y compris sur les différents arrière-plans de la page.

9. Éviter de placer les informations importantes uniquement dans des images

Une affiche peut sembler être un moyen rapide de publier un programme culturel ou touristique.

Elle pose pourtant de nombreux problèmes.

Les horaires, dates, tarifs et lieux deviennent intégrés dans l’image. Ils ne peuvent plus être facilement réorganisés par le navigateur, personnalisés ou adaptés à l’affichage de l’utilisateur.

Le même problème apparaît avec les cartes, infographies ou visuels issus des réseaux sociaux puis réutilisés tels quels sur le site.

Le W3C recommande d’éviter les images de texte lorsqu’un véritable texte peut être utilisé.

Une affiche peut tout à fait rester disponible comme support graphique, à condition que ses informations utiles soient également proposées en HTML dans la page.

Pour un événement, il est donc préférable de fournir séparément le nom, la date, le lieu, le tarif, les horaires et les informations de réservation.

10. Tester réellement les pages avec différents niveaux de zoom

Les problèmes liés à la basse vision sont difficiles à identifier uniquement en regardant une maquette à 100 %.

Le test au zoom doit faire partie de la recette.

Commencez par une page représentative. Passez l’affichage à 200 %. Parcourez l’ensemble de la page et vérifiez qu’aucun texte ni aucune fonctionnalité ne disparaît.

Augmentez ensuite davantage le zoom afin d’observer la manière dont l’interface se réorganise.

Il faut notamment contrôler les menus, les formulaires, les fenêtres modales, les tableaux, les moteurs de recherche et les contenus comportant plusieurs colonnes.

Un simple test de quelques minutes permet parfois de détecter des problèmes majeurs : bouton impossible à atteindre, texte tronqué, fenêtre qui dépasse de l’écran ou formulaire inutilisable.

Le W3C recommande d’ailleurs le zoom parmi les vérifications simples pouvant être réalisées pour détecter certains problèmes d’accessibilité.

Les 10 points de contrôle à retenir

Point de contrôleRisque principalPriorité
Contraste des textesTexte difficile ou impossible à lireTrès haute
AgrandissementContenu coupé ou masquéTrès haute
ReflowDéfilement horizontal permanentTrès haute
TypographieLecture fatiganteHaute
Composants d’interfaceBoutons ou champs difficiles à repérerHaute
Utilisation de la couleurInformation incompréhensibleHaute
Densité visuelleDifficulté à se repérerMoyenne
Liens et boutonsActions difficiles à identifierHaute
Images contenant du texteInformation difficile à adapterHaute
Tests de zoomRégressions non détectéesTrès haute

Quelles pages tester en priorité ?

Toutes les pages doivent évidemment être accessibles. Lorsqu’une organisation débute sa démarche, certaines méritent néanmoins une attention immédiate en raison de leur importance dans le parcours utilisateur.

Pour une collectivité territoriale, il faut regarder en priorité les démarches en ligne, les formulaires, la prise de rendez-vous, les pages d’informations pratiques, l’agenda, les actualités et les services permettant d’accéder à un document ou à une prestation.

Une page d’accueil accessible mais un formulaire de demande de document inutilisable à 200 % de zoom ne permet pas de garantir un accès effectif au service.

Pour une destination touristique, les fiches d’activités et d’hébergements, les moteurs de recherche, l’agenda, les cartes, les itinéraires, les systèmes de réservation et les informations pratiques doivent faire partie des premières pages testées.

Basse vision et RGAA : quels critères surveiller ?

Il n’existe pas un petit groupe de critères RGAA exclusivement consacré à la basse vision.

Les difficultés rencontrées peuvent concerner plusieurs thématiques du référentiel : couleurs, présentation de l’information, formulaires, navigation, consultation ou encore structuration des contenus.

Cette précision est importante.

Tester uniquement les contrastes ne permet pas de conclure qu’un site est accessible pour une personne malvoyante. Un site peut respecter les contrastes minimaux tout en devenant inutilisable dès que l’utilisateur augmente fortement le zoom.

À l’inverse, un excellent fonctionnement au zoom ne compense pas un formulaire dont les champs sont difficiles à distinguer.

Il faut donc raisonner en parcours et en combinaison de critères plutôt qu’en contrôle isolé.

Comment intégrer ces améliorations dans le fonctionnement quotidien ?

L’accessibilité liée à la basse vision n’est pas uniquement une responsabilité technique.

Les designers doivent vérifier les contrastes, la lisibilité des composants, la typographie et le comportement responsive des maquettes.

Les intégrateurs et développeurs doivent garantir le reflow, éviter les dimensions fixes problématiques et vérifier que les composants restent utilisables lorsque l’affichage est agrandi.

Les contributeurs ont également un rôle déterminant. Publier une affiche contenant toutes les informations d’un événement ou intégrer un texte directement dans une image peut créer une nouvelle difficulté, même si le gabarit du site était initialement accessible.

Les chefs de projet doivent enfin inscrire ces vérifications dans les critères de recette. L’accessibilité ne doit pas être contrôlée uniquement au moment d’un audit réalisé plusieurs années après la mise en ligne.

Elle doit devenir un critère d’acceptation du projet.

Une check-list pour tester rapidement une page

Un premier contrôle ne remplace pas un audit RGAA, mais il permet d’identifier rapidement plusieurs difficultés importantes.

Sur une page représentative, vérifiez les sept points suivants :

  1. Passez le zoom du navigateur à 200 %.
  2. Vérifiez que tous les textes, boutons et champs restent disponibles.
  3. Augmentez encore le zoom et observez si le contenu se réorganise correctement.
  4. Vérifiez les contrastes des textes et des principaux composants.
  5. Recherchez les informations indiquées uniquement par une couleur.
  6. Repérez les textes importants intégrés dans des images.
  7. Testez un formulaire, un menu et au moins un composant interactif.

Si une information disparaît ou qu’une fonctionnalité devient inutilisable pendant ces tests, le problème mérite d’être analysé.

Cette vérification rapide constitue également un excellent exercice de sensibilisation pour une équipe éditoriale ou projet.

Pour conclure : concevoir une interface adaptable plutôt qu’une version spécifique

Rendre un site accessible aux personnes ayant une basse vision ne signifie pas créer un « mode malvoyant » ou développer une seconde version du site.

L’objectif est exactement inverse : concevoir une interface suffisamment adaptable pour fonctionner dans différentes conditions d’affichage.

Un utilisateur doit pouvoir augmenter le zoom, modifier certains réglages de présentation ou utiliser ses propres outils sans perdre d’information ni de fonctionnalité.

Les dix améliorations présentées dans cet article constituent donc moins une série de correctifs isolés qu’un principe général de conception : ne pas imposer une seule manière de voir et d’utiliser l’interface.

Pour une collectivité, cette démarche améliore concrètement l’accès aux services publics numériques. Pour une destination touristique, elle permet à davantage de visiteurs de rechercher une information, préparer leur séjour et effectuer une réservation dans de bonnes conditions.

Un audit d’accessibilité permet ensuite d’aller plus loin : identifier les obstacles existants, mesurer leur impact et transformer les non-conformités en plan d’actions priorisé.


FAQ

Qu’est-ce que la basse vision ?

La basse vision désigne une déficience visuelle importante qui persiste malgré une correction classique. Elle peut affecter l’acuité visuelle, le champ de vision, la perception des contrastes ou la sensibilité à la lumière. Sur le web, les besoins varient donc fortement : agrandissement du contenu, contraste renforcé, interface simplifiée ou adaptation personnalisée de l’affichage.

Quelle différence entre basse vision, malvoyance et cécité ?

La basse vision et la malvoyance désignent des situations dans lesquelles une personne conserve une capacité visuelle utilisable, mais insuffisante pour certaines activités sans adaptation. La cécité correspond à une perte beaucoup plus importante de la vision. Ces catégories recouvrent toutefois des situations très diverses et ne permettent pas, seules, de déduire la manière dont une personne utilise un site.

Comment une personne malvoyante utilise-t-elle un site web ?

Une personne malvoyante peut utiliser le zoom du navigateur, un logiciel de grossissement, des paramètres de contraste, des couleurs personnalisées ou d’autres technologies d’assistance. Certaines utilisent également un lecteur d’écran. Un site accessible doit rester fonctionnel lorsque l’affichage est adapté à ces besoins.

Quel niveau de contraste faut-il respecter sur un site web ?

Le RGAA prévoit notamment un rapport de contraste d’au moins 4,5:1 entre un texte de taille courante et son arrière-plan, avec des exigences différentes pour certains textes de grande taille. Les composants d’interface et informations graphiques nécessaires à leur compréhension doivent également présenter un contraste suffisant.

Un site doit-il rester accessible avec un zoom à 200 % ?

Oui. Les textes doivent notamment pouvoir être agrandis jusqu’à 200 % sans perte de contenu ou de fonctionnalité. En pratique, il est également important de tester des niveaux d’agrandissement supérieurs afin de vérifier la capacité de l’interface à se réorganiser correctement.

Pourquoi le reflow est-il important pour les personnes malvoyantes ?

Le reflow permet au contenu de se réorganiser lorsque la largeur disponible diminue. Sans ce comportement, une personne utilisant un fort niveau de zoom peut être obligée de déplacer continuellement la page horizontalement pour lire chaque ligne. Cette navigation bidimensionnelle complique fortement la lecture et le maintien du repère visuel.

Faut-il ajouter un bouton A+ pour rendre un site accessible ?

Non. Un bouton permettant d’augmenter la taille du texte peut éventuellement apporter un confort supplémentaire, mais il ne remplace pas une conception accessible. Les fonctions natives du navigateur et les réglages de l’utilisateur doivent pouvoir fonctionner sans provoquer de perte de contenu ou de fonctionnalité.

Comment tester rapidement un site pour la basse vision ?

Commencez par augmenter le zoom à 200 %, puis davantage. Vérifiez que les textes, menus, formulaires, boutons et fenêtres restent accessibles. Contrôlez également les contrastes, les informations transmises uniquement par la couleur et les textes intégrés dans des images. Ce test rapide ne remplace pas un audit RGAA, mais permet d’identifier plusieurs obstacles importants.

Quels critères RGAA concernent la basse vision ?

La basse vision ne correspond pas à une seule thématique du RGAA. Plusieurs critères peuvent être concernés, notamment ceux relatifs aux couleurs, aux contrastes, à la présentation de l’information, aux formulaires, à la navigation et à la consultation. Une évaluation complète doit donc prendre en compte l’ensemble du parcours utilisateur plutôt qu’un nombre limité de critères isolés.


Sur le même sujet