wat tutorial
Tutorial zur WAT- oder Web Accessibility-Symbolleiste zum Testen der Barrierefreiheit:
Tools zum Testen der Barrierefreiheit wurden in unserem vorherigen Tutorial in der ausführlich erklärt Zugänglichkeitstestserie .
WAT (Web Accessibility Toolbar) - ist eine Symbolleiste für Internet Explorer-Browser und andere Browser - Es kann bei der Bewertung einer Webseite auf Übereinstimmung mit den Richtlinien für die Barrierefreiheit von Webinhalten Version 2 (WCAG 2.0) hilfreich sein.
Wie benutzt man das WAT Tool?
Bitte Laden Sie es hier herunter und installieren Sie es .
Nach erfolgreicher Installation wird direkt unter der Adressleiste ein zusätzliches Tool für die Barrierefreiheit im Internet angezeigt.
Wir werden dies mithilfe der EAsports-Website - http://www.easports.com - lernen.
# 1) Seitentitel - Wir können die Seitentitelleiste in der Fenstertitelleiste oder der Tabulatortitelleiste des Browsers überprüfen. Wenn Sie mit der Maus über die Registerkarte fahren, erhalten Sie Informationen zum Seitentitel.
Geben Sie die URL http://www.easports.com ein und überprüfen Sie den Seitentitel in der Titelleiste der Registerkarte, indem Sie mit der Maus darüber fahren.
# 2) Farbe - Die Farbe der Website sollte in Color Contrast Analyzer übergeben werden.
Es gibt 3 verschiedene Konformitätsstufen, um das Farbverhältnis zu bestimmen, d. H. Stufe A, AA und AAA.
Es muss einen Pass für AA oder AAA bekommen .
'A' steht für niedrige Zugänglichkeit, 'AA' für mittlere Zugänglichkeit und 'AAA' für höchste Zugänglichkeit.
Geben Sie die URL http://www.easports.com i ein Klicken Sie in der Symbolleiste auf die Registerkarte Farbe, wählen Sie Contrast Analyzer aus und überprüfen Sie.
# 3) Überschriften - Die Überschriften bieten einen effektiven Überblick über den Inhalt der Seite. Alle Seiten sollten mit H1- oder H2-Überschriften beginnen. Der Überschriftentext sollte größer und fett sein und auf den Webseiten markiert sein. Die Seite sollte mit „h1“ beginnen und auf jeder Seite sollte mindestens eine Überschrift stehen.
Um die Überschriftenstruktur zu überprüfen, klicken Sie auf http://www.easports.com Wählen Sie die Registerkarte Struktur, klicken Sie auf Überschriftenstruktur und überprüfen Sie diese. Sie erhalten alle Details zum Titel der Überschrift. Es wird auch geprüft, ob die Überschriften korrekt verschachtelt sind oder nicht.
# 4) Alternativtext für Bilder - Das alt-Attribut wird in allen gängigen Browsern unterstützt. Allen Bildern sollte Alt-Text zugeordnet sein. Es zeigt den Wert des alt-Attributs als Tooltip an, wenn Sie den Mauszeiger über das Bild bewegen. Dies bietet alternative Informationen zu einem Bild, wenn das Bild nicht angezeigt werden kann.
Geben Sie die URL ein http://www.easports.com, Klicken Sie auf Bilder anzeigen und überprüfen Sie, ob für Bilder Alternativtext verfügbar ist.
Sie erhalten das folgende Popup:
Sie erhalten die Details wie oben erwähnt.
# 5) Tab-Reihenfolge - Die Reihenfolge der Registerkarten sollte logisch und korrekt angezeigt werden. Sie können zu den verschiedenen Links navigieren, indem Sie auf die Tabulatortaste klicken. Nachdem Sie die Anzeige für die Tab-Reihenfolge ausgewählt haben, sehen Sie die Anzahl der Nummern in der Nähe der Links. Dies zeigt an, wie oft auf die Tab-Taste geklickt werden muss, um zu diesem bestimmten Link zu gelangen.
Um die Tab-Reihenfolge zu überprüfen, klicken Sie auf die URL http://www.easports.com Klicken Sie auf Struktur und wählen Sie das Kennzeichen für die Registerkarte.
# 6) Listen - Die Liste sollte in der richtigen Struktur angezeigt werden. Listen sollten immer überprüft werden, um sicherzustellen, dass die Listenelemente wirklich in einer Liste enthalten sind. Die Liste kann zwei Formen haben: bestellt Liste und ungeordnet Liste . Ungeordnete Listen verwenden die Element und geordnete Listen verwenden die
Element.
Geben Sie die URL http://www.easports.com i ein Klicken Sie in der Symbolleiste auf Struktur, wählen Sie Listenelemente und überprüfen Sie die Reihenfolge der Liste.
Beispiel für eine ungeordnete Liste:
Beispiel für eine geordnete Liste:
# 7) Kontrast Verhältnis - Es sollte standardmäßig einen minimalen Kontrast haben. Webbrowser sollten es Benutzern ermöglichen, die Farbe von Text und Hintergrund bei Bedarf zu ändern.
Geben Sie die Google-URL ein https://www.google.co.in/ und klicken Sie auf Bilder und wählen Sie Juicy Studio Luminosity Analyzer.
Ein neues Fenster mit dem Titel Color Contrast Analyzer mit der Ergebnistabelle wird geöffnet. Die letzte Spalte ist das Helligkeitskontrastverhältnis.
PHP Interview Fragen und Antworten für 2 Jahre Erfahrung
# 8) Etiketten - Etiketten sollten richtig angezeigt werden.
URL eingeben https://www.google.co.in/ und klicken Sie in der Symbolleiste auf Struktur und wählen Sie Feldsatz / Beschriftungen als Option. Sie sehen das Feldset und die Beschriftungsdetails.
# 9) Grundlegend Struktur Prüfen - Bei dieser Prüfung überprüfen wir Webseiten ohne Bilder, Stile und Layout.
Klicken Sie in der Symbolleiste auf Bilder und dann auf Bilder entfernen.
Wählen Sie nun CSS und klicken Sie dann auf CSS deaktivieren.
Klicken Sie abschließend auf Tabellen und wählen Sie Linearisieren.
Zeit zum Üben:
Lassen Sie uns nun eine Beispielaufgabe für die Barrierefreiheit geben, natürlich wird die Lösung bereitgestellt. Wir empfehlen Ihnen jedoch, dies selbst auszuprobieren, bevor Sie zur Antwort übergehen.
Überprüfen Sie die Überschriften, Bilder mit Alternativtext, die Tab-Reihenfolge und den Farbkontrast in http://www.cbssports.com
Lösung: Klicken Sie im Internet Explorer auf die URL http://www.cbssports.com.
Um Überschriften zu überprüfen, klicken Sie auf Struktur und wählen Sie Überschriftenstruktur, um die Überschrift zu überprüfen.
Überschriften sind nicht in H1. Alle Überschriften sind in H2.
Um Alt-Text zu überprüfen, klicken Sie auf Bilder und wählen Sie Bilder anzeigen, um zu überprüfen, ob Alt-Text in den Bildern vorhanden ist oder nicht.
Sie werden feststellen, dass nur wenige Bilder Alt-Text enthalten und nur wenige ohne Alt-Attribut. Die Bilddetails ohne Alternativtext werden im Popup angezeigt, und die Details von Bildern mit Alternativtext werden in der Nähe der Bilder angezeigt.
Zum Beispielalt = 'CBS Sports.com durchsuchen' -Text, der in der Nähe des Suchsymbols angezeigt wird, und alt = 'CBSSports.com' -Text, der in der Nähe des Fantasy-Logos angezeigt wird.
Um die Tab-Reihenfolge zu überprüfen, klicken Sie auf Struktur und wählen Sie Tab-Reihenfolge-Indikator .
Die Anzahl wird neben den Links angezeigt, die anzeigen, bei welchem Versuch Sie auf diesen bestimmten Link klicken können. Wenn Sie beispielsweise auf den obersten NFL-Link klicken möchten, müssen Sie die Tabulatortaste auf der Tastatur 13 Mal drücken.
Klicken Sie nun als letzter, um den Farbkontrast zu überprüfen, auf Farbe und wählen Sie Contrast Analyzer.
Der Text wird mit doppeltem A, d. H. AA, übergeben.
Auf diese Weise kann die Zugänglichkeit der Website bewertet werden.
PREV Tutorial | NÄCHSTES Tutorial
Literatur-Empfehlungen
- Tutorial zum WAVE Accessibility Testing Tool
- Ausführliche Eclipse-Tutorials für Anfänger
- Tutorial zum Testen der Barrierefreiheit (Eine vollständige Schritt-für-Schritt-Anleitung)
- Top 20 Tools zum Testen der Barrierefreiheit für Webanwendungen
- Beste Software-Test-Tools 2021 (QA Test Automation Tools)
- Tutorial für zerstörende Tests und zerstörungsfreie Tests
- Funktionstests gegen nichtfunktionale Tests
- SOA-Test-Tutorial: Testmethode für ein SOA-Architekturmodell