wat tutorial
Tutoriel WAT ou la barre d'outils d'accessibilité Web pour les tests d'accessibilité:
Outils de test d'accessibilité ont été expliqués en détail dans notre précédent tutoriel dans le Série de tests d'accessibilité .
WAT (barre d'outils d'accessibilité Web) - est une barre d'outils pour Navigateur Internet Explorer et autres navigateurs - Il peut aider à évaluer une page Web pour la conformité aux directives d'accessibilité du contenu Web version 2 (WCAG 2.0).
Comment utiliser WAT Tool?
S'il te plaît téléchargez et installez-le ici .
Après une installation réussie, vous verrez un outil d'accessibilité Web supplémentaire juste en dessous de la barre d'adresse.
Nous allons l'apprendre avec l'aide du site Web d'EAsports - http://www.easports.com.
# 1) Titre de la page - Nous pouvons vérifier la barre de titre de la page dans la barre de titre de la fenêtre ou la barre de titre de l'onglet des navigateurs. En survolant l'onglet avec la souris, vous obtiendrez les informations sur le titre de la page.
Entrez l'URL http://www.easports.com et vérifiez le titre de la page dans la barre de titre de l'onglet en survolant la souris.
# 2) Couleur - La couleur du site Web doit passer dans Color Contrast Analyzer.
Il existe 3 niveaux de conformité différents pour déterminer le rapport de couleur, c'est-à-dire les niveaux A, AA et AAA.
Il doit obtenir un laissez-passer sur AA ou AAA .
«A» représente un faible niveau d'accessibilité, «AA» représente un niveau d'accessibilité moyen et «AAA» représente le plus haut niveau d'accessibilité.
Entrez l'URL http://www.easports.com i Dans la barre d'outils, cliquez sur l'onglet Couleur et sélectionnez Analyseur de contraste et vérifiez.
# 3) Titres - Les titres donnent un aperçu efficace du contenu de la page. Toutes les pages doivent commencer par des en-têtes H1 ou H2. Le texte de l'en-tête doit être plus gros, en gras et balisé dans les pages Web. Et la page doit commencer par «h1» et sur chaque page, il doit y avoir au moins un titre.
Pour vérifier la structure des titres, cliquez sur http://www.easports.com et sélectionnez l'onglet Structure, puis cliquez sur la structure d'en-tête et vérifiez. Il vous donnera tous les détails du titre de la rubrique. Il examinera également si les en-têtes sont correctement imbriqués ou non.
# 4) Texte alternatif pour les images - L'attribut alt est pris en charge dans tous les principaux navigateurs. Toutes les images doivent avoir un texte Alt associé. Il affiche la valeur de l'attribut alt sous forme d'info-bulle lorsque nous survolons l'image. Cela fournit des informations de remplacement sur une image si l'image ne peut pas être affichée.
Entrez l'url http://www.easports.com, Cliquez sur afficher les images et vérifiez si le texte alternatif est disponible pour les images.
Vous obtiendrez ci-dessous le pop-up:
Vous obtiendrez les détails mentionnés ci-dessus.
# 5) Ordre des onglets - L'ordre de séquence des onglets doit être affiché de manière logique et correcte. Vous pouvez naviguer vers les différents liens en cliquant sur la touche de tabulation. Après avoir sélectionné l'indicateur d'ordre de tabulation, vous pouvez voir le nombre de nombres près des liens qui montre combien de fois il faut cliquer sur la touche de tabulation pour atteindre ce lien particulier.
Pour vérifier l'ordre des onglets, cliquez sur l'url http://www.easports.com , et cliquez sur Structure et sélectionnez l'indicateur d'ordre de tabulation.
# 6) Listes - La liste doit s'afficher dans une structure appropriée. Les listes doivent toujours être vérifiées pour s'assurer que les éléments de la liste sont réellement contenus dans une seule liste. La liste peut être de deux formes: commandé liste et désordonné liste . Les listes non ordonnées utilisent le élément et les listes ordonnées utilisent le
élément.
Entrez l'url http://www.easports.com i Dans la barre d'outils, cliquez sur la structure et sélectionnez Eléments de liste et vérifiez l'ordre de la liste.
Exemple de liste non ordonnée:
Exemple de liste ordonnée:
# 7) Contraste rapport - Il doit avoir un contraste minimum par défaut. Les navigateurs Web doivent permettre aux utilisateurs de modifier la couleur du texte et de l'arrière-plan si nécessaire.
Entrez l'URL de Google https://www.google.co.in/ et cliquez sur les images et sélectionnez Juicy Studio Luminosity Analyzer.
Une nouvelle fenêtre s'ouvre avec le titre Analyseur de contraste de couleur avec le tableau des résultats. La dernière colonne est le rapport de contraste de luminosité.
meilleur logiciel pour nettoyer le pc
# 8) Étiquettes - Les étiquettes doivent être affichées correctement.
Entrer l'URL https://www.google.co.in/ et dans la barre d'outils, cliquez sur Structure et sélectionnez fieldset / labels comme option. Vous verrez les détails du champ et de l'étiquette.
# 9) Basique Structure Vérifier - Dans cette vérification, nous vérifions les pages Web sans images, styles et mise en page.
Dans la barre d'outils, cliquez sur Images puis sur Supprimer les images.
Sélectionnez maintenant CSS, puis cliquez sur Désactiver CSS.
Cliquez enfin sur Tables puis sélectionnez Linéariser.
Temps de pratique:
Donnons-nous maintenant un exemple de tâche de test d'accessibilité, bien sûr la solution est fournie. Mais nous vous recommandons d'essayer vous-même avant de passer à la réponse.
Vérifiez les en-têtes, les images avec le texte alternatif, l'indicateur d'ordre de tabulation et le contraste de couleur dans http://www.cbssports.com
Solution: Cliquez sur l'url http://www.cbssports.com sur Internet Explorer.
Pour vérifier les titres, cliquez sur Structure et sélectionnez Structure des titres pour vérifier le titre.
Les titres ne sont pas dans H1. Tous les titres sont en H2.
Pour vérifier le texte alternatif, cliquez sur Images et sélectionnez Afficher les images pour vérifier si le texte alternatif est présent dans les images ou non.
Vous trouverez que peu d'images sont avec du texte alternatif et peu d'entre elles sont sans attribut alt. Les détails de l'image sans texte alternatif s'affichent dans une fenêtre contextuelle et les détails des images avec un texte alternatif s'affichent près des images.
Par exemplealt = 'Recherche CBS Sports.com' texte qui s'affiche à proximité de l'icône de recherche et alt = 'CBSSports.com' texte qui s'affiche à proximité du logo Fantasy.
Pour vérifier l'indicateur d'ordre de tabulation, cliquez sur Structure et sélectionnez Indicateur d'ordre de tabulation .
Le décompte s'affichera à proximité des liens, indiquant sur quelle tentative vous pourrez cliquer sur ce lien particulier. Par exemple, pour cliquer sur le lien le plus élevé de la NFL, vous devrez appuyer 13 fois sur le bouton de tabulation du clavier.
Maintenant, le dernier à vérifier le contraste des couleurs, cliquez sur la couleur et sélectionnez Analyseur de contraste.
Le texte passe avec le double A c'est-à-dire AA.
Là, c'est la façon d'évaluer l'accessibilité du site Web.
Tutoriel PREV | Tutoriel SUIVANT
lecture recommandée
- Tutoriel sur l'outil de test d'accessibilité WAVE
- Tutoriels Eclipse détaillés pour les débutants
- Tutoriel de test d'accessibilité (un guide complet étape par étape)
- Top 20 des outils de test d'accessibilité pour les applications Web
- Meilleurs outils de test de logiciels 2021 (Outils d'automatisation des tests QA)
- Tutoriel sur les tests destructifs et les tests non destructifs
- Test fonctionnel vs test non fonctionnel
- Tutoriel de test SOA: méthodologie de test pour un modèle d'architecture SOA