Créer une conception Web plus accessible pour les personnes handicapées à l'aide de ces 3 scénarios

" avec un gestionnaire d'événements Javascript et aucun "tabindex =" 0 "" appliqué pour indiquer au navigateur d'y atterrir . Même si c'était le cas, si les bons comportements du clavier ne sont pas appliqués, appuyer sur la touche Entrée ou sur la barre d'espace ne soumettra pas le formulaire.

Il serait certainement possible d'utiliser une main différente pour sélectionner le bouton Soumettre, mais que se passerait-il si ce n'est pas une possibilité? Et si vous aviez besoin d'un appareil dépendant du comportement du clavier fonctionnant correctement pour utiliser un site Web? Pouvoir utiliser un clavier pour naviguer sur un site ou une application est important pour s'assurer que tous les utilisateurs peuvent l'utiliser de manière indépendante. Essayez de tester les sites Web que vous développez en utilisant uniquement un clavier et voyez si tous les éléments exploitables sont accessibles et s'ils ont un comportement de clavier correct. Pour plus d'informations, consultez le Guide du clavier de WebAim .

Scénario 2: Déficience visuelle avec assistance vocale

Imaginez que vous ayez une déficience visuelle et que vous utilisez un lecteur d'écran pour commander un produit alimentaire et que vous voulez vous assurer qu'il ne contient pas d'allergène comme les noix. Les ingrédients sont masqués jusqu'à ce qu'un utilisateur développe un bouton appelé «ingrédients» et affiche plus d'informations après la sélection. Le bouton annonce "ingrédients cliquables". À ce stade, il y a plusieurs choses qui pourraient se produire.

Ce lien pourrait vous amener à une page avec les ingrédients, une boîte de dialogue qui s'ouvre pour afficher les ingrédients, ou cela pourrait ouvrir un contenu développé qui montre les ingrédients. Supposons que vous ayez sélectionné "ingrédients", mais que vous n'entendez plus rien. Vous appuyez sur la tabulation et entendez le bouton «X», mais rien d'autre. Dans ce cas, une boîte de dialogue manquant «role =« dialog »» et un nom accessible (ex. Aria-label = «Unicorn Brownie Ingredients» ou aria-étiqueté en pointant vers un identifiant sur l'élément d'en-tête de la boîte de dialogue) s'est ouverte, mais sans ces commentaires, il est déroutant et difficile de comprendre ce qui se passe sur la page. À ce stade, vous pouvez abandonner ce site pour un site plus prévisible et plus convivial.

Sur un site que vous avez développé, essayez d'utiliser un lecteur d'écran pour parcourir une page. Il existe plusieurs options gratuites à utiliser, telles que les produits Apple avec VoiceOver intégré, NVDA pour Windows et ChromeVox sur le navigateur Chrome. De plus, Assistive Labs vous permettra d'utiliser plusieurs lecteurs d'écran différents et propose un essai gratuit. Ces options vous sont facilement accessibles pour vous faire une idée de ce que vous verrez.

Scénario 3: Optimiser les images et les graphiques pour une déficience visuelle

Vous êtes maintenant un élève malvoyant qui lit un étude en ligne importante pour votre thèse de synthèse. Vous pouvez utiliser un logiciel qui peut zoomer sur l'écran et fournir un haut niveau de contraste du texte pour le rendre plus facile à voir, ou vous pouvez choisir d'utiliser un lecteur d'écran. Il y a un graphique avec beaucoup d'informations importantes. Vous pouvez voir qu'il existe différentes couleurs, mais le graphique est incorporé en tant qu'image où le zoom est désactivé et n'est pas accessible.

La désactivation du zoom vous empêche de voir les informations. Vous activez le lecteur d'écran, mais il s'agit d'une image avec un texte alternatif de "graphique". Le texte environnant ne contient pas toutes les informations disponibles dans le graphique. Vous devez maintenant rechercher des moyens alternatifs d'accéder aux informations, ce qui prend plus de temps ou nécessite l'aide d'autrui. Essayez de zoomer sur les images ou d'exécuter un lecteur d'écran sur les images. Le zoom est-il désactivé ou les images sont-elles pixélisées? Y a-t-il des informations importantes dans les graphiques qui ne sont pas disponibles autrement? Tous les tableaux et graphiques sont-ils accessibles aux lecteurs d'écran? Pour plus d'exemples, consultez ces cartes accessibles en utilisant de Paul J Adam . Il est important pour tous les utilisateurs de s’assurer que toutes les pages, quel que soit leur contenu, contiennent une conception et un balisage appropriés.

Imaginez maintenant que vous êtes un étudiant daltonien et que vous lisez une étude en ligne sur rechercher. Il y a un graphique avec beaucoup d'informations importantes qui se différencient par des couleurs. Vous pouvez voir que certaines zones sont plus sombres ou plus claires que d’autres, mais il y a certaines zones où il est difficile de faire la différence entre deux couleurs différentes. Cela rend difficile, voire impossible, l'interprétation des données. Il n'y a pas non plus de texte adjacent contenant toutes les données du graphique. Vous devez maintenant rechercher d'autres moyens d'accéder aux informations, ce qui prend plus de temps ou nécessite l'aide d'autrui. Bien que le choix des couleurs soit généralement laissé à l'équipe de conception, il est important de comprendre que tous les utilisateurs ne peuvent pas dépendre des couleurs pour transmettre des informations et qu'un contraste de couleur suffisant est nécessaire pour comprendre les informations. Il est important de respecter les critères des Règles pour l'accessibilité du contenu Web (WCAG) pour les niveaux de contraste pour aider les utilisateurs à lire et à différencier les ensembles de contenu.

Essayez d'utiliser l'extension Colorblindly Chrome sur un site vous vous êtes développé pour mieux comprendre à quoi cela pourrait ressembler pour une personne daltonienne. Il a des paramètres pour différents types de daltonisme et vous donnera une idée de la façon dont ces utilisateurs voient votre site. Bien que la décision finale concernant les couleurs et leur placement puisse être décidée bien avant le moment du développement, il est important de comprendre pourquoi ces décisions sont importantes et pourquoi une correction est nécessaire si elle n'est pas prise en compte dès le départ.

Nous devons Comprendre pour que les utilisateurs soient compris

L'accessibilité est plus qu'une simple exigence légale. Garder à l’esprit la manière dont une personne handicapée interagirait avec la page et les défis posés lorsque le balisage et la conception ne sont pas accessibles permet de créer un niveau de compréhension et de solidifier le «pourquoi» des exigences d’accessibilité. Avec une dépendance accrue vis-à-vis des applications Web pour effectuer les tâches quotidiennes, il est important de se rappeler pourquoi la mise en œuvre de l'accessibilité est si importante et le résultat final. Pour plus d'informations sur le développement d'une conception accessible avec vos sites Web, contactez nos experts en conception d'expérience aujourd'hui .