Doe een WCAG audit op een bestaande website uit je eigen omgeving en rapporteer daarover.
In de workshop S03W1-02-WCAG-audit wordt behandeld hoe je een WCAG audit kan uitvoeren.
Je leert hoe je een toegankelijkheidstest kan uitvoeren en je presenteert je bevindingen.
Fork deze deeltaak, zet je Wiki aan bij Repository Settings en documenteer je test in de Wiki.
Het is de verantwoordelijkheid van een frontender dat een website voor verschillende mensen, met verschillende apparaten, in verschillende situaties, Toegankelijk is. Met goede code en een goed design kun je ervoor zorgen dat mensen met een (tijdelijke) beperking een website ook op een prettige manier kunnen bedienen.
Stel je voor dat de gebruiker van jouw website niet kan zien, of kleurenblind is, of een website bedient met alleen het toetsenbord, of spastisch is, of een arm in het gips heeft. Of ...
Een goede toegankelijke website voldoet aan de Web Content Accessibility Guidelines van het W3C. The A11Y Project is een goede plek om te lezen over toegankelijkheid, daar staat ook een checklist waar een website aan moet voldoen, en waarmee je je eigen site kunt controleren.
Voor het testen van toegankelijkheid kun je een website automatisch testen in de browser met bijvoorbeeld de tool Lighthouse van Google. Voor deze opdracht ga je zo'n test uitvoeren en documenteer je wat je hebt getest in de Wiki van deze deeltaak.
- Eerst ga je een Lighthouse test doen van een bestaande website en documenteer je de belangrijkste bevindingen uit de test in je Wiki
- Daarna ga je met de hand dezelfde website verder testen en documenteer je de bevindingen van de tests.
- About READMEs
- Getting started with writing and formatting on GitHub
- Basic writing and formatting syntax
Lighthouse is een geautomatiseerde test die je in een Chrome (of op Chromium gebaseerde) browser kan uitvoeren. In de Devtools kun je Lighthouse gebruiken. Je begint de toegankelijkheidstest met een Lighthouse test.
- Ga naar een website uit je eigen omgeving, bijvoorbeeld die van je eigen voetbalvereniging, yogaclub, muziekschool, bijbaantje, fitnessschool of het werk van je ouders.
- Open de Devtools en klik naar Lighthouse.
- Selecteer alleen Accessibility en zorg dat Clear storage aan staat en Throttling op default.
- Run de test, maak een screenshot van de score en zet deze in de Wiki.
- Bekijk het Lighthouse rapport en documenteer de problemen en de goede uitkomsten van de test in de Wiki.
- Schrijf bij elk onderdeel in je eigen woorden wat het betekent. Vraag om hulp als je niet begrijpt wat de verschillende problemen betekenen.
- Schrijf bij de problemen hoe je dit in code zou kunnen oplossen. Vraag om hulp als je het niet weet.
Lighthouse is een geautomatiserde test, die veel voorkomende toegankelijkheidsproblemen kan testen. Echter, een geautomatiseerde test is nooit voldoende om een website goed op toegankelijkheid te testen. Hiervoor moet je nog een aantal handmatige tests uitvoeren en beoordelen. In het Lighthouse rapport staan een aantal handmatige checks genoemd, maar ook op de website van The A11Y Project staat een checklist. Deze gaan we gebruiken om de bestaande website mee te testen.
- Lees de handmatige checks die in het Lighthouse rapport worden aanbevolen.
- Vergelijk de lijst met de checklist van de A11Y Project checklist. Je zult dan zien dat hier (ongeveer) dezelfde checks staan, maar dan anders georganiseerd.
- Begin met het testen van de website met je keyboard, zoals beschreven in het artikel, “How To Do an Accessibility Review”.
- Test de website met een screen reader, zoals beschreven in het artikel, “How To Do an Accessibility Review”.
- Test de interactive elements en headings and landmarks van de website, zoals beschreven in het artikel “How To Do an Accessibility Review”.
- Documenteer je bevindingen stap voor stap in de Wiki.
- How To Do an Accessibility Review
- The A11Y Project Checklist
- Building the most inaccessible site possible with a perfect Lighthouse score
- VoiceOver voor macOS (en iOS)
- JAWS voor Windows
- NVDA voor Windows
- Screen Reader Keyboard Shortcuts and Gestures
Deze opdracht is done als:
- Je hebt een Lighthouse test gedaan op een bestaande website en de test is gedocumenteerd in de Wiki van deze deeltaak
- Je hebt een keyboard navigatie test gedaan op een bestaande website en gedocumenteerd in de Wiki
- Je hebt een screen reader test gedaan op een bestaande website en gedocumenteerd in de Wiki
- Je hebt een interactive elements test gedaan op een bestaande website en gedocumenteerd in de Wiki
- Je hebt een headings and landmarks test gedaan op een bestaande website en gedocumenteerd in de Wiki