wave accessibility testing tool tutorial
Tutoriel WAVE Web Accessibility Tool: Comment utiliser WAVE Chrome et Firefox Extension
Barre d'outils d'accessibilité Web a été expliqué en détail dans notre précédent tutoriel. Ce tutoriel est la continuation du premier de cette série, vérifiez-le ici - Test d'accessibilité Web - partie 1 .
Dans ce didacticiel, nous avons examiné quelques concepts fondamentaux de ce qu'est l'accessibilité et comment l'évaluer à l'aide d'outils de test d'accessibilité.
Dans ce didacticiel, nous verrons quelques autres outils d'accessibilité tels que la barre d'outils WAVE, l'outil d'accessibilité JAWS, les techniques et les détails.
[image la source]
Ce que vous apprendrez:
VAGUE(Outil d'évaluation de l'accessibilité Web)
L'outil WAVE est un outil d'évaluation de l'accessibilité Web - une barre d'outils pour Navigateur Firefox.
Il est important de noter que WAVE ne peut pas vous dire si votre contenu Web est accessible; seul un humain peut déterminer la véritable accessibilité. Mais WAVE peut vous aider à évaluer l'accessibilité de votre contenu Web.
Toutes les évaluations se font directement dans le navigateur et aucune information n'est envoyée aux serveurs WAVE. Cela garantit des rapports d'accessibilité 100% privés et sécurisés.
Pour télécharger la barre d'outils d'accessibilité Web WAVE, accédez à http://wave.webaim.org/toolbar/ et téléchargez-le en F navigateur irefox . Assurez-vous d'ouvrir l'URL de téléchargement dans le navigateur Firefox car la barre d'outils WAVE ne prend en charge que Firefox.
Comment utiliser la barre d'outils d'accessibilité Web WAVE
Voici les fonctionnalités que nous pouvons utiliser lorsque nous travaillons sur le navigateur Firefox:
#1) Sélectionnez le site Web http://www.easports.com/ , puis cliquez sur «Erreurs, fonctionnalités et alertes», vous trouverez la page avec les alertes d'accessibilité et les erreurs de couleur jaune. Passez la souris sur les images pour voir les détails des alertes.
( Remarque : cliquez sur n'importe quelle image pour une vue agrandie)
#deux) Cliquez maintenant sur «Vue de la structure / commande», vous obtiendrez la page avec les détails du cadre en ligne.
telecharger VPN Japon
# 3) Cliquez maintenant sur 'Affichage texte seulement', le site s'affichera sans images, styles et mises en page.
# 4) Les icônes «Vue d'ensemble» de la barre d'outils vous permettront de savoir si les titres sont dans l'ordre ou non.
# 5) L'icône «Réinitialiser la page» actualisera la page.
# 6) Cliquer sur «Désactiver le style» supprimera les styles CSS de la page.
# 7) Le bouton «Icônes» affichera une liste de toutes les icônes WAVE avec des détails supplémentaires, des informations et des recommandations.
Vous pouvez également évaluer l'accessibilité du site Web sans télécharger l'outil Wave et l'utiliser directement en ligne.
Étapes pour vérifier l'accessibilité du site Web
Étape 1) Cliquez sur URL: http://wave.webaim.org/
Étape 2) Entrer le Adresse de la page Web dans le texte boîte et appuyez sur Entrée. Nous allons utiliser avec par exemple. Entrez donc le site www.facebook.com dans la zone de texte et cliquez sur le bouton Entrée.
Étape 3) Vous trouverez des détails récapitulatifs sur le côté gauche de la navigation.
- Les erreurs seraient affichées en rouge avec un décompte. Dans mon cas, cela indique 13.
- Les alertes seraient affichées en jaune avec un nombre de 13.
- Les caractéristiques seraient en vert avec un nombre de 10.
- Les éléments structurels seraient au nombre de 6 de couleur bleue.
- HTML5 et ARIA seraient 15 en couleur violette.
- Les erreurs de contraste seraient de 14 en couleur noire.
Cliquer sur chaque icône vous donnera plus d'informations sur les éléments comme indiqué ci-dessus pour l'alerte (au centre de la page).
Examinons maintenant une autre catégorie d’outils:
Validateurs d'accessibilité de page Web gratuits:
Quelques autres meilleurs outils de vérification d'accessibilité Web:
- Outil d'évaluation de l'accessibilité open source AChecker
- PowerMapper
- Valet d'accessibilité
- EvalAccess
- MAGENTA
Outils de handicap visuel
La déficience visuelle fait référence à une perte de vision. Il existe différents types de troubles de la vue:
- Cécité
- Vision basse ou restreinte
- Daltonisme
Les utilisateurs malvoyants utilisent un logiciel de technologie d'assistance qui lit le contenu à haute voix.Par exempleJAWS pour les systèmes d'exploitation Windows, NVDA pour les systèmes d'exploitation Windows, Voice Over pour Mac. L'utilisateur UA avec une vision faible peut également agrandir le texte avec un paramètre de navigateur ou un paramètre magnifique du système d'exploitation. Nous allons apprendre ces fonctionnalités à l'aide des loupes et des outils JAWS.
A) Loupes
1) Zoomer la loupe du texte agrandit tout sur l'écran de votre ordinateur et rend l'application facile à voir et à utiliser. Vous pouvez le télécharger sur ce lien .
Pour avoir une bonne idée de comment cela fonctionne, nous vous recommandons vivement de télécharger une version d'essai gratuite et d'expérimenter.
2) Loupe de la fenêtre agrandit également différentes parties de l'écran. Nous pouvons l'ouvrir en cliquant sur le bouton Démarrer de votre bureau, puis en tapant Loupe. Cliquez sur le programme Magnifier. Lorsque vous passez la souris sur la page Web, cet outil agrandit la taille de l'écran et s'affiche.
3) Les utilisateurs d'ordinateurs aveugles, qui ne peuvent pas utiliser un écran d'ordinateur normal, utilisent un afficheur braille ou un terminal braille pour lire le texte.
Selon Wikipédia , un afficheur Braille actualisable ou un terminal Braille est un dispositif électromécanique pour afficher des caractères Braille, généralement au moyen de broches à bout rond soulevées à travers des trous dans une surface plane.
B) JAWS - Accès à l'emploi avec la parole
JAWS est un lecteur d'écran utilisé pour tester les pages Web sur le système d'exploitation Windows qui permet aux utilisateurs visuellement endommagés de lire l'écran. JAWS prend en charge toutes les versions de systèmes d'exploitation et fournit un affichage braille actualisable.
Voici les commandes clavier pour utiliser JAWS:
Les fonctions de base testées à l'aide de JAWS sont:
- JAWS fournit le nombre de frappes pour parcourir les pages Web. Par exemple, les touches fléchées, les touches Page précédente et suivante, Début, Fin et plusieurs autres touches de navigation JAWS.
- Liens, images et cartes d'images: JAWS fournit des frappes pour naviguer d'un lien à un autre dans la page Web.
- Champs et contrôles de formulaire HTML : JAWS fournit des frappes pour naviguer entre les éléments du formulaire
- Cadres HTML : Parcourir les cadres avec le clavier.
- les tables : Parcourir les cellules du tableau
Il s'agit d'un bref aperçu des différentes techniques et outils utilisés pour réaliser l'évaluation de l'accessibilité.
Conseils de test d'accessibilité pour les développeurs et les testeurs
- Toutes les images actives ont-elles un texte alternatif qui indique ce que fait le lien ou le bouton?
- Toutes les images décoratives et les images redondantes ont-elles un texte alternatif nul (alt = ””)?
- Toutes les images d'information ont-elles un texte alternatif qui fournit les mêmes informations que les images fournies?
- La page est-elle organisée avec des titres? Sont-ils marqués comme des en-têtes?
- Pouvez-vous accéder à tout en utilisant le clavier?
- Votre page sera-t-elle lue dans un ordre logique dans un lecteur d'écran?
- Est-il clair quel élément est mis au point lorsque vous utilisez l'accès au clavier?
- Toutes les informations importantes d'une vidéo sont-elles disponibles via l'audio standard ou via une description audio ajoutée?
L'équipe de développement peuvent s'assurer que leur produit est conforme à l'accessibilité par l'inspection du code et les tests unitaires.
Cas de test typiques:
- Assurez-vous que toutes les fonctions sont disponibles via le clavier uniquement (n'utilisez pas la souris)
- Assurez-vous que les informations sont visibles lorsque le paramètre d'affichage est changé en modes de contraste élevé.
- Assurez-vous que les outils de lecture d'écran peuvent lire tout le texte disponible et que chaque image / image est associée à un texte alternatif correspondant.
- Assurez-vous que les actions clavier définies par le produit n'affectent pas les raccourcis clavier d'accessibilité.
Conclusion
L'accessibilité Web offre de nombreuses opportunités aux utilisateurs handicapés. Cependant, nous devons reconnaître le fait qu'il est difficile de fournir un accès complet pour tous les types de handicaps ou de difficultés qui pourraient empêcher un utilisateur d'accéder au contenu d'un site Web.
Des mesures peuvent être prises, mais elles peuvent ne pas être à 100%. Si nous suivons les normes décrites dans cet article dès la phase initiale du développement, nous pouvons facilement créer un site Web accessible pour la plupart des utilisateurs.
N'hésitez pas à suggérer d'autres outils et astuces de test d'accessibilité dans les commentaires ci-dessous.
Tutoriel PREV | PREMIER Tutoriel
lecture recommandée
- Tutoriel WAT (Web Accessibility Toolbar) pour les tests d'accessibilité
- Tutoriel de test d'accessibilité (un guide complet étape par étape)
- Tutoriels Eclipse détaillés pour les débutants
- Tutoriel Geb - Test d'automatisation du navigateur à l'aide de l'outil Geb
- Meilleurs outils de test de logiciels 2021 [Outils d'automatisation des tests QA]
- Top 20 des outils de test d'accessibilité pour les applications Web
- Tutoriel sur les tests destructifs et les tests non destructifs
- Test fonctionnel vs test non fonctionnel