Betekenisvolle volgorde

Wat het vereist

Als de betekenis van inhoud afhangt van de volgorde waarin deze wordt gelezen — instructies, een verhaal, een stapsgewijs proces — moet die volgorde bewaard blijven in de DOM. Schermlezers en reflow-engines lopen het document in bronvolgorde door; als CSS order, position: absolute, flex-direction: row-reverse of rasterplaatsing de visuele volgorde loswerkt van de DOM-volgorde, valt de ervaring uiteen.

Hoe eraan te voldoen

• Schrijf de DOM in de volgorde waarin de inhoud bedoeld is te worden gelezen; gebruik CSS voor visuele positionering, niet om de volgorde te bepalen.
• Controleer elk gebruik van flex-direction: row-reverse, CSS order of grid-area dat inhoud uit zijn bronpositie verplaatst.
• Plaats voor meerkolomsindelingen de kolommen in de DOM in de leesvolgorde, niet in de visuele kolomvolgorde.
• Test door CSS uit te schakelen (browserdevtools, „bronvolgorde weergeven“) — de niet-gestileerde flow moet nog steeds logisch zijn.
• Loop de pagina door met een schermlezer en noteer elk moment waarop de aankondigingsvolgorde verrassend is.

Veelvoorkomende fouten

• Een zijbalk visueel rechts maar als eerste in de DOM geplaatst — schermlezers horen advertenties, gerelateerde links en CTA’s vóór het hoofdartikel.
• flex-direction: row-reverse op een navigatiemenu — ziende gebruikers zien Home / Over / Contact, schermlezers horen Contact / Over / Home.
• CSS order op formuliervelden die de visuele volgorde losmaken van de DOM-volgorde, waardoor tabben onvoorspelbaar springt.
• Koppeling „Naar inhoud springen“ na de navigatie in de DOM geplaatst maar absoluut bovenaan gepositioneerd — toetsenbordgebruikers raken eerst de navigatie.
• Kaarten in een raster die visueel van links naar rechts vloeien maar in de DOM van onder naar boven zijn geplaatst door een slimme rastertruuk.

Waarom het belangrijk is

Fouten in de betekenisvolle volgorde zijn verraderlijk — de pagina ziet er goed uit, valideert en slaagt voor de meeste geautomatiseerde controles. Ze komen pas aan het licht wanneer een echte schermlezersgebruiker de pagina van boven naar beneden probeert te lezen. De meeste oplossingen zijn kleine DOM-herordeningen, maar de diagnostische kosten om het probleem te vinden zijn hoog.