Tilbage til Grundlag og tastatur

Webtilgængelighed

Tastatur, fokus og skiplinks

Afprøv en hel handling uden mus, og gør det tydeligt, hvor brugeren er, og hvor vedkommende kan fortsætte.

Se undervisningsslides

Relevante links

TL;DR

  1. Interaktive elementer skal kunne nås og betjenes uden mus.
  2. Fokus skal være synligt, og rækkefølgen skal give mening i indholdet.
  3. Et skiplink giver en genvej forbi gentagen navigation.

Afprøv en hel handling

Læg musen væk. Brug Tab og Shift+Tab til at flytte fokus, Enter til links og Enter eller Mellemrum til knapper. Ikke alt indhold skal kunne nås med Tab: En almindelig overskrift skal fx ikke have tabindex="0".

I slides undersøger vi Tivolis købsflow. Prøv en tilsvarende afgrænset handling: Find en billet, vælg antal, og kom frem til næste trin. Stop før betaling. Notér det første sted, hvor du mister orienteringen eller ikke kan komme videre.

Fokus og rækkefølge

Begynd med en meningsfuld DOM-rækkefølge. CSS order eller grid-placering ændrer ikke i sig selv den normale tab-rækkefølge.

Bevar browserens fokusmarkering, eller lav en tydelig erstatning:

:focus-visible {
  outline: 3px solid black;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px white;
}

Afprøv den på lyse og mørke flader og tæt på containere, der klipper indhold. Kontrollér også, at sticky elementer ikke skjuler fokus.

Slides’ eksempel med et areal svarende til en 2 CSS-pixel-kant kommer fra Focus Appearance, niveau AAA. Det er ikke et generelt AA-krav om netop denne tykkelse.

Spring gentagen navigation over

Et skiplink peger på sidens hovedindhold:

<a class="skip-link" href="#main">Spring til indhold</a>


<!-- Sidens header og navigation -->


<main id="main" tabindex="-1">
  <h1>Find din næste rejse</h1>
</main>

Her kan destinationen modtage fokus uden at blive et ekstra Tab-stop. Linket skal være synligt, når det får fokus.

Test fra sidens begyndelse. Hvor fortsætter næste Tab efter aktivering? Åbn gerne øvelsen separat, så editorens kontroller ikke indgår i din test.

Test mere end koden

Brug automatiske tjek som supplement. Kontrollér også zoom, læsbarhed, fokus og hele handlinger. En grøn rapport kan ikke vise, om brugeren forstod, hvad der skete.

Se mere