Standarder · WCAG 2.2

SC 1.3.2 Nivå A WCAG 2.0

Meningsfull ordningsföljd

När läsordningen spelar roll för förståelsen måste DOM-ordningen matcha den visuella ordningen. CSS-positionering och float som rör om i sekvensen bryter skärmläsare och tangentbordsnavigering.

Vad det kräver

Om innehållets mening beror på i vilken ordning det läses — instruktioner, berättande, en steg-för-steg-process — måste den ordningen bevaras i DOM. Skärmläsare och reflödesmoduler går igenom dokumentet i källordning; om CSS order, position: absolute, flex-direction: row-reverse eller grid-placering skiljer den visuella ordningen från DOM-ordningen faller upplevelsen isär.

Hur du uppfyller det

  • Skriv DOM i den ordning innehållet är avsett att läsas; använd CSS för visuell placering, inte för att uppfinna sekvensen.
  • Granska all användning av flex-direction: row-reverse, CSS order eller grid-area som flyttar innehåll från sin källposition.
  • För flekolumnslayouter, placera kolumnerna i DOM i läsordning, inte i visuell kolumnordning.
  • Testa genom att inaktivera CSS (webbläsarens utvecklarverktyg, “visa källordning”) — det ostilsatta flödet bör fortfarande vara begripligt.
  • Kör sidan genom en skärmläsare och notera varje tillfälle då uppläsningsordningen förvånar dig.

Vanliga fel

  • En sidopanel som visuellt syns till höger men är placerad först i DOM — skärmläsare läser annonser, relaterade länkar och uppmaningar innan huvudartikeln.
  • flex-direction: row-reverse på en navigeringsmeny — seende användare ser Hem / Om / Kontakt, skärmläsare läser Kontakt / Om / Hem.
  • CSS order på formulärfält som ändrar visuell ordning i förhållande till DOM-ordning, så att tabbning hoppar oförutsägbart.
  • “Hoppa till innehåll”-länk placerad efter navigeringen i DOM men absolut positionerad visuellt överst — tangentbordsanvändare träffar navigeringen först.
  • Kort i ett rutnät som visuellt flödar vänster-till-höger men placerade i DOM nerifrån-och-upp på grund av ett smart grid-trick.

Varför det spelar roll

Fel på meningsfull ordningsföljd är lömska — sidan ser bra ut, valideras och klarar de flesta automatiserade kontroller. De framträder bara när en riktig skärmläsaranvändare försöker läsa sidan uppifrån och ned. De flesta åtgärder är små DOM-omordningar, men diagnostikkostnaden för att hitta problemet är hög.