wat tutorial
Výukový program pro panel nástrojů WAT nebo Web Accessibility pro testování přístupnosti:
Nástroje pro testování přístupnosti byly podrobně vysvětleny v našem předchozím tutoriálu v Série testování přístupnosti .
WAT (Panel nástrojů usnadnění přístupu na web) - je panel nástrojů pro Prohlížeč Internet Explorer a další prohlížeče - Může pomoci při hodnocení, zda webová stránka dodržuje pokyny pro přístup k obsahu webu verze 2 (WCAG 2.0).
Jak používat WAT Tool?
Prosím stáhněte a nainstalujte jej zde .
Po úspěšné instalaci se pod adresním řádkem zobrazí další nástroj pro usnadnění přístupu na web.
Naučíme se to pomocí webu EAsports - http://www.easports.com.
# 1) Název stránky - Můžeme ověřit záhlaví stránky v záhlaví okna nebo záhlaví karty v prohlížečích. Umístěním kurzoru myši na kartu získáte informace o názvu stránky.
Zadejte adresu URL http://www.easports.com a ověřte nadpis stránky v záhlaví karty tak, že umístíte ukazatel myši.
# 2) Barva - Barva webu by měla projít v Color Contrast Analyzer.
Existují 3 různé úrovně shody pro určení barevného poměru, tj. Úroveň A, AA a AAA.
Musí získat průkaz AA nebo AAA .
„A“ představuje nízkou úroveň přístupnosti, „AA“ představuje střední úroveň přístupnosti a „AAA“ představuje nejvyšší úroveň přístupnosti.
Zadejte URL http://www.easports.com i Na panelu nástrojů klikněte na kartu Barva, vyberte položku Kontrastní analyzátor a ověřte.
# 3) Nadpisy - Nadpisy poskytují efektivní přehled o obsahu stránky. Všechny stránky by měly začínat nadpisy H1 nebo H2. Text nadpisu by měl být větší, tučný a měl by být označen na webových stránkách. Stránka by měla začínat „h1“ a na každé stránce by měl být alespoň jeden nadpis.
Chcete-li ověřit strukturu záhlaví, klikněte na http://www.easports.com a vyberte kartu Struktura a poté klikněte na strukturu záhlaví a ověřte. Poskytne vám všechny podrobnosti názvu nadpisu. Rovněž prozkoumá, zda jsou nadpisy správně vnořeny nebo ne.
# 4) Alternativní text pro obrázky - Atribut alt je podporován ve všech hlavních prohlížečích. Ke všem obrázkům by měl být přidružen alternativní text. Když najedeme myší na obrázek, zobrazí se hodnota atributu alt jako popisek. Pokud obrázek nelze zobrazit, získáte alternativní informace o obrázku.
Zadejte adresu URL http://www.easports.com, Klikněte na zobrazit obrázky a ověřte, zda je pro obrázky k dispozici alternativní text.
Dostanete se pod vyskakovací okno:
Získáte podrobnosti, jak je uvedeno výše.
# 5) Pořadí záložek - Pořadí pořadí záložek by mělo být zobrazeno logicky a správně. Kliknutím na tabulátor můžete přejít na různé odkazy. Po výběru indikátoru pořadí karet můžete vidět počet čísel v blízkosti odkazů, což ukazuje, kolikrát je potřeba kliknout na klávesu karty, abyste se dostali na daný odkaz.
Chcete-li ověřit pořadí karet, klikněte na adresu URL http://www.easports.com a klikněte na Struktura a vyberte indikátor pořadí karet.
# 6) Seznamy - Seznam by se měl zobrazovat ve správné struktuře. Seznamy je třeba vždy zkontrolovat, abyste se ujistili, že položky seznamu jsou skutečně obsaženy v jednom seznamu. Seznam může mít dvě formy: objednal seznam a neuspořádaný seznam . Neuspořádané seznamy používají element a seřazené seznamy používají
živel.
Zadejte adresu URL http://www.easports.com i Na panelu nástrojů klikněte na strukturu a vyberte položky seznamu a ověřte pořadí seznamu.
Příklad neuspořádaného seznamu:
Příklad objednaného seznamu:
# 7) Kontrast poměr - Ve výchozím nastavení by měl mít minimální kontrast. Webové prohlížeče by měly lidem v případě potřeby umožnit změnit barvu textu a pozadí.
Zadejte google url https://www.google.co.in/ a klikněte na obrázky a vyberte Juicy Studio Luminosity Analyzer.
Otevře se nové okno s názvem Color Contrast Analyzer s tabulkou výsledků. Posledním sloupcem je Luminosity Contrast Ratio.
VB skript rozhovor otázky a odpovědi
# 8) Štítky - Štítky by měly být zobrazeny správně.
Zadejte URL adresu https://www.google.co.in/ a na panelu nástrojů klikněte na Struktura a jako možnost vyberte sadu polí / štítky. Uvidíte pole a podrobnosti štítku.
# 9) Základní Struktura Šek - V této kontrole ověřujeme webové stránky bez obrázků, stylů a rozvržení.
Na panelu nástrojů klikněte na Obrázky a poté na Odebrat obrázky.
Nyní vyberte CSS a poté klikněte na Zakázat CSS.
Nakonec klikněte na tabulky a poté vyberte linearizaci.
Čas na procvičování:
Pojďme si nyní dát ukázkovou úlohu testu přístupnosti, řešení je samozřejmě k dispozici. Než však přejdete k odpovědi, doporučujeme vám to vyzkoušet sami.
Ověřte záhlaví, obrázky s alternativním textem, indikátor pořadí tabulátorů a barevný kontrast http://www.cbssports.com
Řešení: Klikněte na adresu URL http://www.cbssports.com v prohlížeči Internet Explorer.
Chcete-li ověřit záhlaví, klikněte na Struktura a vyberte Struktura záhlaví pro ověření záhlaví.
Nadpisy nejsou v H1. Všechny nadpisy jsou v H2.
Chcete-li ověřit alternativní text, klikněte na Obrázky a výběrem možnosti Zobrazit obrázky ověřte, zda je alternativní text na obrázcích přítomen.
Najdete několik obrázků s alternativním textem a některé z nich nemají atribut alt. Ve vyskakovacím okně se zobrazí podrobnosti obrázku bez alternativního textu a v blízkosti obrázků se zobrazí podrobnosti obrázků s alternativním textem.
Napříkladalt = ”Hledat na CBS Sports.com” text, který se zobrazuje poblíž ikony hledání a alt = ”CBSSports.com” text, který se zobrazuje poblíž loga Fantasy.
Pro ověření indikátoru pořadí záložek klikněte na Struktura a vyberte Indikátor pořadí záložek .
Počet se zobrazí u odkazů, což ukazuje, na jaký pokus budete moci kliknout na konkrétní odkaz. Například pro kliknutí na nejvíce odkaz NFL nahoře budete muset 13krát stisknout tlačítko tab na klávesnici.
Nyní jako poslední ověřte barevný kontrast, klikněte na barvu a vyberte Kontrastní analyzátor.
Text prochází dvojitým A, tj. AA.
Zde je způsob, jak vyhodnotit přístupnost webových stránek.
Výukový program PREV | DALŠÍ výuka
Doporučené čtení
- Výukový program pro testování přístupnosti WAVE
- Výukové programy pro zatmění do hloubky pro začátečníky
- Výukový program pro testování přístupnosti (kompletní průvodce krok za krokem)
- Top 20 nástrojů pro testování přístupnosti pro webové aplikace
- Nejlepší nástroje pro testování softwaru 2021 [QA Test Automation Tools]
- Výukový program pro destruktivní testování a nedestruktivní testování
- Funkční testování vs. nefunkční testování
- Výukový program pro testování SOA: Metodika testování pro model architektury SOA