wat tutorial
Handledning för WAT- eller webbåtkomstverktyg för tillgänglighetsprovning:
Verktyg för tillgänglighetstestning förklarades i detalj i vår tidigare handledning i Serier för testning av tillgänglighet .
WAT (Verktygsfält för webbtillgänglighet) - är ett verktygsfält för Internet Explorer-webbläsare och andra webbläsare - Det kan hjälpa till att utvärdera en webbsida för efterlevnad av riktlinjer för tillgänglighet för webbinnehåll version 2 (WCAG 2.0).
Hur använder jag WAT-verktyget?
Snälla du ladda ner och installera den härifrån .
Efter framgångsrik installation ser du ytterligare webbåtkomstverktyg precis under adressfältet.
Vi kommer att lära oss detta med hjälp av EAsports webbplats - http://www.easports.com.
# 1) Sidrubrik - Vi kan verifiera sidrubriken i webbläsarens fönsterrubrik eller flikrubrik. Om du håller musen på fliken kommer du att få information om sidrubriken.
Ange webbadressen http://www.easports.com och verifiera sidans rubrik i flikens titelfält med musen.
# 2) Färg - Webbplatsens färg ska passera i Color Contrast Analyzer.
Det finns 3 olika överensstämmelsesnivåer för att bestämma färgförhållandet, dvs. nivå A, AA och AAA.
Det måste få ett pass på AA eller AAA .
'A' representerar låg tillgänglighetsnivå, 'AA' representerar medelnivå av tillgänglighet och 'AAA' representerar högsta tillgänglighetsnivå.
Ange webbadressen http://www.easports.com i n i verktygsfältet, klicka på fliken Färg och välj Contrast Analyzer och verifiera.
# 3) Rubriker - Rubrikerna ger en effektiv översikt över innehållet på sidan. Alla sidor bör börja med H1- eller H2-rubriker. Rubriktexten ska vara större, fet och markerad på webbsidorna. Och sidan bör börja med “h1” och på varje sida bör det finnas minst en rubrik.
Klicka på http://www.easports.com för att verifiera rubrikstrukturen och välj fliken Struktur och klicka sedan på rubrikstruktur och verifiera. Det kommer att ge dig alla rubrikdetaljer. Den kommer också att undersöka om rubrikerna är kapslade korrekt eller inte.
# 4) Alt-text för bilder - Alt-attributet stöds i alla större webbläsare. Alla bilder ska ha Alt-text associerad. Det visar värdet på alt-attributet som ett verktygstips när vi svävar över bilden. Detta ger alternativ information om en bild om bilden inte kan visas.
Ange webbadressen http://www.easports.com, Klicka på visa bilder och kontrollera om alt-text är tillgänglig för bilder.
Du kommer under popup-fönstret:
Du får detaljerna som nämnts ovan.
# 5) Tab-ordning - Följdssekvensordning bör visas logiskt och korrekt. Du kan navigera till de olika länkarna genom att klicka på tabbtangenten. Efter att du har valt flikordningsindikator kan du se antal i närheten av länkarna som visar hur många gånger du behöver klicka på tabbtangenten för att nå den specifika länken.
För att verifiera flikordning, klicka på url http://www.easports.com och klicka på Struktur och välj indikator för flikordning.
# 6) Listor - Listan ska visas i korrekt struktur. Listor bör alltid kontrolleras för att se till att listobjekten verkligen finns i en lista. Listan kan ha två former: beställde lista och obeställd lista . Oordnade listor använder element och ordnade listor använder
element.
Ange webbadressen http://www.easports.com i n i verktygsfältet, klicka på strukturen och välj Listobjekt och verifiera listans ordning.
Exempel på oordnad lista:
Exempel på beställd lista:
# 7) Kontrast förhållande - Det ska ha en minimal kontrast som standard. Webbläsare bör tillåta människor att ändra färg på text och bakgrund om det behövs.
Ange google url https://www.google.co.in/ och klicka på bilder och välj Juicy Studio Luminosity Analyzer.
Ett nytt fönster öppnas med titeln Color Contrast Analyzer med resultattabellen. Den sista kolumnen är Luminosity Contrast Ratio.
b träd och b + träd
# 8) Etiketter - Etiketter ska visas korrekt.
Skriv in URL https://www.google.co.in/ och klicka på Struktur i verktygsfältet och välj fältuppsättning / etiketter som alternativ. Du kommer att se fältuppsättningen och etikettinformation.
# 9) Grundläggande Strukturera Kolla upp - I denna kontroll verifierar vi webbsidor utan bilder, stilar och layout.
Klicka på Bilder i verktygsfältet och sedan på Ta bort bilder.
Välj nu CSS och klicka sedan på Inaktivera CSS.
Klicka äntligen på Tabeller och välj sedan Linearize.
Tid för övning:
Låt oss nu ge oss själva ett exempel på tillgänglighetstest, naturligtvis finns lösningen. Men vi rekommenderar att du testar det själv innan du går vidare till svaret.
Verifiera rubrikerna, bilderna med alt-text, Tab-ordningsindikator och färgkontrast i http://www.cbssports.com
Lösning: Klicka på url http://www.cbssports.com på Internet Explorer.
För att verifiera rubriker klicka på Struktur och välj Rubrikstruktur för att verifiera rubriken.
Rubrikerna finns inte i H1. Alla rubriker finns i H2.
För att verifiera alt-text, klicka på Bilder och välj Visa bilder för att verifiera om alt-text finns i bilderna eller inte.
Du kommer att hitta att få av bilderna är med alt-text och få av dem är utan alt-attribut. Bilddetaljerna utan alt-text visas i pop-up och information om bilder med alt-text visas nära bilderna.
Till exempelalt = ”Sök CBS Sports.com” -text som visas nära sökikonen och alt = ”CBSSports.com” -text som visas nära Fantasy-logotypen.
För att verifiera flikbeställningsindikatorn, klicka på Struktur och välj Tab Order Order Indicator .
Räkningen visas nära länkarna som visar på vilket försök du kommer att kunna klicka på just den länken. Till exempel för att klicka på den översta NFL-länken måste du trycka på flik-knappen från tangentbordet 13 gånger.
Nu den sista för att verifiera färgkontrast, klicka på färg och välj Contrast Analyzer.
Texten passerar med dubbel A dvs AA.
Där är det här sättet att utvärdera webbplatsens tillgänglighet.
PREV-handledning | NÄSTA självstudie
Rekommenderad läsning
- Handledning för testning av WAVE-tillgänglighetsverktyg
- Fördjupade förmörkningsövningar för nybörjare
- Handledning för tillgänglighetstestning (En komplett steg-för-steg-guide)
- Topp 20 Tillgänglighetstestverktyg för webbapplikationer
- Bästa verktyg för testning av programvara 2021 (QA Test Automation Tools)
- Handledning för destruktiv testning och icke-destruktiv testning
- Funktionell testning mot icke-funktionell testning
- SOA Testing Tutorial: Testing Methodology For a SOA Architecture Model