wat tutorial
WAT- of Web Accessibility Toolbar-zelfstudie voor toegankelijkheidstests:
Hulpmiddelen voor het testen van toegankelijkheid werden in detail uitgelegd in onze vorige tutorial in de Toegankelijkheidstesten
WAT (werkbalk voor webtoegankelijkheid) - is een werkbalk voor Internet Explorer-browser en andere browsers - Het kan helpen bij het evalueren van een webpagina voor naleving van de Web Content Accessibility Guidelines versie 2 (WCAG 2.0).
Hoe WAT Tool te gebruiken?
Alstublieft download en installeer het vanaf hier
Na een succesvolle installatie ziet u een extra hulpprogramma voor webtoegankelijkheid net onder de adresbalk.
We gaan dit leren met behulp van de EAsports-website - http://www.easports.com.
# 1) Paginatitel - We kunnen de titelbalk van de pagina verifiëren in de titelbalk van het venster of de titelbalk van het tabblad van de browsers. Als u met de muis op het tabblad zweeft, krijgt u informatie over de paginatitel.
Voer de URL http://www.easports.com in en verifieer de paginatitel in de titelbalk van het tabblad door met de muis te bewegen.
# 2) Kleur - Kleur van de website moet doorgaan in Color Contrast Analyzer.
Er zijn 3 verschillende conformiteitsniveaus om de kleurverhouding te bepalen, d.w.z. niveau A, AA en AAA.
Het moet een AA of AAA passeren
'A' staat voor Laag niveau van toegankelijkheid, 'AA' staat voor Gemiddeld niveau van toegankelijkheid en 'AAA' staat voor het hoogste niveau van toegankelijkheid.
Voer de URL in http://www.easports.com i n de werkbalk, klik op het tabblad Kleur en selecteer Contrast Analyzer en controleer.
# 3) Koppen - De koppen geven een effectief overzicht van de inhoud van de pagina. Alle pagina's moeten beginnen met H1- of H2-koppen. Koptekst moet groter en vetgedrukt zijn en op de webpagina's worden gemarkeerd. En de pagina moet beginnen met 'h1' en op elke pagina moet er minstens één kop staan.
Klik op http://www.easports.com om de koersstructuur te controleren en selecteer het tabblad Structuur en klik vervolgens op de kopstructuur en verifieer. Het geeft je alle details van de titeltitel. Het zal ook onderzoeken of de koppen correct zijn genest of niet.
# 4) Alt-tekst voor afbeeldingen - Het alt-attribuut wordt ondersteund in alle grote browsers. Alle afbeeldingen moeten een alt-tekst hebben die eraan is gekoppeld. Het toont de waarde van het alt-attribuut als een tooltip wanneer we over de afbeelding bewegen. Dit biedt alternatieve informatie over een afbeelding als de afbeelding niet kan worden weergegeven.
Voer de url in http://www.easports.com, klik op afbeeldingen weergeven en controleer of alt-tekst beschikbaar is voor afbeeldingen.
U krijgt onderstaande pop-up:
U krijgt de details zoals hierboven vermeld.
# 5) Tabvolgorde - De volgorde van de tabbladen moet logisch en correct worden weergegeven. U kunt naar de verschillende links navigeren door op de tab-toets te klikken. Nadat u de tabvolgorde-indicator heeft geselecteerd, kunt u het aantal tellen bij de links zien, wat aangeeft hoe vaak op de tabtoets moet worden geklikt om die specifieke link te bereiken.
Om de tabvolgorde te verifiëren, klikt u op url http://www.easports.com , en klik op Structuur en selecteer de tabvolgorde-indicator.
# 6) Lijsten - Lijst moet in de juiste structuur worden weergegeven. Lijsten moeten altijd worden gecontroleerd om er zeker van te zijn dat de lijstitems echt in één lijst zijn opgenomen. Lijst kan twee vormen hebben: besteld lijst en ongeordend lijst Ongeordende lijsten gebruiken de element en geordende lijsten gebruiken de
element.
Voer de url http://www.easports.com i n de werkbalk, klik op structuur en selecteer Lijstitems en controleer de volgorde van de lijst.
Voorbeeld van ongeordende lijst:
Voorbeeld van bestelde lijst:
# 7) Contrast verhouding - Het moet standaard een minimaal contrast hebben. Webbrowsers moeten mensen de mogelijkheid bieden om de kleur van tekst en achtergrond indien nodig te wijzigen.
Voer google url in https://www.google.co.in/ en klik op afbeeldingen en selecteer Juicy Studio Luminosity Analyzer.
Een nieuw venster wordt geopend met de titel Color Contrast Analyzer met de tabel met resultaten. De laatste kolom is Luminosity Contrast Ratio.
wat is stringstream in c ++
# 8) Etiketten - Labels moeten correct worden weergegeven.
URL invoeren https://www.google.co.in/ en klik in de werkbalk op Structuur en selecteer fieldset / labels als optie. U ziet de veldset en labeldetails.
# 9) Basis Structuur Controleren - Bij deze controle verifiëren we webpagina's zonder afbeeldingen, stijlen en lay-out.
Klik in de werkbalk op Afbeeldingen en vervolgens op Afbeeldingen verwijderen.
Selecteer nu CSS en klik vervolgens op CSS uitschakelen.
Klik ten slotte op Tabellen en selecteer Lineariseren.
Tijd om te oefenen:
Laten we onszelf nu een voorbeeldtaak voor toegankelijkheidstests geven, de oplossing wordt natuurlijk geboden. Maar we raden u aan dit zelf uit te proberen voordat u naar het antwoord gaat.
Controleer de koppen, afbeeldingen met alt-tekst, tabvolgorde-indicator en kleurcontrast in http://www.cbssports.com
Oplossing: Klik op url http://www.cbssports.com in Internet Explorer.
Om koppen te verifiëren, klikt u op Structuur en selecteert u Kopstructuur om de kop te verifiëren.
Koppen staan niet in H1. Alle koppen staan in H2.
Om alt-tekst te verifiëren, klikt u op Afbeeldingen en selecteert u Afbeeldingen weergeven om te controleren of alt-tekst in de afbeeldingen aanwezig is of niet.
U zult zien dat enkele van de afbeeldingen met alt-tekst zijn en enkele zonder alt-attribuut. De afbeeldingsdetails zonder alt-tekst worden in een pop-up weergegeven en de details van afbeeldingen met alt-tekst worden naast de afbeeldingen weergegeven.
Bijvoorbeeldalt = 'Zoek CBS Sports.com' tekst die wordt weergegeven in de buurt van het zoekpictogram en alt = 'CBSSports.com' tekst die wordt weergegeven in de buurt van het Fantasy-logo.
Om de tabvolgorde-indicator te verifiëren, klikt u op Structuur en selecteert u Tabvolgorde-indicator
Het aantal wordt weergegeven naast de links die aangeeft bij welke poging u op die specifieke link kunt klikken. Om bijvoorbeeld op de meeste NFL-links te klikken, moet u 13 keer op de tab-knop op het toetsenbord drukken.
Nu de laatste om het kleurcontrast te verifiëren, klik op kleur en selecteer Contrast Analyzer.
De tekst komt voorbij met dubbele A, d.w.z. AA.
Daar is dit de manier om de toegankelijkheid van de website te beoordelen.
PREV-zelfstudie VOLGENDE zelfstudie
Aanbevolen literatuur
- Tutorial WAVE Accessibility Testing Tool
- Diepgaande Eclipse-zelfstudies voor beginners
- Tutorial over toegankelijkheidstesten (een complete stapsgewijze handleiding)
- Top 20 hulpprogramma's voor het testen van toegankelijkheid voor webapplicaties
- Beste softwaretesttools 2021 (QA Test Automation Tools)
- Tutorial over destructief testen en niet-destructief testen
- Functioneel testen versus niet-functioneel testen
- SOA-testtutorial: testmethodologie voor een SOA-architectuurmodel