Fermer

novembre 5, 2020

Comment trouver et résoudre les problèmes d'accessibilité de site Web courants


C'est les années 2020, nous ne devrions donc plus avoir à plaider en faveur de l'accessibilité. Un site accessible signifie que vous touchez plus de personnes, que les personnes que vous touchez (même les personnes handicapées) utilisent plus facilement votre site et vous ne serez pas poursuivi en justice. Et avec les outils et les ressources disponibles pour les développeurs et les concepteurs, il est maintenant plus facile que jamais de s'assurer que vous avez un site accessible.

Chez Polypane, l'accessibilité est l'un des trois domaines clés sur lesquels nous nous concentrons, les deux autres étant la performance et conception réactive. Si vous ne connaissez pas Polypane, c'est un navigateur Web spécialement conçu pour les développeurs Web. Il contient toutes sortes d'outils que vous ne trouverez pas dans les navigateurs classiques – des outils qui vous rendent plus efficace et efficient. Pour en savoir plus sur Polypane, consultez l'article d'introduction .

Dans cet article, nous nous concentrerons sur quelques problèmes d'accessibilité courants et trouverons des moyens de les vérifier et de les résoudre sur votre site pour nous assurer qu'ils aussi accessible que possible. Voici ce que nous allons examiner:

  • Mon texte présente-t-il suffisamment de contraste, et là où il n’en est pas, comment puis-je résoudre ce problème?
  • Comment mon site recherche-t-il les personnes ayant une déficience visuelle comme le daltonisme ou l'hypermétropie? Qu'en est-il des troubles de la situation comme la lumière du soleil ou un appareil en mode nuit?
  • La structure de ma page a-t-elle un sens pour les personnes qui en dépendent?
  • Comment puis-je m'assurer que je n'ai pas de problèmes de qualité de code sur mon site , et les mesures que j'ai prises pour améliorer l'accessibilité aident-elles réellement?
  • Mon site fonctionne-t-il bien sur des écrans plus petits?
  • Comment puis-je m'assurer que mon site fonctionne bien pour les utilisateurs qui préfèrent les couleurs sombres ou qui ne traitent pas bien avec

Contraste

Mon texte présente-t-il suffisamment de contraste, et là où ce n'est pas le cas, comment résoudre ce problème?

Idéalement, le contraste du texte est traité lors de la conception, avec des outils comme Stark facilitant le test des paires de texte et d'arrière-plan. Mais malheureusement, ce n’est pas toujours le cas. Bien qu'il existe de nombreux endroits en ligne pour vérifier une couleur de texte et un arrière-plan donnés (nous avons même construit notre propre testeur de contraste de couleur en ligne ), vos pages Web ont probablement de nombreuses couleurs et arrière-plans différents, et site complexe, vous ne connaissez peut-être pas toutes les combinaisons à l'avance.

Et cela permet d’ignorer très facilement ce texte gris qui est normalement affiché sur un fond blanc, mais qui a cet endroit où il est en gris clair ou une couleur de texte sombre avec une opacité qui ne fonctionne que pour certains arrière-plans.

Dans Polypane, presque toutes les interactions avec un élément effectueront une vérification rapide du contraste pour cet élément spécifique. Notre algorithme détermine les couleurs réelles du texte et de l'arrière-plan, en tenant compte de la couleur, de l'opacité et de toutes les couleurs de fond. Nous fusionnons ensuite cela dans le texte perçu et la couleur d'arrière-plan réels et comparons cela.

 comparaison du texte et de la couleur d'arrière-plan

Nous afficherons le résultat dans une info-bulle d'élément et dans le panneau des éléments avec d'autres informations telles que la famille et la taille de la police. De cette façon, le contraste de votre texte est toujours visible.

Cela dépend toujours du hasard, donc Polypane a également une superposition de contraste de couleur. Cela parcourra toute votre page et trouvera toutes les combinaisons uniques de texte et d'arrière-plan, les vérifiera toutes et ajoutera des étiquettes à chaque élément. Toutes les paires de contrastes passantes reçoivent une seule étiquette avec le contraste, et tout contraste défaillant reçoit une étiquette d'avertissement pour chaque instance, vous n'en oubliez donc aucune.

 Étiquettes de passage et d'avertissement sur un site Web [19659003] Nous avons simplifié la recherche des problèmes de contraste. Mais comment les résolvez-vous?

Si vous avez de la chance, vous pouvez utiliser une autre couleur de votre système de conception, mais si vous n'en avez pas, ou s'il s'agit d'une paire de couleurs unique, vous devez retourner chez votre concepteur ou utiliser un testeur de contraste en ligne et trouvez vous-même une autre couleur – un processus fastidieux et chronophage, et je voulais faire quelque chose.

 Un GIF montrant que des options de couleur valides apparaissent lorsque vous survolez une étiquette d'avertissement

Pour chaque paire de contrastes défaillante, Polypane calcule une couleur de texte suffisamment contrastée avec l'arrière-plan et suggère que pour vous pour une copie facile. Vous pouvez même le prévisualiser simplement en le survolant. (Le vérificateur de contraste en ligne que nous avons mentionné suggère également des couleurs améliorées pour vous.)

Troubles visuels et situationnels

Comment mon site recherche-t-il les personnes ayant une déficience visuelle comme le daltonisme ou l'hypermétropie? Qu'en est-il des troubles de la situation comme la lumière du soleil ou un appareil avec mode nuit?

Tous les visiteurs de votre site n'auront pas une vision parfaite. En fait, un grand nombre de vos visiteurs auront certainement une forme de déficience visuelle. Et bien que vous puissiez vous assurer de suivre les directives concernant la taille minimale du texte et de ne rien communiquer uniquement en utilisant des couleurs, il peut être facile d'ignorer un problème. La meilleure façon de susciter de l'empathie est d'essayer de simuler la façon dont les autres personnes perçoivent votre site.

 Un visuel montrant plusieurs résultats de test pour une page basée sur une déficience

Daltonisme

Entre 8 et 10% de les hommes du monde entier sont daltoniens (les femmes beaucoup moins, à 0,5%), et ils appartiennent à trois groupes différents: le daltonisme rouge-vert, le daltonisme bleu-jaune et le daltonisme complet. Polypane vous permet de simuler tout cela avec nos superpositions d'accessibilité.

Vous devez tester avec ces simulateurs pour vous assurer que vous ne comptez pas uniquement sur la couleur pour faire passer les messages. Par exemple, si vous ne faites que rendre la bordure d'un champ de saisie rouge lorsque vous faites une erreur, vous constaterez que c'est à peine perceptible ou imperceptible si l'un de ces simulateurs est activé. Vous devez plutôt fournir un deuxième indicateur non coloré comme un message d'erreur pour signaler le problème à votre utilisateur.

Le daltonisme rouge-vert est le plus courant et la grande majorité des personnes daltoniennes en souffrent. Chez Polypane, nous proposons quatre simulateurs différents: Deutéranopie, Deutéranomalie, Protanopie et Protanomalie. Les variantes -anomalie sont ici la version la moins sévère, tandis que les variantes -opia seraient classées comme daltonisme «complet» rouge-vert.

Comme son nom l'indique, les personnes atteintes de ce type de daltonisme ont du mal à voir la différence entre le rouge et le vert, mais aussi le marron et l'orange et certaines nuances de bleu et de violet. Vous pouvez voir comment, par exemple, la coloration courante des éléments «le vert est bon, le rouge est mauvais» peut devenir un problème.

Le daltonisme bleu-jaune est beaucoup plus rare, à seulement 0,0002% des hommes dans le monde. Son nom technique est «tritanopie», et la tritanomalie est la version la moins sévère. Ce type de daltonisme rend les gens moins sensibles à la lumière bleue, ce qui rend la partie bleue de tout ce qui est gris.

Enfin, le daltonisme complet est le plus rare avec 0,00003% des hommes dans le monde. Son nom propre est «Achromatopsie», «achromatomaly» étant la version la moins sévère où les gens voient des couleurs, mais elle est gravement émoussée.

Il convient de noter que les simulateurs de Polypane (et de n'importe quel simulateur en réalité) sont des approximations. En particulier, les variantes les moins sévères se situent dans une plage allant de presque imperceptible à proche de la chose complète, et le simulateur choisit donc un terrain d'entente.

 divers états de la page d'accueil de SitePoint

Vision floue

C'est donc le daltonisme, mais beaucoup plus de gens dans le monde souffrent d'une certaine forme d'hypermétropie (environ 10% dans le monde), ce qui peut rendre les écrans flous. Il peut s'agir d'une hypermétropie «régulière» ou d'autres déficiences visuelles qui brouillent la vision comme la cataracte et le glaucome.

La cataracte est la principale cause de cécité. Il obscurcit progressivement le cristallin de votre œil. Le glaucome est la deuxième cause la plus fréquente de cécité et diminue votre vision périphérique, suivie de votre vision centrale. On l'appelle parfois vision tunnel, bien que ce soit un terme générique pour un certain nombre de déficiences différentes.

En utilisant ces simulateurs, vous remarquerez à quel point il est difficile de lire du texte normal. Les personnes ayant une vision floue peuvent généralement le compenser avec des lunettes ou un grossissement, mais cela aide toujours à s'assurer que votre page reste numérisable. Assurez-vous que vos en-têtes sont suffisamment grands pour être lisibles avec ces simulateurs. Cela garantira que votre page pourra être numérisée sans trop de tension.

Troubles de la situation

Toutes les déficiences visuelles ne sont pas physiques. Certains sont également situationnels: ils ne se produisent que lorsque vous êtes dans une certaine situation. Polypane vous permet de simuler deux d'entre eux: la lumière du soleil et le mode nuit.

Les écrans sont difficiles à lire en plein soleil. Ils sont délavés, il y a des reflets et seul le contraste le plus important reste lisible. Tous les sites ne sont peut-être pas destinés à être utilisés en plein soleil, mais si vous avez un site mobile ou réactif, il finira par s'afficher sur un écran en plein soleil à un moment donné. C'est un bon simulateur pour vérifier si vos jolis contrastes subtils ne sont pas trop subtils.

Le mode nuit, par contre, est quelque chose qui est apparu lentement dans la plupart des systèmes d'exploitation au cours des dernières années, sur les ordinateurs et les appareils mobiles. Le mode nuit réduira la quantité de bleu sur un écran la nuit, rendant les écrans plus relaxants pour vos yeux et diminuant la suppression de la mélatonine. La mélatonine est ce qui vous rend somnolent et vous en faites plus à la fin de la journée lorsque la lumière naturelle autour de vous diminue. Si vous avez déjà continué à travailler sur votre ordinateur jusqu'à 2 heures du matin sans vous sentir fatigué du tout, la mélatonine supprimée est la raison.

Les modes nuit de la plupart des systèmes d’exploitation sont conçus pour éviter tout problème avec ce qui est affiché à l’écran, mais si vous comptez sur les jaunes pour donner un sens, ceux-ci risquent de se perdre lorsque tout est légèrement jaune.

Dyslexie

Environ 5% à 10% des personnes dans le monde souffrent d'une forme de dyslexie, qui est un trouble de la lecture. Bien que ce ne soit pas une altération de la situation, cela affecte la façon dont les gens perçoivent votre site visuellement.

Certains experts suggèrent que cela pourrait même être supérieur à 15%, car beaucoup de personnes ayant des troubles de lecture ne réalisent pas qu'elles l'ont. Puisqu'il n'y a aucun moyen de comparer notre expérience de lecture avec celle de quelqu'un d'autre, il est difficile de savoir quand votre expérience est significativement différente.

 Un GIF animé montrant l'expérience de la lecture de texte avec dyslexie, avec des lettres brouillées au hasard

Certaines personnes atteintes de dyslexie le décrivent comme voyant les lettres à l'écran danser, et c'est ce que notre simulateur de dyslexie montre. Les lettres de chaque mot sont mélangées et réorganisées au fur et à mesure que vous les regardez. Ils sont encore pour la plupart lisibles, mais ils demandent plus d’efforts que d’habitude.

Toutes les personnes dyslexiques n’expérimentent pas une lecture comme celle-ci, et l’utilisation du simulateur sert plus à gagner de l’empathie qu’autre chose. Néanmoins, si vous êtes bloqué sur un mot confus, parce qu'il est très long ou que les lettres peuvent former plusieurs mots, vous pouvez envisager de le remplacer par un mot plus simple et plus clair.

Structure de la page

La structure de ma page a-t-elle un sens pour personnes qui en dépendent?

La structure de votre page, comme vos titres et repères (éléments comme body nav main apart et section ) est plus importante que vous ne le pensez. De nombreuses technologies d'assistance, telles que les lecteurs d'écran, permettent aux utilisateurs d'afficher une liste de tous vos en-têtes, points de repère ou liens pour qu'ils puissent les parcourir rapidement et voir s'ils trouvent la section qu'ils recherchent.

Il est important d'avoir un ordre logique sur votre page, avec des en-têtes qui ne sautent pas un niveau et les points de repère appropriés (comme la navigation, les en-têtes et les pieds de page). Lorsque votre site est construit à partir de nombreux composants et modèles, vous ne pourrez peut-être pas obtenir un bon aperçu de tous les en-têtes et de leur ordre jusqu'à ce qu'ils soient rendus sur une page, et tous vos points de repère peuvent ne pas se retrouver avec un en-tête correspondant. .

 Afficher la structure de page de la page d'accueil de SitePoint

Le panneau Polypane Outline implémente l'algorithme de contour HTML5 pour visualiser la page et la structure des en-têtes. Cela permet de voir facilement où vous sautez un niveau de titre et s'il y a des points de repère avec un titre manquant.

Qualité du code

Comment puis-je m'assurer que je n'ai pas de problèmes de qualité de code sur mon site, et que les choses que j'ai faites pour améliorer l'accessibilité ont réellement aidé?

Il est indéniable que l'accessibilité est un vaste domaine. Cet article a déjà mentionné les problèmes de contraste, les différentes déficiences visuelles et situationnelles et la structure du document, mais cela ne fait qu'effleurer la surface. De nombreux éléments peuvent nuire à l’expérience d’une personne sur votre site, comme les attributs alt manquants pour les images, les liens sans texte et une langue de page non définie, pour n’en citer que quelques-uns. Ce serait bien si vous n’aviez pas besoin de parcourir une énorme liste de contrôle pour chaque page, mais que vous pouviez simplement faire apparaître les problèmes. Dans Polypane, il existe plusieurs façons de le faire: via notre panneau d'accessibilité intégré et deux superpositions – A11y.css et Tota11y.

 Un site avec plusieurs superpositions d'avertissement

A11y.css est un fichier CSS qui met en évidence les risques et erreurs possibles dans votre page – principalement pour l'accessibilité, mais aussi pour les erreurs qui peuvent causer des problèmes d'accessibilité comme un jeu de caractères manquant. Cela peut être un peu en face de vous, car il dessine des bordures épaisses autour de tout ce qu'il pense que vous devriez vérifier, même pour des choses qui sont exprès (comme des attributs vides alt ).

 Tota11y étant utilisé sur la page d'accueil de Vue.js

Tota11y par Khan Academy, d'autre part, est une collection de quelques outils différents. Il existe un outil pour répertorier les en-têtes et les points de repère (et mettre en évidence les violations de l'ordre), rechercher les problèmes de contraste (mais pas aussi approfondis que le vérificateur de contraste de couleur intégré à Polypane) et mettre en évidence tous les liens, images ou étiquettes pouvant causer des problèmes (en raison d'un contenu manquant , et manquant ou vide alt ou pour les attributs ).

 Affichage des problèmes d'accessibilité

Enfin, Polypane est livré avec son propre panneau d'accessibilité qui peut fonctionner une vérification d'accessibilité basée sur le jeu de règles Axe populaire. Lorsque vous exécutez un test, Polypane analyse l'intégralité de votre page et répertorie tous les problèmes dans quatre catégories distinctes: critique, sérieux, modéré et mineur.

Les problèmes critiques et graves sont les plus importants à résoudre. Les problèmes critiques sont des choses comme des textes manquants alt pour les images et une mauvaise utilisation d'ARIA.

Vous pouvez développer chaque problème trouvé pour obtenir plus d'informations sur les éléments concernés et le problème spécifique à chaque élément.

Il est important pour nous que ces erreurs puissent être résolues: qu’elles ne vous indiquent pas seulement ce qui ne va pas, mais vous donnent également des suggestions et des conseils sur la manière de les résoudre. Pour les images avec des attributs alt manquants, par exemple, nous expliquons la différence entre le contenu et les images de présentation, et pour les problèmes de contraste de couleur, nous suggérons une couleur qui a suffisamment de contraste.

Depuis le panneau d'accessibilité vous pouvez cliquer sur n'importe quel élément et l'afficher dans l'inspecteur d'éléments, où vous pouvez généralement résoudre le problème en mettant à jour les attributs ou le style. Une fois que vous avez fait cela, copiez-le dans votre source et le problème est résolu!

Fait intéressant, lors de la création du panneau d'accessibilité et de la vérification de nombreux sites Web différents avec lui, il était plus courant de voir ARIA utilisé à mauvais escient comme un problème. que l'absence d'ARIA étant le problème. L’accessibilité est un sujet complexe, et il est facile de penser que vous faites la bonne chose tout en le rendant un peu plus difficile. Les connaissances personnelles et les tests manuels sont inestimables, mais les tests automatisés fournissent un excellent contrôle ponctuel.

Petits écrans

Mon site fonctionne-t-il bien sur des écrans plus petits?

Il y a déjà beaucoup d'écrits sur le responsive design , mais c'est aussi un problème d'accessibilité important. D'une part, provoquer une barre de défilement horizontale sur des écrans de 320 pixels de large n'est pas autorisé selon la règle 1.4.10 des WCAG. Et sur des écrans plus larges, même s'il ne s'agit pas d'une violation, cela peut sembler assez discordant et déroutant.

Trouver la cause des débordements horizontaux peut être une véritable douleur, car la plupart du temps, on ne sait pas immédiatement quel élément en est la cause. Vous finissez par supprimer au hasard des éléments dans les outils de développement dans l'espoir de trouver l'élément. C'est beaucoup de travail fastidieux.

 Un GIF animé montrant un élément débordant identifié

Avec la superposition «mise au point» activée, Polypane détecte s'il y a une barre de défilement horizontale et trouve les éléments qui les provoquent. Il les colore ensuite en rouge pour que vous puissiez les trouver et les corriger, par exemple en vous assurant que l'élément parent a un débordement: masqué, ou en vous assurant que votre contenu correspond à l'espace disponible.

 Affichage d'une mise en page sur plusieurs petits appareils

Même si un écran mobile est plus petit que votre bureau, la taille des écrans augmentant, il devient plus difficile d'atteindre facilement toutes les parties de l'écran lorsque vous tenez votre téléphone dans une main. Avec la superposition d'accessibilité, nous montrons quelles parties de l'écran sont plus faciles ou plus difficiles à atteindre lorsque vous tenez le téléphone dans votre main (main droite ou main gauche).

En tenant votre téléphone dans une main, la partie inférieure de l'écran a tendance à être plus facile à atteindre que le haut, donc selon votre site. Placer des éléments importants en bas de l'écran pourrait en fait être plus convivial. Le placement d'éléments au bas de l'écran est très courant dans les applications, et nous voyons de plus en plus de sites Web et d'applications Web migrer vers ce modèle.

Mode sombre et mouvement

Comment m'assurer que mon site fonctionne bien pour les utilisateurs qui préfèrent les couleurs sombres ou qui ne gèrent pas bien le mouvement?

Le mode sombre, bien que tendance, est également une aide potentielle à l'accessibilité pour les personnes qui trouvent les écrans d'ordinateur lumineux douloureux ou difficiles à regarder. Un bon mode sombre peut être une bonne alternative à quelque chose comme les couleurs inversées (une fonctionnalité sur Mac) ou forcer les couleurs (une fonctionnalité dans Edge et sur Windows, qui force toutes vos couleurs à une palette spécifiée, généralement avec du texte clair sur un noir Contexte).

 Comparaison des modes clair et sombre côte à côte

Pour tester et implémenter votre mode sombre, avec «prefers-color-scheme: dark», vous pouvez basculer l'ensemble de votre système d'exploitation en mode sombre, plongez dans les outils de développement du navigateur ( settings menu> more tools > rendering > scroll down> choisissez «dark» dans l'émulation dropdown) ou dans Polypane, vous pouvez ouvrir la liste déroulante des options et cliquer sur «sombre» pour passer en mode sombre pour un seul volet, il est donc facile de le voir côte à côte avec votre conception claire.

De même, les personnes souffrant de troubles vestibulaires peuvent ressentir de l'inconfort avec le mouvement sur les sites Web, comme les grandes animations et les transitions. Pour eux, la requête média «préfère-mouvement réduit: réduire» peut être une solution. Lorsque cela est défini, il est important d'atténuer les animations et les transitions. Vous n’avez pas besoin de désactiver toutes les animations (bien que cela fonctionne aussi), mais essayez de la rendre moins swoosh et plus subtile. De même, si vous avez activé le défilement fluide, c'est un mouvement énorme, alors assurez-vous que "scroll-behavior" est réglé sur "auto", pas sur "smooth".

Le test dans Polypane est tout aussi simple: ouvrez le options et réglez l'option de préférence à mouvement réduit sur «réduire». Vous pouvez maintenant le tester seul ou en parallèle avec votre site Web habituel.

J'espère que cela vous donnera un aperçu du type de problèmes d'accessibilité que vous pouvez rencontrer, de la manière de les résoudre et de la manière dont Polypane essaie de le faire. les rendre plus faciles à résoudre. Polypane propose un essai gratuit qui vous permet d'exécuter votre premier audit d'accessibilité dans les cinq minutes suivant votre inscription.




Source link