Testa en leveransadressdialog med tangentbordet
Ett genomarbetat exempel visar fokusordning, avbrytande och sparande i en adressdialog så att tangentbordsfel kan återskapas.
En dialog för leveransadress måste kunna användas helt med tangentbordet. Testa hela flödet från öppning till återgång till sidan. Att kunna nå Spara-knappen räcker inte.
Exemplet är påhittat: Adress D-17 i kundportalen är ”Hafenweg 8”. Personen vill ändra husnumret till 10. Dialogen innehåller gata och husnummer samt ”Avbryt” och ”Spara adress”. Det är ett manuellt funktionstest, inte en fullständig tillgänglighetsgranskning.
Beskriv felet som ett flöde
I det antagna utgångsläget öppnas dialogen men fokus stannar på ”Ändra leveransadress” bakom den nedtonade ytan. Tab leder sedan till länkar i sidfoten. De synliga adressfälten hoppas över. Ett mustest hade lätt kunnat missa felet.
Anteckna startsida, utlösande knapp, använda tangenter och det element som faktiskt får fokus. Utvecklingen kan då återskapa samma problem. Använd en säker miljö med testdata; ändra inte en riktig kundadress som försök.
Bestäm det förväntade beteendet
I den här korta dialogen är Gata en rimlig första fokusposition. Långa dialoger eller dialoger med betydande konsekvenser kan behöva en annan. WAI:s dialogmönster beskriver skillnaderna.
Åtgärd | Förväntat resultat i exemplet |
|---|---|
Nå knappen med Tab och tryck Enter | Dialogen öppnas; fokus är synligt i Gata. |
Gå framåt med Tab | Gata, husnummer, Avbryt, Spara adress; därefter Gata igen. |
Gå bakåt med Shift+Tab | Samma element i omvänd ordning; inget hopp bakom dialogen. |
Skriv husnummer 10 och använd Escape innan du sparar | Dialogen stängs; fokus återgår till knappen; D-17 förblir Hafenweg 8. |
Öppna igen och spara 10 | Framgång visas först efter bekräftat sparande; D-17 visar Hafenweg 10. |
Sparandet avvisas av verksamhetsregler | Begripligt fel; inmatningar bevaras; det berörda området kan nås. |
Tab-ordningen gäller just den här uppbyggnaden. Ditt gränssnitt kan innehålla fler kontroller.
Rätta orsaken på rätt ställe
Använd riktiga knappar för åtgärder och korrekt namngivna fält. En egenbyggd dialog behöver ett tillgängligt namn och korrekt fokushantering. Enbart role="dialog" eller aria-modal="true" blockerar inte bakgrunden och skapar ingen tangentbordsfunktion.
Utvecklingen måste behandla öppning, att hålla fokus i den aktiva modala dialogen och stängning tillsammans. Här finns den utlösande knappen kvar efter stängning. Om ett annat flöde tar bort den behövs en annan logisk återgångsposition. Stilar får inte ta bort den synliga fokusindikatorn.
Testa stängning medan sparandet pågår
Escape återkallar inte automatiskt en redan skickad serverbegäran. I exemplet får fönstret stängas även under behandlingen. Sidan visar då fortfarande ”Adressändring behandlas” för D-17. Ett bekräftat svar uppdaterar adressen; ett osäkert resultat förblir oklart. ”Ändringen har avbrutits” vore fel i den situationen.
Upprepa det rättade testet i webbläsare som stöds och med en lämplig skärmläsarkonfiguration. Anteckna observationer och öppna fel. Det rättade tangentbordsflödet säger inget om alla andra sidor, kontraster eller innehåll.
Källor
Läs vidare
Alla artiklar
Design & UX med ASES
Användarupplevelse, gränssnitt och varumärke