Améliorer l’expérience utilisateur Web pour les malvoyants

Question

J'écoutais un épisode récent de Hanselminutes où Scott Hanselman discutait de l'accessibilité dans les applications Web et cela m'a fait réfléchir à l'accessibilité dans mes propres applications.

Nous comprenons tous l'importance du balisage sémantique dans nos applications Web en ce qui concerne l'accessibilité, mais qu'en est-il des autres améliorations simples qui peuvent être apportées pour améliorer l'expérience utilisateur des utilisateurs handicapés ?

Dans l'épisode, il y a eu plusieurs fois où je me suis giflé le front et j'ai dit "Bien sûr !Pourquoi ne l'ai-je pas fait ? » En particulier, Scott a parlé d'un site Web qui plaçait un lien caché en haut d'une page Web indiquant « passer au contenu principal ».Le lien ne sera visible que par les personnes utilisant des lecteurs d'écran et permet à leur lecteur d'écran de passer au-delà des menus et autres contenus secondaires.C'est une amélioration tellement évidente, mais il est facile de ne pas y penser.

L'accessibilité et l'expérience utilisateur globale ne se limitent pas à la simple création d'un code XHTML valide et à son abandon.

Quelles sont vos astuces simples pour améliorer l’expérience utilisateur des malvoyants ?

Answer 1

Vérifier Crocs

Crocs est un outil intégré au navigateur pour Firefox qui émule ce qu'un lecteur d'écran « voit » lorsqu'il visite une page Web.Sa fonction est simple :pour afficher une transcription de ce qu'un lecteur d'écran lira à un utilisateur lorsqu'une page Web est visitée.C'est un outil utile pour analyser rapidement si vous avez structuré votre contenu de manière efficace afin qu'il soit compréhensible et utilisable par les personnes malvoyantes, sans vous obliger à apprendre à utiliser (et à acheter) une application de lecture d'écran telle que JAWS ou Windows Eyes.

Answer 2

Créer des pages accessibles est une chose à laquelle il est difficile de penser si vous ne l'avez jamais fait.Cependant, une fois que l’on a appris les concepts de base, cela est très facile à réaliser dans 95 % des cas.Je vais surtout répéter ce que d'autres ont dit, mais :

1. Utilisez uniquement des tableaux pour les données tabulaires
2. Assurez-vous d'utiliser les outils sémantiques mis à votre disposition via HTML.Cela signifie utiliser TH avec un attribut scope.Utilisez <em> au lieu de <i> et <strong> au lieu de <b>.Utilisez le acronyme et abréviation Mots clés.Utilisez des listes de définitions.Je peux développer ces choses si quelqu'un le souhaite.

3. L'une des choses les plus importantes est d'utiliser le étiquette balise sur les champs de saisie.Pour chaque champ de saisie, bouton radio, case à cocher et saisie de texte, vous devriez avoir :

   <label for="username">Nom d'utilisateur :</label><input name="username" />

4. Ajoutez un "passer la navigation" ou "passer à la navigation" en fonction de l'endroit où se trouvent les gros morceaux de texte.Si vous travaillez sur un site gouvernemental, cela devrait être une seconde nature : tout ce que vous créez vous permet d'ignorer les informations répétitives.

5. N'utilisez pas de couleurs pour mettre l'accent.

6. Assurez-vous que tout votre texte est redimensionnable.Cela signifie à peu près ne pas utiliser "px" dans votre CSS.

7. Je soulignerai à nouveau ceci : créer des pages sémantiques. Utiliser H balises pour vos titres.Utiliser ul/li pour la navigation.

8. Utilisez le alt attribut sur tous images.Si vous avez un gif d'espacement...Bien..ne le faites pas.Sinon, expliquez de quoi il s’agit et quelle est sa signification par rapport au contenu auquel elle est associée.n'utilisez pas "un graphique" comme balise alt.Utilisez le « Graphique des finances depuis le début de l'année :5 000 $ au premier trimestre, 4 000 $ au deuxième trimestre, 8 000 $ au troisième trimestre" ou quelque chose de similaire.

9. Fournir des sous-titres ou des transcriptions pour tous les composants audio et vidéo

La clé ici est de fournir à ceux qui ont des capacités visuelles, auditives et moteur personnes handicapées vivent la même expérience que celles ayant des capacités physiques standard.Si vous ne pouvez pas accéder à un champ, un lecteur d'écran ne le peut pas non plus.Si vous ne pouvez pas cliquer sur le texte à côté d'une case à cocher pour la sélectionner, le lecteur d'écran ne sait pas que le texte est lié à la case à cocher.

Vous devez fréquemment consulter votre site sans feuilles de style (ctrl-shift-s si vous avez Firefox et le Barre d'outils du développeur Web) pour voir si la page a du sens.Si cela n’a pas de sens pour vous en tant que personne voyante, cela n’aura pas de sens pour quelqu’un qui utilise un lecteur d’écran.

Answer 3

Cela fait un moment que je n'occupe pas un poste où nous devions respecter l'article 508, mais voici ce dont je me souviens qui n'a pas été évoqué par les autres affiches...

1. Utilisez uniquement des tableaux pour les données.N'utilisez pas de tableaux pour la mise en page si vous pouvez l'éviter.
2. Lorsque vous utilisez des tableaux pour les données, vos en-têtes de colonnes doivent être imbriqués dans des balises TH et vous devez utiliser les attributs de titre et de portée.Vos balises de tableau doivent utiliser l'attribut summary.
3. Les images doivent toutes avoir une valeur pour l'attribut alt qui décrit ce qui se passe dans l'image et si l'image ne sert à rien (c'est une image de calage ou quelque chose de similaire), alors l'attribut alt doit être défini sur une chaîne vide.
4. Essayez d'utiliser un lecteur de synthèse vocale et/ou naviguez uniquement via le clavier et/ou désactivez les feuilles de style.Je pense que vous devez acheter JAWS, mais je suis sûr qu'il existe des lecteurs d'écran gratuits.Vous devez découvrir un site via un lecteur d'écran pour vraiment comprendre à quel point il est difficile de naviguer dans la plupart des pages Web sans les signaux interprétés par les lecteurs d'écran.

Answer 4

« Malvoyant » inclut le daltonisme.J'avais l'habitude de travailler avec quelqu'un qui ne pouvait pas très bien distinguer le rouge du vert, donc toutes les applications utilisant une interface de type feu de circulation étaient très difficiles à utiliser pour lui.Dans le secteur dans lequel nous travaillions, les alertes en lignes étaient codées par couleur, donc une autre forme d'affichage lui était utile, comme une colonne supplémentaire dans la ligne avec le texte du type d'alerte ("urgence", "avertissement", etc. ).

Answer 5

Le plus gros problème avec les lecteurs d’écran réside généralement dans les tableaux permettant de positionner les éléments sur votre page.Les lecteurs d’écran ne peuvent pas vraiment les gérer.Mettez les éléments dans les div dans votre code HTML et placez-les dans un ordre raisonnable.Positionnez ensuite les div sur votre page avec CSS.Utilisez des tableaux pour afficher le contenu qui devrait figurer dans un tableau.

Answer 6

Le code de nombreuses pages Web est structuré comme suit :

1. Entête
2. Navigation supérieure
3. Navigation à gauche
4. Contenu
5. Bas de page

Lorsqu'il est structuré de cette manière, le lien caché pour « Passer au contenu principal » est bénéfique.Cependant, avec la mise en page CSS, vous pourrez peut-être réorganiser cela afin d'avoir :

1. Contenu
2. Entête
3. Navigation supérieure
4. Navigation à gauche
5. Bas de page

Vous utilisez ensuite le positionnement CSS et les flotteurs pour déplacer ces différents éléments sur l'écran afin de donner à la page l'apparence que vous souhaitez.

Le principal avantage de structurer une page Web de cette manière est que si le navigateur ne prend pas en charge le CSS, le contenu apparaît en premier sur la page.En plus des lecteurs d’écran, cela est bénéfique pour les appareils mobiles et les robots des moteurs de recherche.

Answer 7

Pour les malvoyants, nous devons nous assurer que le texte n’est pas trop petit et ne contraste considérablement avec la couleur d’arrière-plan.Nous devons également nous assurer que le texte est redimensionnable en utilisant des unités de dimensionnement relatives telles que emplutôt que des unités absolues comme px(même si, à mon avis, cela devient de moins en moins problématique car les navigateurs privilégient de plus en plus le zoom sur le redimensionnement du texte).

Pour les utilisateurs de lecteurs d'écran, il est utile d'avoir une bonne idée de la manière dont les lecteurs d'écran sont réellement utilisés.L'article suivant présente des lignes directrices basées sur des observations de personnes aveugles naviguant sur le Web à l'aide de lecteurs d'écran ;il est un peu obsolète maintenant, mais vous donne une bonne idée de ce qui aidera les utilisateurs de lecteurs d'écran et de ce qui ne le sera pas :

http://redish.net/content/papers/interactions.html

De plus, la Fondation américaine pour les aveugles a un section de leur site Web dédiée aux conseils destinés aux développeurs Web sur la façon de répondre aux utilisateurs malvoyants.

Outre les malvoyants, nous devons penser à ceux qui ont un handicap qui les empêche d'utiliser une souris, ainsi qu'à ceux qui souffrent de handicaps neurologiques.Si quelqu'un peut fournir des ressources donnant des conseils sur la façon de répondre à ces personnes, ce serait formidable.