Les utilisateurs malvoyants rencontrent toute une série de problèmes liés à la conception, au style, à l'animation, au mouvement et au positionnement.

Les petites polices de caractères peuvent être particulièrement problématiques. Certaines personnes contournent ce problème en utilisant un logiciel d'agrandissement d'écran, mais de nombreuses personnes qui ont besoin de polices plus grandes n'ont pas besoin d'un agrandissement d'écran. Il est donc important que les pages web permettent de redimensionner le texte dans le navigateur. Le redimensionnement du texte est différent du zoom qui redimensionne la page entière. En entrant dans les paramètres de votre navigateur, vous pouvez redimensionner le texte d'une page indépendamment de tout autre contenu. Nous verrons plus tard comment personnaliser les pages web dans le navigateur.

Un mauvais contraste des couleurs peut affecter un large éventail d'utilisateurs, dont de nombreuses personnes souffrant de troubles de la vue, de la cognition et de l'apprentissage. Il peut également affecter les utilisateurs d'appareils mobiles dans des environnements particulièrement lumineux. Un contraste insuffisant empêche les utilisateurs de percevoir les informations que le contenu tente de transmettre. Cela crée à son tour des obstacles à l'interaction, car les utilisateurs peuvent être incapables d'identifier leur position sur une page, l'état des éléments interactifs (liens et commandes), de lire le texte ou d'identifier le contenu des images. L'importance d'un bon contraste des couleurs ne peut être sous-estimée, car il y a beaucoup plus de personnes malvoyantes que de personnes aveugles.

La couleur est un élément clé de la conception d'un site web, qui améliore non seulement l'attrait esthétique et l'image de marque, mais aussi la convivialité et l'accessibilité. Cependant, certains utilisateurs ont des difficultés à percevoir les couleurs. Les personnes malvoyantes ont souvent une vision limitée des couleurs, et de nombreux utilisateurs plus âgés ne voient pas bien les couleurs. En outre, les personnes qui utilisent des écrans et des navigateurs textuels, à couleur limitée ou monochromes ne pourront pas accéder aux informations présentées uniquement en couleur.

Une image montre le texte « Les champs obligatoires sont indiqués en rouge » suivi d'une entrée texte « Nom de famille » sous forme d'un rectangle rouge. Il n'existe aucun autre indicateur du caractère obligatoire que la couleur rouge.

Parmi les obstacles, on peut citer la mise en rouge du texte des étiquettes des champs obligatoires des formulaires ou l'utilisation de la couleur seule dans les graphiques ou les diagrammes. Un autre obstacle très courant qui empêche les gens de naviguer est l'utilisation de la couleur seule pour indiquer les liens. Les liens dans un texte simple peuvent être problématiques pour les utilisateurs ayant une faible perception des couleurs lorsque la seule indication visuelle d'un lien est une différence de couleur. La combinaison de l'utilisation de la couleur avec un soulignement ou une police de caractères différente rend les liens plus reconnaissables.

Une image montre un texte ou un des mots est mis en avant via une couleur : cela ne sera pas perceptible par tout le monde.

Les sélecteurs de couleur sur les options/filtres sont un autre domaine courant qui peut poser des problèmes. Si différentes options de couleur (ici pour un t-shirt) sont proposées sans alternative textuelle visible, les personnes ayant une faible perception des couleurs risquent de ne pas pouvoir sélectionner la couleur de leur choix.

L'image d'un exemple montre qu'un choix de couleur a un liseré de couleur différent laissant apparaître celui-ci comme sélectionné, alors que celui-ci n'est pas sélectionné comme le montre le texte indiquant la sélection. Sans ce texte, la personne aurait plus de chance de ne pas savoir ce qui est sélectionné et de faire une erreur.

Les personnes souffrant de troubles de la vision, de la cognition et de l'apprentissage peuvent être distraites par les mouvements et les animations. Si le contenu à l'écran est agrandi, l'animation peut occuper tout l'écran, ce qui est désorientant. Les problèmes les plus courants sont les bannières publicitaires contenant des arrière-plans clignotants et des mouvements, le contenu d'un clip vidéo, les images animées ou les carrousels en mouvement continu. Les personnes photosensibles peuvent avoir des crises d'épilepsie déclenchées par des contenus qui clignotent à certaines fréquences pendant plus de quelques instants.

Les contenus tels que les carrousels dont le contenu est automatiquement mis à jour peuvent poser problème, même s'ils sont dotés de boutons de pause ou d'arrêt. Souvent, ces boutons sont délibérément petits, manquent de contraste et sont difficiles à trouver. Les bannières publicitaires contenant des animations (ou pas d'animations d'ailleurs !), les mouvements dans les vidéos peuvent également dominer l'écran. Imaginez un site web d'information avec des publicités placées en haut de la page, à gauche et à droite de la page, avec un zoom avant. Ajoutez à cela une vidéo en lecture automatique en bas à gauche de l'écran. Lorsque l'on fait un zoom avant, le titre de l'article se perd et seuls quelques mots sont visibles.

Le point de vue est l'endroit où vous lisez et où vous vous concentrez. Lorsque le contenu est agrandi, si l'endroit où l'on lit change, les gens peuvent se perdre. Par exemple, les informations affichées dans des états de survol peuvent être difficiles à lire pour les personnes qui font un zoom sur le contenu ou qui utilisent un agrandissement d'écran. Des problèmes se posent lorsque l'état de survol est plus grand que l'affichage. Les utilisateurs doivent alors faire défiler l'écran pour essayer d'atteindre le contenu.

D'autres problèmes se posent lorsque le contenu est zoomé à proximité de contenus connexes. Si les informations connexes ne sont pas regroupées, elles peuvent être perdues et devenir inutilisables. Il peut s'agir d'étiquettes pour les entrées de formulaires ou de contenus séparés par de grandes zones d'espace vide. Les interactions qui modifient le contenu ailleurs sur l'écran peuvent également poser problème. Si le contenu fait l'objet d'un zoom avant, l'utilisateur ne peut voir qu'une petite partie de l'écran. Imaginez une page de résultats de recherche sur le site d'une compagnie aérienne où les filtres pour les vols sont agrandis et occupent tout l'écran. Lorsque les filtres sont mis à jour, les résultats de la recherche le sont aussi, mais l'utilisateur qui fait un zoom ou qui agrandit son écran n'a aucun moyen de le savoir. En outre, si les filtres font partie d'un formulaire, l'utilisateur peut chercher un bouton “Soumettre” et ne pas comprendre pourquoi il n'y en a pas.

Q : Pourquoi les petites polices de caractères peuvent-elles être particulièrement problématiques ? R : Les petites polices de caractères peuvent être particulièrement problématiques car elles sont difficiles à lire pour certaines personnes.

Q : Comment peut-on contourner le problème des petites polices de caractères ? R : En utilisant un logiciel d'agrandissement d'écran ou en redimensionnant le texte du navigateur.

Q : Pourquoi est-il important que les pages web permettent de redimensionner le texte dans le navigateur ? R : Il est important que les pages web permettent de redimensionner le texte dans le navigateur afin de rendre le contenu accessible sans agrandissement d'écran.

Q : Quelle est la différence entre le redimensionnement du texte et le zoom ? R : Le redimensionnement du texte est différent du zoom car il redimensionne uniquement le texte, tandis que le zoom redimensionne la page entière qui n'apparait alors que partiellement à l'écran.

Q : Un mauvais contraste affecte-t-il uniquement les personnes souffrant d'un trouble de la vue ? R : Non, cela peut aussi affecter des personnes avec un trouble de la cognition, de l'apprentissage, ou même une personne dans un environnement particulièrement lumineux.

Q : Quel est l'impact d'un contraste insuffisant ? R : Un contraste insuffisant empêche les utilisateurs de percevoir les informations que le contenu tente de transmettre.

Q : Quels obstacles à l'interaction sont créés par un mauvais contraste des couleurs (4 éléments) ? R : Les utilisateurs peuvent être incapables d'identifier leur position sur une page, l'état des éléments interactifs (liens et commandes), de lire le texte ou d'identifier le contenu des images.

Q : Vrai ou faux : la question du bon contraste des couleurs est peu important ? Pourquoi ? R : Faux. L'importance d'un bon contraste des couleurs ne doit pas être sous-estimée, car il y a beaucoup plus de personnes malvoyantes que de personnes aveugles.

Q : Quels utilisateurs peuvent avoir des difficultés à percevoir les couleurs sur un site web (3 réponses) ? R : Les personnes malvoyantes, de nombreux utilisateurs plus âgés, et ceux utilisant des écrans et des navigateurs textuels, à couleur limitée ou monochromes.

Q : Citez des cas courants où la couleur est utilisée seule pour transmettre des informations et engendre des problèmes ? R : L'indication des liens uniquement par une différence de couleur, la mise en rouge du texte des étiquettes des champs obligatoires des formulaires, l'utilisation de la couleur seule dans les graphiques ou les diagrammes, ou encore pour les filtres options par exemple sur un site de e-commerce.

Q : Pourquoi l'utilisation de la couleur seule pour indiquer les liens peut-elle être problématique ? R : Les liens peuvent être difficiles à identifier pour les utilisateurs ayant une faible perception des couleurs lorsqu'ils ne sont indiqués que par une différence de couleur.

Q : Comment rendre les liens plus reconnaissables pour les utilisateurs ayant des difficultés de perception des couleurs ? R : En combinant la couleur avec un soulignement ou une police de caractères différente pour rendre les liens plus reconnaissables.

Q : Quelles personnes peuvent être distraites par les mouvements et les animations sur un écran ? R : Les personnes souffrant de troubles de la vision, de la cognition et de l'apprentissage.

Q : Quel problème peut survenir si le contenu à l'écran est agrandi et qu'il y a des animations ? R : L'animation peut occuper tout l'écran, ce qui est désorientant.

Q : Quels sont les cas courants d'animations et de mouvements sur les sites web ? R : Les bannières publicitaires contenant des arrière-plans clignotants et des mouvements, le contenu d'un clip vidéo, les images animées ou les carrousels en mouvement continu.

Q : Quel effet les contenus clignotants peuvent-ils avoir sur les personnes photosensibles ? R : Les contenus qui clignotent à certaines fréquences pendant plus de quelques instants peuvent déclencher des crises d'épilepsie chez les personnes photosensibles.

Q : Pourquoi les carrousels avec mise à jour automatique peuvent-ils poser problème, même avec des boutons de pause ou d'arrêt ? R : Souvent, ces boutons sont délibérément petits, manquent de contraste et sont difficiles à trouver.

Q : Comment les animations et les mouvements dans les bannières publicitaires et les vidéos peuvent-ils affecter l'affichage sur un écran agrandi ? R : Les animations et les mouvements peuvent dominer l'écran. Par exemple, sur un site web d'information avec des publicités placées en haut, à gauche et à droite de la page, et une vidéo en lecture automatique en bas à gauche, le titre de l'article peut se perdre et seuls quelques mots peuvent être visibles lors d'un zoom avant.

Q : Qu'est-ce que le point de vue dans le contexte de la lecture sur un écran ? R : Le point de vue est l'endroit où vous lisez et où vous vous concentrez.

Q : Que peut-il se passer lorsque le contenu est agrandi et que l'endroit où l'on lit change ? R : Les gens peuvent se perdre si l'endroit où ils lisent change.

Q : Pourquoi les informations affichées dans des états de survol peuvent-elles être difficiles à lire pour certaines personnes ? R : Elles peuvent être difficiles à lire pour les personnes qui font un zoom sur le contenu ou qui utilisent un agrandissement d'écran lorsque la zone interactive est plus grande que la zone affichée lors du zoom.

Q : Pourquoi faut-il faire attention à regrouper les contenus connexes (par exemple un champ et son étiquette) ? R : Si les informations connexes ne sont pas regroupées, elles peuvent être perdues et devenir inutilisables lors d'un zoom.

Q : Pourquoi les interactions qui modifient le contenu ailleurs sur l'écran peuvent-elles poser problème avec un zoom avant ? R : Si le contenu fait l'objet d'un zoom avant, l'utilisateur ne peut voir qu'une petite partie de l'écran et peut ne pas savoir que le contenu a été mis à jour.

Q : Que peut-il se passer pour une personne qui cherche à filtrer des contenus et qui utilise un zoom ? R : Elle peut chercher un bouton « soumettre » qui n'existe pas, tandis que le contenu a été mis à jour sans que la personne n'ait pu le perçevoir.