Skjult innhold og fokus

Tenk deg at du navigerer en nettside med tastaturet. Du trykker Tab for å flytte fokus fra element til element. Plutselig forsvinner fokusmarkøren – du trykker Tab igjen, men ingenting synlig skjer. Fokuset har havnet på et element som er skjult. Dette er et reelt problem for mange brukere, og det bryter med WCAG-standarden.

Hva betyr dette?

WCAG 2.4.3 «Fokusrekkefølge» (nivå A) krever at elementer som kan motta fokus gjør det i en rekkefølge som er meningsfull og forutsigbar. En viktig del av dette er at elementer som er skjult – enten visuelt eller for hjelpemidler – ikke skal kunne motta tastaturfokus.

Det vanligste problemet oppstår når utviklere bruker aria-hidden="true" for å skjule et element for skjermlesere, men glemmer at elementet (eller interaktive barn-elementer) fortsatt er tabbbare. Resultatet er at tastaturbrukere fokuserer på noe de ikke kan se, og skjermleserbrukere fokuserer på noe som ikke annonseres.

Hvorfor er det viktig?

Usynlig fokus forvirrer

Når fokus lander på et skjult element, mister tastaturbrukeren orienteringen. Fokusmarkøren forsvinner, og brukeren vet ikke om de har nådd slutten av siden, om noe er feil, eller om de bare trenger å trykke Tab en gang til. For skjermleserbrukere er situasjonen enda verre – skjermleseren sier ingenting, fordi elementet er markert med aria-hidden="true".

Modale dialoger er en vanlig synder

Modaler (dialogvinduer som dukker opp foran sideinnholdet) er den vanligste kilden til fokus-problemer. Når en modal åpnes, skal fokus flyttes inn i modalen, og innholdet bak modalen skal ikke være tabbbart. Når modalen lukkes, skal fokus flyttes tilbake til elementet som åpnet den.

Hvis dette ikke håndteres riktig, kan brukeren tabbe seg ut av modalen og inn i innholdet bak – innhold som kanskje er skjult med aria-hidden="true" eller visuelt dekket av en overlay.

Menyer som åpnes og lukkes

Dropdown-menyer og navigasjonsmenyer som skjules og vises er en annen vanlig kilde til problemer. Hvis menyen er visuelt skjult men elementene inni den fortsatt kan få fokus, vil tastaturbrukeren «miste» fokus inn i den usynlige menyen.

Hvordan fikser jeg det?

Forstå de ulike måtene å skjule innhold på

Ikke alle skjulemetoder er like. Her er en oversikt:

Legg merke til at aria-hidden="true" ikke fjerner elementer fra tab-rekkefølgen. Dette er kilden til de fleste problemene.

Regel: Aldri bruk aria-hidden på fokuserbare elementer

<!-- FEIL: Knappen er skjult for skjermleser, men kan få fokus -->
<div aria-hidden="true">
  <button>Lukk</button>
  <a href="/profil">Min profil</a>
</div>

<!-- RIKTIG: Bruk display: none for å skjule helt -->
<div style="display: none;">
  <button>Lukk</button>
  <a href="/profil">Min profil</a>
</div>

<!-- RIKTIG: Eller bruk inert-attributtet (moderne nettlesere) -->
<div aria-hidden="true" inert>
  <button>Lukk</button>
  <a href="/profil">Min profil</a>
</div>

Håndter modaler riktig

Her er et mønster for tilgjengelige modaler:

<!-- Når modalen åpnes: -->
<div id="bakgrunn" aria-hidden="true" inert>
  <!-- Alt innhold bak modalen -->
</div>

<div role="dialog" aria-modal="true" aria-labelledby="modal-tittel">
  <h2 id="modal-tittel">Bekreft sletting</h2>
  <p>Er du sikker på at du vil slette denne posten?</p>
  <button>Ja, slett</button>
  <button>Avbryt</button>
</div>

Nøkkelpunktene:

1. Sett aria-hidden="true" og inert på innholdet bak modalen. inert-attributtet sørger for at innholdet heller ikke kan få tastaturfokus.
2. Flytt fokus til modalen når den åpnes – typisk til den første fokuserbare knappen eller til overskriften.
3. Fang fokus inni modalen. Når brukeren tabber forbi siste element i modalen, skal fokus hoppe tilbake til det første elementet.
4. Flytt fokus tilbake til utløserelementet når modalen lukkes.

Bruk inert-attributtet

inert-attributtet er et moderne HTML-attributt som gjør et element og alt dets innhold utilgjengelig for interaksjon – det fjernes fra tab-rekkefølgen, kan ikke klikkes, og ignoreres av hjelpemidler. Det er den enkleste måten å løse fokus-problemer med skjult innhold:

<!-- Alt innhold bak modalen gjøres inert -->
<main inert>
  <h1>Innhold som ikke skal være interaktivt</h1>
  <a href="/side">Denne lenken kan ikke tabbes til</a>
</main>

inert støttes i alle moderne nettlesere (Chrome, Firefox, Safari og Edge). For eldre nettlesere finnes det en polyfill.

Sjekk med tastaturet

Den enkleste testen er å bruke Tab-tasten for å navigere gjennom hele siden. Legg merke til:

• Forsvinner fokusmarkøren på noe tidspunkt?
• Får skjulte elementer fokus?
• Kan du tabbe deg ut av modaler og dropdown-menyer?
• Flyttes fokus tilbake til riktig sted etter at en modal lukkes?

Vanlige scenarioer å passe på

• Off-canvas-menyer: Menyer som glir inn fra siden er ofte skjult visuelt med transform eller left: -100%, men elementene inni dem kan fortsatt tabbes til. Bruk inert eller display: none når menyen er lukket.
• Faner/tabs: Innhold i inaktive faner bør ha hidden-attributtet eller display: none, ikke bare aria-hidden="true".
• Trekkspillmenyer (accordions): Innhold som er kollapset bør ikke være tabbbart.
• Tooltips og popovers: Hvis de inneholder lenker eller knapper, sørg for at disse bare er tilgjengelige når tooltip-en er synlig.

Fokushåndtering er et av de områdene der manuell testing er viktigst. Automatiske verktøy kan fange opp aria-hidden på fokuserbare elementer, men mer komplekse scenarioer krever at du tester med tastaturet selv.