Riktig leserekkefølge i koden (WCAG 1.3.2)

De fleste som bruker en nettside, ser innholdet visuelt og oppfatter rekkefølgen intuitivt. Men for en skjermleserbruker er det rekkefølgen i kildekoden som avgjør hva som leses først, og hva som kommer etterpå. Hvis den rekkefølgen ikke gir mening, blir innholdet uforståelig.

Hva sier kravet?

WCAG 1.3.2 Meningsfylt rekkefølge krever at når rekkefølgen innholdet presenteres i påvirker betydningen, skal en korrekt leserekkefølge kunne bestemmes programmatisk. Med andre ord: rekkefølgen på elementene i DOM-en (HTML-koden) skal gjenspeile den logiske leserekkefølgen.

Dette er et nivå A-krav - det mest grunnleggende nivået. Alle norske virksomheter er pålagt å oppfylle dette.

Kravet handler ikke om at all CSS-basert layout er forbudt. Det handler om at når du bruker CSS til å endre visuell rekkefølge, må du sørge for at kildekoden fortsatt gir mening lest ovenfra og ned. En skjermleser bryr seg ikke om hva CSS gjør visuelt - den leser kildekoden i rekkefølge.

Hvorfor er dette viktig?

Skjermlesere følger kildekoden

Når en blind bruker navigerer nettsiden din med en skjermleser som JAWS eller NVDA, leses elementene i den rekkefølgen de står i HTML-en. Hvis du bruker CSS til å flytte et viktig avsnitt visuelt til toppen av siden, men det ligger nederst i koden, vil skjermleserbrukeren møte det sist - kanskje etter informasjon som forutsetter at de allerede har lest det avsnittet.

Tastaturnavigasjon følger DOM-rekkefølgen

Brukere som navigerer med tastaturet (Tab-tasten), opplever fokusrekkefølgen basert på DOM-en, ikke det visuelle oppsettet. Hvis fokus hopper uforutsigbart rundt på siden fordi den visuelle og den logiske rekkefølgen ikke stemmer overens, blir navigasjonen forvirrende og slitsom.

Mobilbrukere og responsivt design

Mange nettsider endrer layout avhengig av skjermstørrelse. Elementer som ligger side om side på desktop, stables ofte vertikalt på mobil. Hvis kildekoderekkefølgen ikke er gjennomtenkt, kan elementer havne i feil rekkefølge på mobil - for eksempel at en forklarende tekst vises etter knappen den refererer til.

Slik oppfyller du kravet

La kildekoden gjenspeile den logiske leserekkefølgen

Den viktigste regelen er enkel: skriv HTML-en din i den rekkefølgen innholdet bør leses. Bruk deretter CSS for å tilpasse det visuelt. Ikke skriv koden i «tilfeldig» rekkefølge og stol på at CSS ordner opp.

<!-- Riktig: Logisk rekkefølge i koden -->
<article>
  <h2>Produktnavn</h2>
  <p>Beskrivelse av produktet som gir kontekst.</p>
  <p class="pris">499 kr</p>
  <button>Legg i handlekurv</button>
</article>

Vær forsiktig med CSS flexbox og grid order

CSS order-egenskapen og flex-direction: row-reverse endrer visuell rekkefølge uten å endre koden. Dette er en vanlig kilde til problemer:

/* Problematisk: Visuell rekkefølge avviker fra kildekoden */
.produkt-grid {
  display: flex;
}

.produkt-grid .bilde {
  order: 1;
}

.produkt-grid .beskrivelse {
  order: 3; /* Hopper over pris visuelt */
}

.produkt-grid .pris {
  order: 2;
}

I dette eksempelet ser brukeren bilde, pris, beskrivelse - men en skjermleser leser bilde, beskrivelse, pris. Hvis rekkefølgen er viktig for forståelsen, bør du heller endre HTML-rekkefølgen.

/* Bedre: Kildekoden matcher den tiltenkte leserekkefølgen */
.produkt-grid {
  display: flex;
}

/* Ingen order-endringer nødvendig når HTML-en
   allerede er i riktig rekkefølge */

Unngå CSS-posisjonering for innholdsrekkefølge

Bruk av position: absolute for å flytte innholdsblokker rundt på siden kan gi samme type problemer som order. Elementene leses fortsatt i kildekoderekkefølgen.

Test rekkefølgen uten CSS

En enkel test er å deaktivere CSS i nettleseren og se om innholdet fortsatt gir mening lest ovenfra og ned. I Chrome kan du gjøre dette via DevTools: trykk Ctrl+Shift+P, skriv «Disable CSS» og trykk Enter. Hvis innholdet virker rotete og ulogisk uten styling, har du sannsynligvis et rekkefølgeproblem.

Tabeller og lister

Tabeller skal brukes for tabulære data, og cellene leses rad for rad, fra venstre til høyre. Sørg for at tabellen gir mening i denne rekkefølgen. Lister (<ol> og <ul>) leses i den rekkefølgen listeelementene står i koden - bruk aldri CSS til å reversere en nummerert liste visuelt mens koden beholder den opprinnelige rekkefølgen.

Vanlige feil

• Bruker CSS order til å endre rekkefølge på viktig innhold. Visuelt ser det riktig ut, men skjermlesere og tastaturnavigasjon følger kildekoden.
• Plasserer sidebar-innhold før hovedinnhold i koden. Skjermleserbrukere må da lese hele sidemenyen før de kommer til det de leter etter.
• Bruker float: right for å flytte elementer. Flytende elementer kan endre visuell posisjon uten å endre leserekkefølge, noe som skaper forvirring.
• Responsivt design som stokker om på innhold. Elementer som endrer rekkefølge mellom desktop og mobil uten at kildekoden er gjennomtenkt.
• Bruker tabindex med positive verdier for å «fikse» fokusrekkefølgen. Dette skaper flere problemer enn det løser. Bruk heller riktig kildekoderekkefølge.

Den beste fremgangsmåten er å starte med en logisk kildekode, og deretter bruke CSS til å oppnå ønsket visuelt resultat. Aldri omvendt. Når koden gir mening i seg selv, fungerer nettsiden for alle - uansett hvordan de bruker den.