Een afleveradresdialoog met het toetsenbord testen
Een uitgewerkt voorbeeld behandelt focusvolgorde, annuleren en opslaan in een adresvenster, zodat toetsenbordfouten reproduceerbaar worden.
Een dialoogvenster voor een afleveradres moet volledig met het toetsenbord te bedienen zijn. Test de hele werkwijze vanaf openen tot de terugkeer naar de pagina. Alleen de opslagknop kunnen bereiken is onvoldoende.
Dit voorbeeld is fictief: adres D-17 in het klantportaal is ‘Hafenweg 8’. De persoon wil het huisnummer naar 10 wijzigen. Het venster bevat straat en huisnummer, plus ‘Annuleren’ en ‘Adres opslaan’. Dit is een handmatige functietest, geen volledige toegankelijkheidsbeoordeling.
De fout als reeks handelingen vastleggen
In de veronderstelde beginsituatie opent het venster, maar blijft de focus op ‘Afleveradres wijzigen’ achter het verduisterde vlak. Met Tab worden vervolgens links in de voettekst bereikt. De zichtbare adresvelden worden overgeslagen. Een muistest had deze fout gemakkelijk kunnen missen.
Leg startpagina, activerende knop, gebruikte toetsen en werkelijk gefocust element vast. Ontwikkeling kan het probleem dan reproduceren. Gebruik een veilige omgeving met testgegevens; wijzig geen echt klantadres bij wijze van proef.
Het verwachte gedrag vastleggen
Voor dit korte venster is het veld Straat een logische eerste focuspositie. Lange dialoogvensters of vensters met ingrijpende gevolgen kunnen een andere positie vragen. Het WAI-dialoogpatroon beschrijft deze verschillen.
Actie | Verwacht resultaat in het voorbeeld |
|---|---|
Met Tab naar de knop, dan Enter | Venster opent; focus is zichtbaar in Straat. |
Met Tab vooruitgaan | Straat, huisnummer, Annuleren, Adres opslaan; daarna weer Straat. |
Met Shift+Tab teruggaan | Dezelfde elementen in omgekeerde volgorde; geen sprong achter het venster. |
Huisnummer 10 invoeren en vóór opslaan Escape gebruiken | Venster sluit; focus keert terug naar de knop; D-17 blijft Hafenweg 8. |
Opnieuw openen en 10 opslaan | Succes verschijnt pas na bevestigde opslag; D-17 toont Hafenweg 10. |
Opslag wordt door bedrijfsregels afgewezen | Begrijpelijke fout; invoer blijft behouden; het betreffende gebied is bereikbaar. |
De Tab-volgorde geldt voor deze specifieke opbouw. Uw interface kan extra bedieningselementen bevatten.
De oorzaak op de juiste plek oplossen
Gebruik echte knoppen voor acties en juist gelabelde velden. Een eigen dialoogvenster heeft een toegankelijke naam en correct focusbeheer nodig. Alleen role="dialog" of aria-modal="true" blokkeert de achtergrond niet en implementeert geen toetsenbordbediening.
Ontwikkeling moet openen, het vasthouden van focus binnen het actieve modale venster en sluiten samen behandelen. Hier bestaat de activerende knop na sluiten nog. Verwijdert een andere werkwijze die knop, dan is een andere logische terugkeerpositie nodig. Styling mag de zichtbare focusindicator niet verwijderen.
Sluiten tijdens het opslaan testen
Escape trekt een al verstuurd serververzoek niet automatisch terug. In dit voorbeeld mag het venster ook tijdens de verwerking sluiten. De pagina blijft dan voor D-17 ‘Adreswijziging wordt verwerkt’ tonen. Een bevestigde reactie werkt het adres bij; een onzekere uitkomst blijft onopgehelderd. ‘Wijziging verworpen’ zou dan onjuist zijn.
Herhaal de gecorrigeerde test in ondersteunde browsers en met een geschikte schermlezerconfiguratie. Leg observaties en open fouten vast. De herstelde toetsenbordwerkwijze zegt nog niets over alle andere pagina’s, contrasten of inhoud.
Bronnen
Verder lezen
Alle artikelen
Design & UX met ASES
Gebruikerservaring, interfaces en merkuitstraling