Toetsenbord- en screenreadertest, stap voor stap | We.Inc
Een stapsgewijze handmatige test voor elke site: toetsenbordchecks, NVDA- en VoiceOver-commando's, een skiplink naar de inhoud, :focus-visible CSS en een afvinkbare checklist.
Om een site met het toetsenbord te testen, legt u de muis weg en gebruikt u Tab, Shift+Tab, Enter, Spatie en de pijltjestoetsen om alles te bereiken en te bedienen. Let daarbij op een zichtbare focusrand en een logische volgorde. Zet daarna een screenreader aan, NVDA op Windows of VoiceOver op Mac, en controleer of koppen, links, knoppen en formuliervelden duidelijk worden voorgelezen.
WCAG 2.2-criteria die deze tests dekken
Criterium
Niveau
Wat u controleert
2.1.1 Toetsenbord
Alles werkt zonder muis
2.1.2 Geen toetsenbordval
De focus kan altijd weer wegbewegen
2.4.1 Blokken omzeilen
Een manier om herhaalde navigatie over te slaan
2.4.3 Focusvolgorde
De tabvolgorde volgt de betekenis van de pagina
2.4.7 Focus zichtbaar
AA
U ziet altijd waar de focus is
2.4.11 Focus niet bedekt (minimum)
AA
Vaste balken verbergen het gefocuste element niet
4.1.2 Naam, rol, waarde
Bedieningselementen melden wat ze zijn en hun status
Automatische checkers vinden ontbrekende alt-tekst en te weinig contrast, maar ze kunnen niet zien of een menu met Enter opengaat of dat een screenreadergebruiker een formulier begrijpt. Deze pagina loopt de handmatige controle in volgorde door, met een oefenruimte die precies toont welk element de focus heeft en een checklist die bijhoudt waar u bent.
Open de pagina die u wilt testen in een ander tabblad. Houd deze checklist ernaast.
Doorloop eerst de toetsenbordstappen en vink elk item af. De voortgangsteller werkt mee terwijl u bezig bent.
Gebruik de oefenruimte hier om te oefenen: tab erdoorheen en de focustracker noemt het element dat de focus heeft.
Start daarna een screenreader met de commando's uit de tabellen en herhaal de route door te luisteren.
Kopieer de code voor de skiplink en de focusstijl om de meest voorkomende fouten op te lossen.
Test de belangrijkste routes, niet elke pagina: het menu, een zoekopdracht, het hoofdformulier, afrekenen of boeken, en elk dialoogvenster.
Zoom de browser in tot 200 procent terwijl u tabt. Focusranden en vaste headers botsen vaak bij grotere formaten.
Als u de standaard outline weghaalt, vervang hem dan in dezelfde regel. Laat outline: none nooit alleen staan.
Gebruik echte button- en a-elementen. Een klikbare div wordt door Tab overgeslagen en als gewone tekst voorgelezen.
Luister met de screenreader een heel formulier door voordat u iets aanpast. Ontbrekende labels hoort u meteen.
Veelgestelde vragen
Met welke screenreader moet ik testen?
Gebruik waar mogelijk wat uw bezoekers gebruiken. NVDA is gratis voor Windows van NV Access, en VoiceOver zit in elke Mac en iPhone ingebouwd. Komt het meeste verkeer van telefoons, voeg dan een ronde toe met VoiceOver op iPhone of TalkBack op Android.
Hoe start en stop ik NVDA en VoiceOver?
NVDA start na installatie met Control+Alt+N, en Insert+Q sluit het af. Op een Mac zet Command+F5 VoiceOver aan en uit. Alleen Control indrukken legt NVDA midden in een zin het zwijgen op.
Wat is een skiplink naar de inhoud?
Het is de eerste link op de pagina, meestal verborgen tot hij focus krijgt, die direct naar de hoofdinhoud springt. Toetsenbordgebruikers hoeven dan niet op elke pagina door de hele navigatie te tabben. WCAG noemt het een voldoende techniek voor 2.4.1 Blokken omzeilen, naast landmarks en koppen.
Moet ik :focus of :focus-visible gebruiken?
:focus-visible laat de browser bepalen wanneer een focusrand nuttig is, zodat toetsenbordgebruikers hem zien terwijl muisklikken op knoppen er meestal geen tekenen. Volgens MDN wordt het sinds maart 2022 breed ondersteund. Style :focus-visible en houd een zichtbare rand voor elk interactief element.
Wat is een toetsenbordval?
Een plek waar de focus in gaat en er met het toetsenbord niet meer uit komt, zoals een ingesloten speler of een eigen dialoogvenster dat Tab opslokt. Modale dialoogvensters horen de focus binnen te houden zolang ze open zijn, maar Escape of een sluitknop moet de bezoeker altijd laten vertrekken.
Bladermodus versus focusmodus
Screenreaders lezen webpagina's in een virtuele buffer waarin losse letters rondspringen: H voor de volgende kop, K voor de volgende link in NVDA. Komt u in een tekstveld, dan schakelt de reader naar focusmodus zodat letters juist getypt worden. Met NVDA+Spatie wisselt u handmatig tussen de twee.
Daarom kan een eigen widget die alleen op pijltjestoetsen reageert kapot lijken. In bladermodus kan de reader die toetsen opvangen voordat uw script ze hoort, dus gebruik native elementen of volg de patronen van de ARIA Authoring Practices.
Hoe het goed klinkt
Elk bedieningselement hoort te worden voorgelezen als een naam, een rol en waar relevant een status: Zoeken, bewerkbare tekst; Menu, knop, samengevouwen; Abonneren, selectievakje, niet aangevinkt. Ontbreekt een van de drie, repareer dan de markup voordat u ARIA toevoegt.
Koppen horen een overzicht te vormen dat u als inhoudsopgave zou kunnen lezen. Open de lijst met koppen in de elementenlijst van NVDA of de rotor van VoiceOver en kijk of die op zichzelf logisch is.
Vastleggen wat u vindt
Noteer elk probleem als de pagina, de stappen, wat u verwachtte en wat er gebeurde, plus het criterium waarop het faalt. Met die opzet kan een developer het reproduceren zonder te gissen.
Test na reparaties opnieuw met dezelfde stappen. Vooral focusproblemen komen vaak terug wanneer een header of modal een nieuwe stijl krijgt.
Toetsen voor testen met alleen het toetsenbord
Standaard toetsenbordgedrag van de browser
Toets
Wat hij moet doen
Tab / Shift+Tab
Naar het volgende of vorige focusbare element gaan
Enter
Een link volgen of op een knop drukken
Spatie
Op een knop drukken, een selectievakje aanvinken, de pagina scrollen als niets focus heeft
Pijltjestoetsen
Bewegen binnen keuzerondjes, selects, menu's en tablijsten
Escape
Een dialoogvenster, menu of pop-up sluiten
NVDA-commando's (Windows, desktopindeling)
De NVDA-toets is standaard Insert; de gebruikershandleiding staat ook Caps Lock toe. Losse lettertoetsen werken in bladermodus.
Uit de gebruikershandleiding van NVDA
Actie
Toetsen
NVDA starten
Control+Alt+N
Spraak stoppen
Control
Vanaf hier lezen (alles lezen)
NVDA+Down Arrow
Wisselen tussen blader- en focusmodus
NVDA+Space
Elementenlijst (links, koppen, landmarks)
NVDA+F7
Volgende kop / landmark / link
Volgend formulierveld / knop
Volgende tabel / lijst
NVDA afsluiten
NVDA+Q
VoiceOver-commando's (Mac)
VO staat voor de VoiceOver-modificatietoets: Control en Option samen ingedrukt, of alleen Caps Lock.
Uit de VoiceOver-gebruikershandleiding van Apple
Actie
Toetsen
VoiceOver aan- of uitzetten
Command+F5
De rotor openen
VO+U
Van rotorlijst wisselen (koppen, links en meer)
Pijl naar links of rechts in de rotor
Door de gekozen lijst bewegen
Pijl omhoog of omlaag in de rotor
Oplossingen voor de meest voorkomende fouten
Skiplink naar de inhoud
Klik in het resultaat en druk dan op Tab. De link schuift pas in beeld als hij focus heeft, en het doel is het main-element.
Een focusrand die alleen toetsenbordgebruikers zien
Tab naar de knoppen in het resultaat. De verschoven rand blijft vrij van de knoprand, en muisklikken laten hem meestal verborgen.
Houd gefocuste elementen onder een vaste header vandaan
scroll-padding-top reserveert ruimte bovenaan wanneer de browser een gefocust element of een anker in beeld scrolt.
Alleen toetsenbord
Druk één keer op Tab nadat de pagina geladen is
Er verschijnt een skiplink naar de inhoud die met Enter werkt
Tab door de hele pagina
Elke link, knop en elk veld wordt bereikt, in leesvolgorde
Let bij elke stop op de focusrand
Hij is altijd zichtbaar en nooit verborgen achter een vaste header
Open het menu en eventuele dropdowns
Enter of Spatie opent ze; Escape sluit ze en zet de focus terug
Bedien eigen widgets
Tabs, sliders en carrousels reageren op de verwachte toetsen
Open en sluit een dialoogvenster
De focus gaat erin, blijft erin en keert daarna terug naar de trigger
Vul het hoofdformulier in en verstuur het
Foutmeldingen zijn bereikbaar en de focus komt op een nuttige plek terecht
Probeer vast te lopen
Geen embed of widget houdt de focus gevangen
Screenreader
Luister naar de paginatitel en de eerste kop
Ze zeggen op welke pagina u bent
Open de lijst met koppen
Koppen vormen een logisch overzicht met één h1
Open de lijst met landmarks
Banner-, navigatie-, main- en footergebieden zijn aanwezig
Loop door de links
Elke linktekst is ook buiten de context begrijpelijk
Bezoek elk formulierveld
Elk veld meldt een label, het type en of het verplicht is
Roep een foutmelding en een succesmelding op
Beide worden voorgelezen zonder de muis te bewegen
Controleer afbeeldingen
Informatieve afbeeldingen hebben alt-tekst; decoratieve blijven stil
Schakel een knop of selectievakje om
De nieuwe status, zoals uitgevouwen of aangevinkt, wordt voorgelezen
Testchecklist
Opnieuw
Vink elke stap af terwijl u test. Uw vinkjes blijven alleen op deze pagina.
{n} van {total} stappen klaar
Niets op de pagina heeft focus
{t}-veld
geen toegankelijke naam
Tab het gebied in om te beginnen
Oefenruimte voor focus
Tab door deze bedieningselementen. De tracker noemt het element dat nu de focus heeft.