wat tutorial
Samouczek WAT lub Web Accessibility Toolbar do testowania dostępności:
Narzędzia do testowania dostępności zostały szczegółowo wyjaśnione w naszym poprzednim samouczku w Seria testów dostępności .
WAT (Web Accessibility Toolbar) - to pasek narzędzi dla Przeglądarka Internet Explorer i inne przeglądarki - Może pomóc w ocenie strony internetowej pod kątem zgodności z wytycznymi dotyczącymi dostępności treści internetowych w wersji 2 (WCAG 2.0).
Jak korzystać z narzędzia WAT?
Proszę pobierz i zainstaluj go stąd .
Po pomyślnej instalacji, tuż pod paskiem adresu pojawi się dodatkowe narzędzie ułatwień dostępu.
Dowiemy się tego z pomocą strony EAsports - http://www.easports.com.
# 1) Tytuł strony - Możemy zweryfikować pasek tytułu strony w pasku tytułu okna lub pasku tytułu zakładki przeglądarek. Po najechaniu myszką na zakładkę otrzymasz informacje o tytule strony.
Wprowadź adres URL http://www.easports.com i sprawdź tytuł strony na pasku tytułu karty, najeżdżając myszą.
# 2) Kolor - Kolor strony internetowej powinien przejść w Analizatorze kontrastu kolorów.
Istnieją 3 różne poziomy zgodności do określenia współczynnika koloru, tj. Poziom A, AA i AAA.
Musi dostać przepustkę do AA lub AAA .
„A” oznacza niski poziom dostępności, „AA” oznacza średni poziom dostępności, a „AAA” najwyższy poziom dostępności.
Wprowadź adres URL http://www.easports.com i Na pasku narzędzi kliknij kartę Kolor i wybierz Analizator kontrastu i sprawdź.
# 3) Nagłówki - Nagłówki zapewniają skuteczny przegląd zawartości strony. Wszystkie strony powinny zaczynać się od nagłówków H1 lub H2. Nagłówek powinien być większy, pogrubiony i zaznaczony na stronach internetowych. Strona powinna zaczynać się od „h1”, a na każdej stronie powinien znajdować się przynajmniej jeden nagłówek.
Aby sprawdzić strukturę nagłówków, kliknij http://www.easports.com i wybierz kartę Struktura, a następnie kliknij strukturę nagłówka i sprawdź. To da ci wszystkie szczegóły tytułu nagłówka. Sprawdza również, czy nagłówki są poprawnie zagnieżdżone, czy nie.
# 4) Tekst alternatywny dla obrazów - Atrybut alt jest obsługiwany we wszystkich głównych przeglądarkach. Wszystkie obrazy powinny mieć powiązany tekst Alt. Wyświetla wartość atrybutu alt jako podpowiedź po najechaniu kursorem na obraz. Zapewnia to alternatywne informacje o obrazie, jeśli obrazu nie można wyświetlić.
Wprowadź adres URL http://www.easports.com, Kliknij opcję Pokaż obrazy i sprawdź, czy tekst alternatywny jest dostępny dla obrazów.
Otrzymasz poniższe wyskakujące okienko:
Otrzymasz szczegóły, jak wspomniano powyżej.
# 5) Kolejność zakładek - Kolejność kart powinna być wyświetlana logicznie i poprawnie. Możesz przejść do różnych linków, klikając klawisz tabulacji. Po wybraniu wskaźnika kolejności zakładki możesz zobaczyć liczbę numerów w pobliżu linków, która pokazuje, ile razy należy kliknąć klawisz tab, aby dotrzeć do tego konkretnego linku.
Aby sprawdzić kolejność zakładek, kliknij adres URL http://www.easports.com , i kliknij Struktura i wybierz wskaźnik kolejności zakładek.
# 6) Listy - Lista powinna wyświetlać się w odpowiedniej strukturze. Listy należy zawsze sprawdzać, aby upewnić się, że elementy listy rzeczywiście znajdują się na jednej liście. Lista może mieć dwie formy: zamówione list i niezamówiony lista . Listy nieuporządkowane używają rozszerzenia element i listy uporządkowane używają rozszerzenia
element.
Wprowadź adres URL http://www.easports.com i Na pasku narzędzi kliknij strukturę i wybierz Elementy listy i sprawdź kolejność listy.
Przykład listy nieuporządkowanej:
Przykład listy uporządkowanej:
# 7) Kontrast stosunek - Domyślnie powinien mieć minimalny kontrast. Przeglądarki internetowe powinny w razie potrzeby umożliwiać użytkownikom zmianę koloru tekstu i tła.
Wpisz adres URL google https://www.google.co.in/, kliknij obrazy i wybierz Juicy Studio Luminosity Analyzer.
Otworzy się nowe okno z zatytułowanym Analizator kontrastu kolorów z tabelą wyników. Ostatnia kolumna to Luminosity Contrast Ratio.
10 najlepszych stron internetowych do oglądania anime
# 8) Etykiety - Etykiety powinny być prawidłowo wyświetlane.
Wprowadź URL https://www.google.co.in/ i na pasku narzędzi kliknij Struktura i wybierz zestaw pól / etykiety jako opcję. Zobaczysz zestaw pól i szczegóły etykiety.
# 9) Podstawowy Struktura Czek - W ramach tej kontroli weryfikujemy strony internetowe bez obrazów, stylów i układu.
Na pasku narzędzi kliknij Obrazy, a następnie Usuń obrazy.
Teraz wybierz CSS, a następnie kliknij Wyłącz CSS.
Na koniec kliknij Tabele, a następnie wybierz Linearyzuj.
Czas na praktykę:
Dajmy teraz sobie przykładowe zadanie testu dostępności, oczywiście rozwiązanie jest dostarczone. Ale zalecamy wypróbowanie tego samodzielnie, zanim przejdziesz do odpowiedzi.
Sprawdź nagłówki, obrazy z tekstem alternatywnym, wskaźnik kolejności tabulatorów i kontrast kolorów w formacie http://www.cbssports.com
Rozwiązanie: Kliknij adres URL http://www.cbssports.com w przeglądarce Internet Explorer.
Aby zweryfikować nagłówki, kliknij opcję Struktura i wybierz opcję Struktura nagłówka, aby zweryfikować nagłówek.
Nagłówki nie znajdują się w H1. Wszystkie nagłówki są w drugiej połowie roku.
Aby zweryfikować tekst alternatywny, kliknij Obrazy i wybierz Pokaż obrazy, aby sprawdzić, czy tekst alternatywny jest obecny na obrazach, czy nie.
Znajdziesz kilka obrazków z tekstem alternatywnym, a kilka bez atrybutu alt. Szczegóły obrazu bez tekstu alternatywnego są wyświetlane w wyskakującym okienku, a szczegóły obrazów z tekstem alternatywnym są wyświetlane obok obrazów.
Na przykładalt = tekst „Wyszukaj CBS Sports.com”, który jest wyświetlany obok ikony wyszukiwania i tekst alt = „CBSSports.com”, który jest wyświetlany obok logo Fantasy.
Aby zweryfikować wskaźnik kolejności zakładek, kliknij Struktura i wybierz Wskaźnik kolejności zakładek .
Liczba wyświetli się obok linków, która pokazuje, przy jakiej próbie będziesz mógł kliknąć ten konkretny link. Na przykład, aby kliknąć na górze większość linków NFL, będziesz musiał nacisnąć przycisk tabulatora na klawiaturze 13 razy.
Teraz ostatni, aby zweryfikować kontrast kolorów, kliknij kolor i wybierz Analizator kontrastu.
Tekst przechodzi z podwójnym A, czyli AA.
Tam jest to sposób oceny dostępności strony internetowej.
POPRZEDNIA samouczek | NEXT Tutorial
rekomendowane lektury
- Samouczek dotyczący narzędzia do testowania dostępności WAVE
- Dogłębne samouczki dotyczące Eclipse dla początkujących
- Samouczek testowania dostępności (kompletny przewodnik krok po kroku)
- 20 najlepszych narzędzi do testowania dostępności dla aplikacji internetowych
- Najlepsze narzędzia do testowania oprogramowania 2021 [Narzędzia do automatyzacji testów QA]
- Testy niszczące i samouczek dotyczący testów nieniszczących
- Testy funkcjonalne a testy niefunkcjonalne
- Samouczek testowania SOA: Metodologia testowania modelu architektury SOA