wat tutorial
Vodič za alatnu traku za WAT ili web dostupnost za testiranje pristupačnosti:
Alati za ispitivanje pristupačnosti su detaljno objašnjeni u našem prethodnom vodiču u Serija ispitivanja pristupačnosti .
WAT (Alatna traka za web-dostupnost) Je alatna traka za Preglednik Internet Explorer i ostali preglednici - Može vam pomoći u ocjenjivanju web stranice na usklađenost sa Smjernicama za pristup web sadržaju, verzija 2 (WCAG 2.0).
Kako koristiti WAT alat?
Molim preuzmite i instalirajte ga odavde .
Nakon uspješne instalacije, vidjet ćete dodatni alat za internetsku dostupnost odmah ispod adresne trake.
To ćemo naučiti uz pomoć web stranice EAsports - http://www.easports.com.
# 1) Naslov stranice - Traku naslova stranice možemo provjeriti na naslovnoj traci prozora ili naslovnoj traci preglednika. Kada mišem zadržite pokazivač na kartici, dobit ćete informacije o naslovu stranice.
Unesite URL http://www.easports.com i provjerite naslov stranice u naslovnoj traci kartice lebdenjem miša.
# 2) Boja - Boja web stranice trebala bi proći u analizatoru kontrasta boja.
Postoje 3 različite razine sukladnosti za određivanje omjera boja, tj. Razina A, AA i AAA.
Mora dobiti prolaz na AA ili AAA .
'A' predstavlja nisku razinu pristupačnosti, 'AA' predstavlja srednju razinu pristupačnosti, a 'AAA' predstavlja najvišu razinu pristupačnosti.
Unesite URL http://www.easports.com i Na alatnoj traci kliknite karticu Boja i odaberite Contrast Analyzer i provjerite.
# 3) Naslovi - Naslovi pružaju učinkovit pregled sadržaja stranice. Sve stranice trebaju započeti s naslovima H1 ili H2. Tekst naslova trebao bi biti veći, podebljan i označen na web stranicama. A Stranica bi trebala počinjati s „h1“ i na svakoj stranici trebao bi biti barem jedan naslov.
Da biste provjerili strukturu zaglavlja, kliknite http://www.easports.com i odaberite karticu Struktura, a zatim kliknite strukturu naslova i provjerite. Pružit će vam sve pojedinosti o naslovu naslova. Također će ispitati jesu li naslovi pravilno ugniježđeni ili ne.
# 4) Alternativni tekst za slike - Atribut alt podržan je u svim glavnim preglednicima. Sve slike trebale bi imati pridruženi alt tekst. Prikazuje vrijednost atributa alt kao opis alata kada zadržimo pokazivač iznad slike. Ovo pruža zamjenske informacije o slici ako se slika ne može prikazati.
Unesite url http://www.easports.com, kliknite na prikaži slike i provjerite je li dostupan zamjenski tekst za slike.
Dobit ćete ispod skočnog prozora:
Dobit ćete detalje kako je gore spomenuto.
# 5) Redoslijed kartica - Redoslijed redoslijeda kartica trebao bi biti prikazan logično i pravilno. Možete doći do različitih veza klikom na tipku kartice. Nakon odabira indikatora redoslijeda kartica, pored veza možete vidjeti broj brojeva koji pokazuje koliko je puta potrebno kliknuti tipku kartice da biste došli do te veze.
Da biste provjerili redoslijed kartica kliknite na url http://www.easports.com , a zatim kliknite Struktura i odaberite indikator redoslijeda kartica.
# 6) Popisi - Popis treba prikazati u ispravnoj strukturi. Uvijek treba provjeriti popise kako bi se osiguralo da su stavke na popisu stvarno sadržane na jednom popisu. Popis može biti u dva oblika: naredio popis i neuređeno popis . Neuređeni popisi koriste element i poredani popisi koriste
element.
Unesite url http://www.easports.com i Na alatnoj traci kliknite strukturu i odaberite Stavke popisa i provjerite redoslijed popisa.
Primjer neuređenog popisa:
Primjer poredanog popisa:
# 7) Kontrast omjer - Prema zadanim postavkama trebao bi imati minimalni kontrast. Web preglednici trebaju dopustiti ljudima da mijenjaju boju teksta i pozadine ako je potrebno.
Unesite google URL https://www.google.co.in/ i kliknite slike i odaberite Juicy Studio Luminosity Analyzer.
Otvorit će se novi prozor s naslovom Analizator kontrasta u boji s tablicom rezultata. Posljednji stupac je Omjer kontrasta svjetlosti.
5 primjera programskih jezika visoke razine
# 8) Oznake - Oznake bi trebale biti ispravno prikazane.
Unesite url https://www.google.co.in/ i na alatnoj traci kliknite Struktura i odaberite skup polja / oznake kao opciju. Vidjet ćete detalje o polju i naljepnici.
# 9) Osnovno Struktura Ček - U ovoj provjeri provjeravamo web stranice bez slika, stilova i izgleda.
Na alatnoj traci kliknite Slike, a zatim Ukloni slike.
Sada odaberite CSS, a zatim kliknite Onemogući CSS.
Na kraju kliknite Tablice, a zatim odaberite Linearize.
Vrijeme za vježbanje:
Dajmo si sada uzorak zadatka za ispitivanje pristupačnosti, naravno rješenje je ponuđeno. No, preporučujemo da ovo sami isprobate prije nego što prijeđete na odgovor.
Provjerite naslove, slike s alt tekstom, indikator redoslijeda kartica i kontrast boja http://www.cbssports.com
Riješenje: U Internet Exploreru kliknite url http://www.cbssports.com.
Da biste provjerili naslove, kliknite Struktura i odaberite Struktura naslova za provjeru naslova.
Naslovi nisu u H1. Svi naslovi su u H2.
Da biste provjerili zamjenski tekst, kliknite Slike i odaberite Prikaži slike da biste provjerili je li na njima prisutan zamjenski tekst.
Naći ćete da je nekoliko slika s alt tekstom, a malo je njih bez alt atributa. Pojedinosti o slici bez zamjenskog teksta prikazuju se u skočnom prozoru, a detalji o slikama s zamjenskim tekstom prikazuju se u blizini slika.
Na primjeralt = 'Pretraži CBS Sports.com' tekst koji se prikazuje u blizini ikone pretraživanja i alt = 'CBSSports.com' tekst koji se prikazuje u blizini Fantasy logotipa.
Da biste provjerili indikator redoslijeda kartica, kliknite Struktura i odaberite Pokazatelj redoslijeda kartica .
Brojač će se prikazati u blizini veza, što pokazuje u kojem ćete pokušaju moći kliknuti na tu vezu. Na primjer, za klik na gornju većinu NFL veze morat ćete pritisnuti tipku tab s tipkovnice 13 puta.
Sada posljednja koja je provjerila kontrast boja, kliknite na boju i odaberite Contrast Analyzer.
Tekst prolazi dvostrukim A tj. AA.
Eto, ovo je način za procjenu pristupačnosti web stranice.
Preporučena literatura
- Vodič za alat za testiranje pristupačnosti WAVE-a
- Dubinski vodiči pomračenja za početnike
- Vodič za testiranje pristupačnosti (cjelovit vodič po koracima)
- Top 20 alata za testiranje pristupačnosti za web aplikacije
- Najbolji alati za testiranje softvera 2021. (Alati za automatizaciju ispitivanja kvalitete)
- Vodič za ispitivanje razaranja i ispitivanja bez razaranja
- Funkcionalno ispitivanje vs nefunkcionalno testiranje
- Vodič za SOA testiranje: Metodologija testiranja za model arhitekture SOA