6 min. læsning

Test en hjemmeside med tastatur og synligt fokus

Guiden her viser, hvordan du tester, om en hjemmeside kan bruges uden mus. Du lærer at finde de handlinger, der ikke virker med tastaturet, og beskrive fejl, så en udvikler kan genskabe dem.

Vi gennemgår en opdigtet workshoptilmelding fra menu til kvittering. Undervejs ser vi efter, om en synlig fokusmarkering viser, hvilket link, felt, eller hvilken knap næste tastetryk virker på.

Kort fortalt

Vælg en opgave med en tydelig afslutning. Udfør den uden mus, også når en menu åbner, en fejl opstår, og du vil gå tilbage. Notér den præcise handling, hvor forløbet stopper eller fokus bliver svært at se.

I eksemplet skal en besøgende tilmelde sig en workshop. Tilmeldingen åbner i et vindue oven på siden, en såkaldt dialog. Testforløbet er: Find workshoppen i menuen, åbn “Tilmeld dig”, vælg deltagelsesform, ret en forkert e-mailadresse, og nå kvitteringen. Brug en testversion eller aftalte testdata til indsendelsen, så du ikke opretter en rigtig tilmelding.

Et felt kan have fokus og være skjult

Før

Tab flytter fra e-mailfeltet til knappen “Send tilmelding”. En fast bjælke nederst på siden dækker hele knappen. Du kan hverken se knappen eller dens fokusmarkering.

Efter

Siden ruller knappen fri af bjælken. En tydelig ramme viser, at “Send tilmelding” er valgt. Du kan se, hvilken handling Enter vil udføre.

IllustrationDen faste bjælke dækker det næste trin
Afprøv både fremad og baglæns. En side kan rulle knappen korrekt frem med Tab og dække den igen, når du går tilbage med Shift+Tab. Eksemplet er en illustration, ikke en formular.

Sådan gør du

  1. Vælg opgave og testmiljø

    Skriv startside, ønsket slutresultat, browser, og styresystem ned. Test i den browser og vinduesstørrelse, hvor problemet skal kunne genskabes. Gentag forløbet i en smal visning, hvis menuen eller formularen ændrer sig dér.

    På Mac kan browserens tastaturindstillinger betyde, at Tab springer links over. I Safari findes indstillingen til at bruge Tab til at fremhæve hvert emne på en webside under de avancerede indstillinger; ordlyden afhænger af versionen. Afprøv først et almindeligt link og en knap på en kendt side. Ændr ikke sidens kode for at kompensere for en browserindstilling.

    Læg musen væk efter forberedelsen. Hvis du bruger den for at komme videre, så notér præcis hvor og hvorfor, og begynd den del af testen igen.

  2. Find starten uden mus

    Tryk Tab fra sidens begyndelse. Det link, felt, eller den knap, der reagerer på næste tastetryk, har tastaturfokus. Se efter en synlig markering, som viser, hvor fokus er. Almindelige overskrifter og tekstafsnit behøver ikke være stop i Tab-rækkefølgen.

    Brug et eventuelt “Spring til indhold”-link. Fortsætter næste Tab i det relevante indhold, eller skal du stadig gennem hele menuen? Åbn derefter navigationen og find workshoppen. Alle valgmuligheder, som kræves for opgaven, skal kunne nås og bruges.

    Gå et par trin baglæns med Shift+Tab. Se efter uventede spring, skjulte links, og elementer bag faste bjælker. Et fokusstop uden synlig markering skal undersøges, selv om Enter tilfældigvis udfører den rigtige handling.

  3. Åbn, brug, og luk dialogen

    Aktivér “Tilmeld dig”. Hvis den åbner et vindue oven på siden, så se, hvor fokus lander, og om dialogens indhold kan nås. I en modal dialog er resten af siden midlertidigt utilgængelig. Tab skal føre gennem dialogens indhold uden at sende dig ind bag den.

    Afprøv lukkeknappen og Escape. Når dialogen lukkes, skal du kunne fortsætte et meningsfuldt sted, normalt ved knappen, der åbnede den. Åbn dialogen igen og gennemfør denne gang handlingen. Lukning og gennemførelse kan have forskellige fejl.

    At holde fokus inde i en åben modal dialog er normalt tilsigtet. En tastaturfælde opstår, når du ikke kan forlade den med tastaturet. WCAG kræver ikke universelt, at Escape bruges, eller at fokus vender tilbage til netop åbningsknappen; vurder, om den konkrete opgave kan gennemføres og forlades.

  4. Ret en fejl og gennemfør opgaven

    Skriv navn@ i e-mailfeltet, og send testtilmeldingen. Find fejlbeskeden uden mus. Kan du forstå, hvilket felt der skal rettes, nå feltet, og rette det uden at miste de øvrige oplysninger?

    Prøv en gruppe radioknapper med piletasterne. Tab bruges typisk til at gå ind i og ud af gruppen; det er ikke en fejl, at hver radioknap ikke får sit eget Tab-stop. Brug mellemrum til at ændre et afkrydsningsfelt.

    Send derefter med gyldige testoplysninger. Find kvitteringen og en eventuel næste handling. En aktiveret knap er ikke i sig selv dokumentation for, at tilmeldingen er gennemført. Hvis systemet svarer med en fejl, skal du kunne forstå, om du skal rette oplysninger eller prøve igen senere.

  5. Beskriv og genafprøv fejlen

    Gem adressen, testmiljøet, den konkrete tilstand, og tastetrykkene. Beskriv først det, du observerede. Gæt ikke på årsagen i koden. Et skærmbillede kan vise en skjult eller svag fokusmarkering; tastetrykkene gør forløbet muligt at genskabe.

    Når fejlen er rettet, gentag de samme trin med samme størrelse og starttilstand. Afprøv også vejen tilbage og den næste handling, så rettelsen ikke blot flytter stoppet.

En fejlbeskrivelse, der kan bruges

Eksempel: Send-knappen skjules ved zoom

Miljø: Angiv browserens og styresystemets version samt zoomniveau. Vedlæg den konkrete sideadresse.

Trin: Åbn tilmeldingen ved 400 % zoom. Udfyld e-mailfeltet. Tryk Tab én gang.

Observeret:“Send tilmelding” har fokus, men er helt dækket af den faste bundbjælke. Markeringen kan ikke ses.

Forventet: Knappen og dens fokusmarkering kan ses, før den aktiveres.

Beskrivelsen er et undervisningseksempel, ikke et fund på forlaens.com.

Tasterne afhænger af elementet

  • Tab og Shift+Tab: Gå frem og tilbage mellem betjeningselementer.
  • Enter: Følg et link eller aktivér en knap.
  • Mellemrum: Aktivér en knap eller skift et afkrydsningsfelt. På almindelig sidetekst ruller tasten typisk siden.
  • Piletaster: Vælg blandt radioknapper eller flyt inde i en sammensat komponent, der bruger denne tastaturmodel.
  • Escape: Luk ofte en dialog eller menu. Afprøv også den synlige lukkemulighed.

Tjekliste

  • Hele den valgte opgave kan gennemføres og forlades uden mus.
  • Fokus kan ses undervejs, også ved zoom og nær faste bjælker.
  • Åbning, lukning, fejl, og kvittering efterlader brugeren et meningsfuldt sted.
  • Der er ingen nødvendige handlinger, som kun vises ved at holde musen over noget.
  • Fejlbeskrivelsen gør det muligt for en anden person at gentage testen.

Teknisk bilag: Krav og rettelser

WCAG 2.2 skelner mellem tastaturbetjening (2.1.1), tastaturfælder (2.1.2), fokusorden (2.4.3), synligt fokus (2.4.7), og helt skjult fokus (2.4.11). Ved AA må et fokuseret element ikke være helt skjult af indhold, som websitet har lagt ovenpå. At holde hele elementet synligt er en bedre løsning og indgår i AAA-kriteriet 2.4.12. Kravet til fokusmarkeringens areal i 2.4.13 er også AAA.

Ret årsagen til et skjult element: giv plads til den faste bjælke, justér rulning, eller ændr bjælkens placering. Brug native links og knapper. Tilføj ikke positive tabindex-værdier for at reparere en uhensigtsmæssig kildeorden. En tastaturtest siger ikke i sig selv, hvad en skærmlæser annoncerer.

Værktøjer og kilder

Senest gennemgået: .