Standarder · WCAG 2.2

SC 1.3.2 Niveau A WCAG 2.0

Meningsfuld rækkefølge

Når læserækkefølgen af indhold er afgørende for forståelsen, skal DOM-rækkefølgen matche den visuelle rækkefølge. CSS-positionering og float, der forstyrrer sekvensen, ødelægger skærmlæsere og tastaturnavigation.

Hvad det kræver

Hvis meningen med indhold afhænger af den rækkefølge, det læses i — instrukser, narrativ, en trinvis proces — skal denne rækkefølge bevares i DOM. Skærmlæsere og reflowmotorer gennemgår dokumentet i kildekoderækkefølge; hvis CSS order, position: absolute, flex-direction: row-reverse eller grid-placering forstyrrer den visuelle rækkefølge i forhold til DOM-rækkefølgen, falder oplevelsen fra hinanden.

Sådan opfyldes det

  • Skriv DOM i den rækkefølge, indholdet er beregnet til at læses; brug CSS til visuel positionering, ikke til at opfinde sekvensen.
  • Gennemgå enhver brug af flex-direction: row-reverse, CSS order eller grid-area, der flytter indhold ud af dets kildeposition.
  • For flerkolonnelayouts placeres kolonner i DOM i læserækkefølge, ikke i den visuelle kolonnerækkefølge.
  • Test ved at deaktivere CSS (browserudviklerværktøjer, „vis kildekoderækkefølge“) — det ustiliserede flow skal stadig give mening.
  • Kør siden igennem en skærmlæser og notér ethvert øjeblik, hvor annoncerækkefølgen overrasker.

Typiske fejl

  • En sidebjælke visuelt til højre, men placeret først i DOM — skærmlæsere hører reklamer, relaterede links og call-to-actions inden hovedartiklen.
  • flex-direction: row-reverse på en navigationsmenu — sehæmmede brugere ser Hjem / Om / Kontakt, skærmlæsere hører Kontakt / Om / Hjem.
  • CSS order på formularfelter, der omarrangerer den visuelle rækkefølge i forhold til DOM-rækkefølgen, så tab-navigation hopper uforudsigeligt.
  • „Gå til indhold“-link placeret efter navigationen i DOM men absolut positioneret øverst visuelt — tastaturbrugere rammer navigationen først.
  • Kort i et gitter, der visuelt flyder fra venstre til højre, men er placeret i DOM fra bund til top på grund af et smart grid-trick.

Hvorfor det er vigtigt

Fejl i meningsfuld rækkefølge er snigende — siden ser fin ud, validerer og består de fleste automatiserede tjek. De viser sig kun, når en reel skærmlæserbruger forsøger at læse siden fra top til bund. De fleste rettelser er små DOM-ændringer, men diagnosticeringsomkostningen ved at finde problemet er høj.