4 outils utiles pour résoudre les problèmes d'accessibilité Web

Il est important pour votre entreprise de disposer d'un site Web accessible et d'autres ressources numériques mais maintenir l'accessibilité signifie intégrer des outils utiles à utiliser en permanence dans vos processus de conception et de développement et, en fin de compte, profiter à vos utilisateurs finaux.

Voici quelques outils d'accessibilité à prendre en compte.

Outil 1: Axe

Axe est typiquement le DevTool standard utilisé dans les tests d'accessibilité pour toute extension Chrome / Firefox. Cet outil peut analyser une page pour les problèmes d'accessibilité en quelques minutes dans votre navigateur. La configuration est très simple, en fait, tout ce que vous avez à faire est d'installer l'extension ax directement depuis la boutique en ligne de Google Chrome.

Suivez les étapes ci-dessous pour tester la page Web avec l'outil:

1. Accédez à la page que vous souhaitez tester
2. Ouvrez les DevTools de Chrome (Ctrl + Maj + I) [19659017]
3. Sélectionnez l'onglet Axe
4. Cliquez sur le bouton Analyser

Axe est un excellent outil pour aider à identifier les problèmes, mais fournit également tout ce dont vous pourriez avoir besoin pour résoudre les problèmes, tels que: [19659023] Une liste complète des problèmes

Outil 2: Voix off Non-Visual Desktop Access (NVDA)

Logiciel de lecture d'écran lit le contenu en ligne à l'utilisateur final, généralement ceux qui sont aveugles ou malvoyants, mais qui peuvent également être utilisés par des personnes ayant d'autres handicaps. Bien qu'il existe plusieurs lecteurs d'écran gratuits disponibles, NVDA pour Windows n'a pas de limite de temps de 40 minutes par utilisation, ce qui en fait une excellente option à utiliser quotidiennement pour tout utilisateur ayant une déficience visuelle. [19659031] Le logiciel NVDA fournit aux utilisateurs une variété de commandes pour les aider dans leur expérience Web, telles que:

1. Activer NVDA: Contrôle + Alt + N
2. Désactiver NVDA: Insérer + Q
3. Arrêter la lecture: Contrôle
4. Activer un lien: Onglet
5. Activer un bouton: Entrée ou barre d'espace
6. Aller à l'en-tête suivant: H
7. Aller au niveau d'en-tête suivant (1-6): 1-6
8. Aller au repère / région suivant: D
9. Afficher la liste de tous les liens, en-têtes, champs de formulaire, boutons et repères: Insérer + F7
10. Aller au tableau suivant: T

NVDA fournit plusieurs autres commandes à utilisateurs ayant une déficience visuelle, leur permettant de continuer à accéder au site Web de votre organisation sans difficulté et vous permettant de profiter en permanence à tous

Les avantages d'un lecteur d'écran

Les particuliers peuvent utiliser le logiciel de lecture d'écran pour lire le contenu des fichiers PDF, Word et des pages Web. Les lecteurs d'écran lisent le texte de la page en commençant en haut à gauche de la page et décrivent les éléments importants et le contenu de la page, tels que le nombre d'en-têtes, de liens et de champs de formulaire.

Les utilisateurs peuvent également utiliser la navigation au clavier pour accéder à certains éléments et la touche de tabulation pour se déplacer entre les liens et les champs de formulaire sur une page. De plus, les personnes peuvent utiliser les touches fléchées haut et bas pour se déplacer entre les lignes de texte ou pour passer à l'élément suivant.

Outil 3: Analyseur de contraste de couleur

Le contraste de couleur est la différence de luminosité ou de valeurs tonales entre le premier plan et le Contexte. Essentiellement, la différence entre la valeur de la couleur de premier plan, qui est généralement la couleur de votre police, et la couleur d'arrière-plan de l'écran. Le contraste est une propriété qui nous aide à voir et à distinguer la figure du fond.

Exigences de contraste

Les directives d'accessibilité du contenu Web 2.0 ( WCAG ) exigent un rapport de contraste de 4,5: 1 entre les couleur de premier plan (couleur du texte) et couleur d'arrière-plan pour atteindre le niveau AA pour une taille de police standard de 12 pt. Police de caractère. Les gros caractères ou le texte à grande échelle peuvent avoir un rapport de contraste de 3: 1. La grande taille d'impression est considérée comme 14 pt., Soit environ 18,66 px en gras, ou 18 pt. (24 px) ou plus grand texte non gras.

Les exigences de rapport de contraste sont les mêmes pour WCAG 2.1 pour le niveau AA. WCAG 2.1 a une norme supplémentaire (1.4.11) pour les composants d'interface utilisateur et les objets graphiques qui nécessite un rapport de contraste de 3: 1 par rapport aux couleurs adjacentes pour passer le niveau AA.

Évaluation de ces avantages

Le WebAIM Contrast Checker est une ressource populaire et gratuite que votre entreprise peut utiliser pour déterminer si le contraste des couleurs de votre site Web respecte les directives de taux de contraste appropriées. Voici comment vous pouvez vérifier si votre site Web respecte les directives de contraste:

1. Allez sur le site Web webaim.org
2. Entrez la couleur de premier plan (Exemple #ffffff)
3. Entrez la couleur d'arrière-plan (Exemple # 6E9F3C)
4. Vérifiez votre résultat pour les objets normaux, grands et graphiques. Si les contrastes de couleurs AA et AAA ne réussissent pas, il est important de discuter avec l'équipe de conception UX de votre entreprise des prochaines étapes.

Outil 4: Maintenir l'accessibilité du clavier

Le test avec un clavier est une partie essentielle de toute évaluation d'accessibilité . Il existe plusieurs commandes pour les interactions en ligne les plus courantes, les frappes standard pour l'interaction et des informations supplémentaires sur les éléments à prendre en compte lors des tests, tels que:

1. Accédez aux éléments interactifs: Tab
   1. Les indicateurs de mise au point du clavier doivent être présents.
2. Maj + Tab
   1. Cela va naviguer vers l'arrière. Cela garantit que l'ordre de navigation sera logique et intuitif.
3. Lien: Entrée
   1. Cela activera le lien.
4. Bouton: Entrée ou barre d'espace
   1. Cela activera le bouton et garantira que les éléments avec le rôle ARIA = "bouton" peuvent être activés avec les deux commandes de touches.
5. Case à cocher: barre d'espace
   1. Cela va cocher / décocher une case. Des cases à cocher doivent être utilisées lorsqu'une ou plusieurs options dans un groupe peuvent être sélectionnées.

Il est également possible d'effectuer des tests manuels en cas de problèmes d'accessibilité de votre site Web, et nos experts en accessibilité sont plus que capables de vous aider à démarrer.

Utilisez le bon ensemble d'outils Web [19659030] Comprendre l'importance de l'accessibilité du Web est une obligation morale et éthique et aide à éliminer les obstacles pour les utilisateurs handicapés. Optimiser votre site pour qu'il soit entièrement accessible offre des avantages pratiques tels qu'un meilleur classement des moteurs de recherche, des visiteurs réguliers et des utilisateurs fidèles. Pour en savoir plus sur la conception accessible, lisez notre série UX pour la conception accessible téléchargez notre guide, Expériences accessibles numériquement: pourquoi c'est important et comment les créer et contactez notre expérience d'experts en conception aujourd'hui .

À propos de l'auteur

Apurva Bele est un consultant technique principal travaillant en tant que développeur front-end avec l'équipe DCS. Il aime apprendre et explorer de nouveaux cadres et outils liés à l'interface utilisateur, et il aime partager ses connaissances avec l'équipe.

Plus de cet auteur