WCAG Audit
- Screenshot van de score;
- Documentatie van de problemen en de goede uitkomsten van de test;
- Beschrijfing van elk onderdeel;
- Beschrijf van de problemen met een oplossing in code.
De uitslag van de test is "!", Zalando heeft een totaal van 4 errors.
Elke ARIA role wordt ondersteund door een specifieke ARIA-attribute. Als die verkeerd worden samengevoegd zorgt dat ervoor dat de Aria-attributes ongeldig worden.
In het geval van de Zalando site wordt er gebruikt gemaakt van aria-haspopup & aria-expanded, maar niet van de aria-label. Als aria-label kunnen ze het als volgt noteren.
aria-label= "menu"
Wanneer een button geen toegankelijke naam heeft, wordt het door de screen reader voorgelezen als "button", waardoor de button onbruikbaar wordt voor gebruikers die afhankelijk zijn van screen readers.
Oplossing error 2: De tekst van de button moet waarneembaar zijn voor de screen reader.
Voorbeeld hoe het moet wordt genoteerd.
functie button
Tekst met laag contrast is voor veel gebruikers moeilijk of onmogelijk om te lezen.
Oplossing error 3: De contrast ratio voor platte tekst is 4.5:1 en voor titel is dat 3:1. Als hieraan wordt gehouden wordt de error verholpen.
Headings die niet niveaus (h1, h2, h3, etc) overslaan geven meer semantiek en structuur van de pagina. Hierdoor wordt het gemakkelijker om te navigeren en het begrijpen van de behulpzame/ondersteunende technologieën.
Oplossing error 4: Zorg ervoor dat de h1, h2, h3, etc, in een logische volgorde staan. Controleer bijvoorbeeld of de hiërarchie geordend staan via het kopniveau, dus na h1 een h2 en niet een h3. Verder moet er geen koptekstmarkering op een tekst die een kop is.
In het geval van de Zalando website wordt er begonnen met een h3, inplaats van een h1. Hierdoor klopt de hiërarchie niet meer en is er geen goede semantische structuur meer.
Ik ben begonnen met een keyboard test en heb ik getabbed door de website. In het algemeen werkt de navigatie prima, maar daaronder begint een plaatjes-carrousel en dan loopt die vast. Als het element in focus is dan wordt dat aangeduid door een zwarte border en een licht transparante grijze achtergrond. Door tab te gebruiken kan je onderdelen van de site overslaan, maar veel van de belangrijke onderdelen van de site worden dan ook overgeslagen. De navigatie is wel goed beschikbaar met tab, je kunt gemakkelijk langs elke link afgaan. Verder kan je naar je account instellingen via tab, dit is ook goed beschikbaar.
Vervolgens heb ik een screenreader test gedaan. Bij de screenreader loopt de test vanaf de navigatie vast. Ook kan de navigatie niet volledig worden benut met de screenreader. Alleen worden de kopjes voorgelezen, en niet de verdere links. De navigatie wordt wel in dezelfde volgorde voorgelezen als de keyboard test. De "nieuw" tot "outlet" kan wel worden voorgelezen met de screenreader, maar het uitklap menu wat daaronder wordt weergeven kan niet meer worden voorgelezen voor de screenreader.
De algemene filters zoals dames, heren & kinderen hebben een hover, de achtergrond kleur wordt grijs bij het hoveren. Het contrast verschil tussen niet erop hoveren en wel erop hoveren is niet heel prominent. Ook hebben buttons dit effect, wat niet duidelijk is of het clickable is of niet als je een zicht-beperking heb. Verder als je wilt filteren op type product komt er als je hovert een streepje onder het woord. Dit geeft beter aan dat het clickable is. Voor een touchscreen zijn hovers niet handig, omdat dat niet werkt. Dus dan is het ook niet duidelijk of het clickable is of niet.
De pagina heeft geen correcte heading structuur omdat ze beginnen met een h3, inplaats van een h1. Hierdoor klopt de hiërarchie niet meer en is er geen goede semantische structuur meer. De screenreader leest niet voor welk kopniveau de kopjes zijn.