wat tutorial
Výukový program pre panel prístupnosti nástrojov WAT alebo Web pre testovanie prístupnosti:
Nástroje na testovanie prístupnosti boli podrobne vysvetlené v našom predchádzajúcom návode v Série testovania prístupnosti .
WAT (panel nástrojov prístupnosti webu) Je panel nástrojov pre Prehliadač Internet Explorer a ďalšie prehľadávače - Môže pomôcť pri hodnotení, či je webová stránka v súlade s pravidlami prístupnosti webového obsahu verzie 2 (WCAG 2.0).
Ako používať WAT Tool?
Prosím stiahnite si a nainštalujte ho odtiaľto .
Po úspešnej inštalácii sa pod adresným riadkom zobrazí ďalší nástroj na uľahčenie prístupu na web.
Naučíme sa to pomocou webovej stránky EAsports - http://www.easports.com.
# 1) Názov stránky - Môžeme overiť záhlavie stránky v záhlaví okna alebo záhlaví karty v prehliadačoch. Po umiestnení kurzora myši na kartu sa zobrazia informácie o názve stránky.
Zadajte adresu URL http://www.easports.com a overte nadpis stránky v záhlaví karty tak, že umiestnite kurzor myši.
# 2) Farba - Farba webovej stránky by mala prechádzať v nástroji Color Contrast Analyzer.
Existujú 3 rôzne úrovne zhody na určenie farebného pomeru, t. J. Úroveň A, AA a AAA.
Musí dostať preukaz AA alebo AAA .
„A“ predstavuje nízku úroveň prístupnosti, „AA“ predstavuje strednú úroveň prístupnosti a „AAA“ predstavuje najvyššiu úroveň prístupnosti.
Zadajte adresu URL http://www.easports.com i Na paneli nástrojov kliknite na kartu Farba, vyberte položku Kontrastný analyzátor a overte.
# 3) Nadpisy - Nadpisy poskytujú efektívny prehľad o obsahu stránky. Všetky stránky by mali začínať nadpismi H1 alebo H2. Text nadpisu by mal byť väčší, tučný a označený na webových stránkach. Stránka by mala začínať znakom „h1“ a na každej stránke by mal byť aspoň jeden nadpis.
Pre overenie štruktúry nadpisu kliknite na http://www.easports.com a vyberte kartu Štruktúra a potom kliknite na štruktúru nadpisu a overte. Poskytne vám všetky podrobnosti nadpisu nadpisu. Tiež preskúma, či sú nadpisy správne vnorené alebo nie.
# 4) Alternatívny text pre obrázky - Atribút alt je podporovaný vo všetkých hlavných prehľadávačoch. Ku všetkým obrázkom by mal byť priradený alternatívny text. Keď umiestnime kurzor myši na obrázok, zobrazí sa hodnota atribútu alt ako popis. Toto poskytuje alternatívne informácie o obrázku, ak ho nie je možné zobraziť.
Zadajte adresu URL http://www.easports.com, Kliknite na Zobraziť obrázky a overte, či je pre obrázky k dispozícii alternatívny text.
Dostanete sa pod pop-up:
Získate podrobnosti, ako je uvedené vyššie.
# 5) Objednávka záložiek - Poradie postupnosti záložiek by malo byť zobrazené logicky a správne. Kliknutím na kláves tabulátora môžete prejsť na rôzne odkazy. Po výbere indikátora poradia kariet môžete vidieť počet čísel v blízkosti odkazov, ktorý ukazuje, koľkokrát je potrebné kliknúť na kláves tabulátora, aby ste sa dostali na konkrétny odkaz.
Objednávku kariet overíte kliknutím na adresu URL http://www.easports.com , a kliknite na Štruktúra a vyberte indikátor poradia kariet.
# 6) Zoznamy - Zoznam by sa mal zobrazovať v správnej štruktúre. Zoznamy by mali byť vždy skontrolované, aby sa zabezpečilo, že položky zoznamu sú skutočne obsiahnuté v jednom zozname. Zoznam môže mať dve formy: nariadil zoznam a neusporiadaný zoznam . Neusporiadané zoznamy používajú element a zoradené zoznamy používajú
prvok.
Zadajte adresu URL http://www.easports.com i Na paneli nástrojov kliknite na štruktúru, vyberte položku zoznamu a overte poradie zoznamu.
Príklad neusporiadaného zoznamu:
Príklad objednaného zoznamu:
# 7) Kontrast pomer - Štandardne by mal mať minimálny kontrast. Webové prehliadače by mali ľuďom v prípade potreby umožniť zmeniť farbu textu a pozadia.
Zadajte adresu URL google https://www.google.co.in/ a kliknite na obrázky a vyberte Juicy Studio Luminosity Analyzer.
Otvorí sa nové okno s názvom Color Contrast Analyzer s tabuľkou výsledkov. Posledný stĺpec je Luminosity Contrast Ratio.
tcp ip rozhovor otázky a odpovede pdf
# 8) Štítky - Štítky by mali byť zobrazené správne.
Zadajte adresu URL https://www.google.co.in/ a na paneli s nástrojmi kliknite na Štruktúra a vyberte ako možnosť sadu polí / štítky. Uvidíte polia a podrobnosti štítku.
# 9) Základné Štruktúra Skontrolujte - Pri tejto kontrole overujeme webové stránky bez obrázkov, štýlov a rozloženia.
Na paneli nástrojov kliknite na položku Obrázky a potom na položku Odstrániť obrázky.
Teraz vyberte CSS a potom kliknite na Zakázať CSS.
Nakoniec kliknite na tabuľky a potom vyberte linearizáciu.
Čas na cvičenie:
Poďme si teraz dať ukážku úlohy testovania prístupnosti, riešenie je samozrejme poskytované. Predtým, ako sa dostanete k odpovedi, odporúčame vám to vyskúšať sami.
Overte nadpisy, obrázky s alternatívnym textom, indikátor poradia tabulátorov a farebný kontrast v http://www.cbssports.com
Riešenie: Kliknite na adresu URL http://www.cbssports.com v prehliadači Internet Explorer.
Ak chcete overiť nadpisy, kliknite na Štruktúra a výberom položky Štruktúra nadpisu overte nadpis.
Nadpisy nie sú v H1. Všetky nadpisy sú v H2.
Ak chcete overiť alternatívny text, kliknite na položku Obrázky a výberom položky Zobraziť obrázky overte, či sa alternatívny text na obrázkoch nachádza alebo nie.
Nájdete niekoľko obrázkov, ktoré majú alternatívny text a niektoré z nich nemajú atribút alt. V kontextovom okne sa zobrazia podrobnosti obrázka bez alternatívneho textu a v blízkosti obrázkov sa zobrazia podrobnosti obrázkov s alternatívnym textom.
Napríkladalt = ”Vyhľadať text CBS Sports.com”, ktorý sa zobrazuje v blízkosti ikony vyhľadávania a alt = ”CBSSports.com” text, ktorý sa zobrazuje v blízkosti loga Fantasy.
Ak chcete overiť indikátor poradia záložiek, kliknite na Štruktúra a vyberte Indikátor poradia záložiek .
Počet sa zobrazí v blízkosti odkazov, čo ukazuje, na aký pokus budete môcť kliknúť na konkrétny odkaz. Napríklad pre kliknutie na najvyšší odkaz NFL budete musieť stlačiť klávesu tab na klávesnici 13-krát.
Teraz posledný, ktorý overuje farebný kontrast, kliknite na farbu a vyberte položku Contrast Analyzer.
Text prechádza dvojitým A, tj. AA.
Tam je možné vyhodnotiť prístupnosť webovej stránky.
Výukový program PREV | NEXT Tutorial
Odporúčané čítanie
- Výukový program pre testovanie prístupnosti WAVE
- Hĺbkové návody pre zatmenie pre začiatočníkov
- Výukový program pre testovanie prístupnosti (kompletný sprievodca krok za krokom)
- Top 20 nástrojov na testovanie prístupnosti pre webové aplikácie
- Najlepšie nástroje na testovanie softvéru 2021 (QA Test Automation Tools)
- Výukový program pre deštruktívne testovanie a nedeštruktívne testovanie
- Funkčné testovanie vs. Nefunkčné testovanie
- Výukový program pre testovanie SOA: Metodika testovania pre model architektúry SOA