wat tutorial
Tutorial WAT sau Web Accessibility Toolbar pentru testarea accesibilității:
Instrumente de testare a accesibilității au fost explicate în detaliu în tutorialul nostru anterior din Seria de testare a accesibilității .
WAT (Bara de instrumente de accesibilitate web) - este o bara de instrumente pentru Browser Internet Explorer și alte browsere - Poate ajuta la evaluarea unei pagini web pentru conformitatea cu Ghidul de accesibilitate a conținutului web versiunea 2 (WCAG 2.0).
Cum se folosește instrumentul WAT?
Vă rog descărcați-l și instalați-l de aici .
După instalarea cu succes, veți vedea un instrument suplimentar de accesibilitate web chiar sub bara de adrese.
Vom învăța acest lucru cu ajutorul site-ului EAsports - http://www.easports.com.
# 1) Titlul paginii - Putem verifica bara de titlu a paginii în bara de titlu a ferestrei sau bara de titlu a filei din browsere. La trecerea mouse-ului pe fila vă va oferi informațiile despre titlul paginii.
Introduceți adresa URL http://www.easports.com și verificați titlul paginii în bara de titlu a filei cu mouse-ul.
# 2) Culoare - Culoarea site-ului web trebuie să treacă în Color Contrast Analyzer.
Există 3 niveluri diferite de conformitate pentru a determina raportul de culoare, adică nivelul A, AA și AAA.
Trebuie să obțină un permis pe AA sau AAA .
„A” reprezintă un nivel scăzut de accesibilitate, „AA” reprezintă un nivel mediu de accesibilitate și „AAA” reprezintă cel mai înalt nivel de accesibilitate.
Introduceți adresa URL http://www.easports.com i n bara de instrumente, faceți clic pe fila Color și selectați Contrast Analyzer și verificați.
# 3) Titluri - Titlurile oferă o imagine de ansamblu eficientă asupra conținutului paginii. Toate paginile ar trebui să înceapă cu titlurile H1 sau H2. Textul antet trebuie să fie mai mare, îndrăzneț și să fie marcat în paginile web. Și Pagina ar trebui să înceapă cu „h1” și pe fiecare pagină ar trebui să existe cel puțin un titlu.
Pentru a verifica structura titlului faceți clic pe http://www.easports.com și selectați fila Structură și apoi faceți clic pe structura antetului și verificați. Vă va oferi toate detaliile titlului titlului. De asemenea, va examina dacă titlurile sunt cuibărite corect sau nu.
# 4) Text alternativ pentru imagini - Atributul alt este acceptat în toate browserele majore. Toate imaginile ar trebui să aibă text alternativ asociat. Afișează valoarea atributului alt ca indicativ atunci când trecem cu mouse-ul peste imagine. Aceasta oferă informații alternative despre o imagine dacă imaginea nu poate fi afișată.
Introduceți adresa URL http://www.easports.com, Faceți clic pe Afișare imagini și verificați dacă textul alternativ este disponibil pentru imagini.
Veți obține mai jos o fereastră pop-up:
Veți primi detaliile menționate mai sus.
# 5) Ordinea filelor - Ordinea secvenței de taburi trebuie afișată logic și corect. Puteți naviga la diferitele linkuri făcând clic pe tasta tab. După ce ați selectat indicatorul pentru comanda filelor, puteți vedea numărul de numere lângă linkuri, care arată de câte ori trebuie să faceți clic pe tasta filă pentru a ajunge la acel link.
Pentru a verifica ordinea filelor, faceți clic pe adresa URL http://www.easports.com , și faceți clic pe Structură și selectați indicatorul de ordine al filei.
# 6) Liste - Lista trebuie să fie afișată în structura corespunzătoare. Listele trebuie verificate întotdeauna pentru a vă asigura că elementele listei sunt într-adevăr cuprinse într-o listă. Lista poate avea două forme: ordonat listă și neordonat listă . Listele neordonate folosesc elementul și listele ordonate folosesc
element.
Introduceți adresa URL http://www.easports.com i n bara de instrumente, faceți clic pe structură și selectați Elementele listei și verificați ordinea listei.
Exemplu de listă neordonată:
Exemplu de listă ordonată:
# 7) Contrast raport - Ar trebui să aibă un contrast minim în mod implicit. Browserele web ar trebui să permită oamenilor să schimbe culoarea textului și a fundalului, dacă este necesar.
Introduceți adresa URL Google https://www.google.co.in/ și faceți clic pe imagini și selectați Juicy Studio Luminosity Analyzer.
Se va deschide o nouă fereastră cu titlul Analizor de contrast color cu tabelul de rezultate. Ultima coloană este Luminosity Contrast Ratio.
ochelari de jocuri de realitate virtuală Xbox 360
# 8) Etichete - Etichetele trebuie afișate corect.
Introdu URL-ul https://www.google.co.in/ și în bara de instrumente faceți clic pe Structură și selectați setul de câmpuri / etichete ca opțiune. Veți vedea setul de câmpuri și detaliile etichetei.
# 9) De bază Structura Verifica - În această verificare verificăm paginile web fără imagini, stiluri și aspect.
În bara de instrumente, faceți clic pe Imagini, apoi pe Eliminare imagini.
Acum selectați CSS și apoi faceți clic pe Dezactivare CSS.
În cele din urmă, faceți clic pe Tabel, apoi selectați Linearizare.
Timp pentru antrenament:
Să ne oferim acum o probă de testare a accesibilității, desigur, soluția este oferită. Dar vă recomandăm să încercați singur acest lucru înainte de a merge la răspuns.
Verificați titlurile, imaginile cu text alternativ, indicatorul ordinii taburilor și contrastul culorilor în http://www.cbssports.com
Soluţie: Faceți clic pe adresa URL http://www.cbssports.com pe Internet Explorer.
Pentru a verifica titlurile, faceți clic pe Structură și selectați Structura antetului pentru verificarea antetului.
Titlurile nu sunt în H1. Toate titlurile sunt în H2.
Pentru a verifica text alternativ, faceți clic pe Imagini și selectați Afișare imagini pentru a verifica dacă textul alternativ este prezent sau nu în imagini.
Veți găsi câteva dintre imaginile cu text alternativ și câteva dintre ele fără atribut alt. Detaliile imaginii fără text alternativ se afișează în fereastră pop-up și detaliile imaginilor cu text alternativ se afișează lângă imagini.
De exemplualt = „Căutați CBS Sports.com” text care se afișează lângă pictograma de căutare și alt = „CBSSports.com” text care se afișează lângă sigla Fantasy.
Pentru a verifica indicatorul pentru comanda tabului, faceți clic pe Structură și selectați Indicatorul comenzii taburilor .
Numărul se va afișa lângă link-uri, care arată în ce încercare veți putea face clic pe acel link. De exemplu, pentru a face clic pe cel mai mare link NFL, va trebui să apăsați butonul tab de la tastatură de 13 ori.
Acum, ultimul pentru a verifica contrastul culorilor, faceți clic pe culoare și selectați Contrast Analyzer.
Textul trece cu dublu A, adică AA.
Acolo, acesta este modul de evaluare a accesibilității site-ului web.
Lectură recomandată
- Tutorial WAVE Accessibility Testing Tool
- Tutoriale detaliate pentru eclipsă pentru începători
- Tutorial de testare a accesibilității (un ghid complet pas cu pas)
- Top 20 instrumente de testare a accesibilității pentru aplicații web
- Cele mai bune instrumente de testare software 2021 (Instrumente de automatizare a testelor de calitate)
- Tutorial de testare distructivă și testare nedistructivă
- Testarea funcțională Vs testarea non-funcțională
- Tutorial de testare SOA: metodologie de testare pentru un model de arhitectură SOA