Test en leveringsadressedialog med tastaturet
Et gjennomarbeidet eksempel viser fokusrekkefølge, avbrytelse og lagring i en adressedialog, slik at tastaturfeil kan gjenskapes.
En dialog for leveringsadresse må kunne betjenes fullt ut med tastaturet. Test hele forløpet fra åpning til retur til siden. Å kunne nå Lagre-knappen er ikke nok.
Eksemplet er oppdiktet: Adresse D-17 i kundeportalen er «Hafenweg 8». Personen vil endre husnummeret til 10. Dialogen inneholder gate og husnummer samt «Avbryt» og «Lagre adresse». Dette er en manuell funksjonstest, ikke en fullstendig tilgjengelighetsvurdering.
Beskriv feilen som et forløp
I den antatte starttilstanden åpnes dialogen, men fokus blir på «Endre leveringsadresse» bak den nedtonede flaten. Tab fører deretter til lenker i bunnteksten. De synlige adressefeltene hoppes over. En musetest kunne lett ha oversett feilen.
Noter startside, utløsende knapp, brukte taster og elementet som faktisk får fokus. Utviklingen kan da gjenskape samme problem. Bruk et trygt miljø med testdata; ikke endre en ekte kundeadresse som forsøk.
Fastsett forventet atferd
I denne korte dialogen er Gate en fornuftig første fokusposisjon. Lange dialoger eller dialoger med vesentlige konsekvenser kan trenge en annen. WAIs dialogmønster beskriver forskjellene.
Handling | Forventet resultat i eksemplet |
|---|---|
Nå knappen med Tab og trykk Enter | Dialogen åpnes; fokus er synlig i Gate. |
Gå fremover med Tab | Gate, husnummer, Avbryt, Lagre adresse; deretter Gate igjen. |
Gå bakover med Shift+Tab | Samme elementer i motsatt rekkefølge; ingen hopp bak dialogen. |
Skriv husnummer 10 og bruk Escape før lagring | Dialogen lukkes; fokus går tilbake til knappen; D-17 forblir Hafenweg 8. |
Åpne igjen og lagre 10 | Suksess vises først etter bekreftet lagring; D-17 viser Hafenweg 10. |
Lagringen avvises av forretningsregler | Forståelig feil; inndata bevares; det berørte området kan nås. |
Tab-rekkefølgen gjelder akkurat denne oppbygningen. Grensesnittet ditt kan inneholde flere kontroller.
Rett årsaken på riktig sted
Bruk ekte knapper til handlinger og riktig navngitte felt. En egenutviklet dialog trenger et tilgjengelig navn og riktig fokushåndtering. role="dialog" eller aria-modal="true" alene blokkerer ikke bakgrunnen og gir ikke tastaturbetjening.
Utviklingen må behandle åpning, det å holde fokus i den aktive modale dialogen og lukking samlet. Her finnes den utløsende knappen fortsatt etter lukking. Fjerner et annet forløp den, trengs en annen logisk returposisjon. Stilregler må ikke fjerne den synlige fokusindikatoren.
Test lukking mens lagring pågår
Escape trekker ikke automatisk tilbake en serverforespørsel som allerede er sendt. I eksemplet kan vinduet også lukkes under behandlingen. Siden viser fortsatt «Adresseendring behandles» for D-17. Et bekreftet svar oppdaterer adressen; et usikkert resultat forblir uavklart. «Endring forkastet» ville vært feil i den situasjonen.
Gjenta den rettede testen i støttede nettlesere og med en passende skjermleserkonfigurasjon. Noter observasjoner og åpne feil. Det rettede tastaturforløpet sier ingenting om alle andre sider, kontraster eller innhold.
Kilder
Les videre
Alle artikler
Design og UX med ASES
Brukeropplevelse, grensesnitt og merkevare