Annevd
commented
2 weeks ago 9/10 Testen
W3 HTML validator
Na het doen van een HTML validator op mijn accessibility menu kreeg ik deze error:
Maar wanneer ik dit op probeer te lossen door dit role attribute er op te zetten, krijg ik in lighthouse een error dat dit attribute er juist niet op mag:
Voor nu laat ik het zonder het role attribute, omdat een <input type="checkbox" automatisch al de role checkbox heeft, en het dus niet nodig is om het expliciet te specificeren.
De lighthouse melding suggereert het gebruik van roles en properties om accessibility te enhancen, maar wanneer ze overbodig zijn kan dat lijden tot waarschuwingen. De HTML validator overweegt waarschijnlijk niet de context van hoe de checkbox gebruikt wordt.
Bron ARIA-Roles MDN
"The first rule of ARIA is if a native HTML element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding ARIA. Instead use the native HTML checkbox of <input type="checkbox"> (with an associated <label>), which natively provides all the functionality required:"
For example:
<input type="checkbox" id="chk1-label" name="RememberPreferences" />
<label for="chk1-label">Remember my preferences</label>In mijn code gebruik ik dus native HTML, en is de ARIA role niet nodig.
Lighthouse
Ook heb ik een lighthouse test gedaan op basis van accessibility:
De enige melding die lighthouse geeft, komt van elders op de website. Voor mijn accessibility menu geeft het dus geen meldingen!
Keyboard test
Het menu is volledig te besturen via je keyboard met tab en space:
Device test
Ik heb het menu op mijn Iphone 11 gestest. De menu knop was groot genoeg om makkelijk te openen, en de opties waren ook goed klikbaar doordat je op het gehele label kan klikken en niet alleen de switch. Verder werkte alles zoals het zou horen.
Screenreader test
Wanneer je tabbed op de menu knop wordt er "kopniveau 1: accessibility opties, selectievakje uitgeschakeld" voorgelezen. Dit is op zich wel duidelijk en laat de gebruiker weten wat het is, en dat het selectievakje is uitgeschakeld. Wanneer het menu geopend is en je tabbed weer op de menu knop, zegt de verteller: "kopniveau 1: accessibility opties, selectievakje ingeschakeld"
Wat misschien nog niet duidelijk is is dat het een knop is die het menu opent.
In het menu zelf leest de verteller dit voor wanneer je op een niet-gechecked functie tabbed: "dark mode knop uit",
of wanneer het aan staat: "dark mode knop aan".
Wat hier nog beter kan is aan te geven aan de gebruiker dat de knop aangezet kan worden.
Vervolg op issue #139
User story: Als bezoeker wil ik toegankelijkheid features zien en kunnen aanpassen
Taak: Button popup maken & testen met daarin de accessibility tools (html/css)