Gepubliceerd: 1 mei 2025
De CSS-eigenschappen reading-flow en reading-order zijn beschikbaar vanaf Chrome versie 137. In dit artikel wordt de reden achter het ontwerp van deze eigenschappen uitgelegd, evenals enkele korte details om u op weg te helpen.
Lay-outmethoden zoals grid en flexbox hebben de frontend-ontwikkeling getransformeerd, maar hun flexibiliteit kan voor sommige gebruikers problemen opleveren. Het is heel gemakkelijk om een situatie te creëren waarin de visuele volgorde niet overeenkomt met de volgorde in de DOM-structuur. Omdat de browser deze volgorde volgt wanneer je met een toetsenbord door de site navigeert, kunnen sommige gebruikers onverwachte sprongen ervaren tijdens het navigeren op een pagina.
De eigenschappen reading-flow en reading-order zijn ontworpen en toegevoegd aan de CSS Display-specificatie om dit al lang bestaande probleem op te lossen.
reading-flow
De CSS-eigenschap ` reading-flow bepaalt de volgorde waarin elementen in een flex-, grid- of block-layout worden weergegeven aan toegankelijkheidstools en hoe ze worden gefocust met behulp van lineaire sequentiële navigatiemethoden.
Het accepteert één sleutelwoordwaarde, met als standaardwaarde ' normal , wat het gedrag van het ordenen van elementen in de DOM-volgorde behoudt. Om het in een flexcontainer te gebruiken, stelt u de waarde in op flex-visual of flex-flow . Om het in een gridcontainer te gebruiken, stelt u de waarde in op grid-rows , grid-columns ' of grid-order '.
reading-order
Met de CSS-eigenschap ` reading-order kunt u handmatig de volgorde van items binnen een leesstroomcontainer wijzigen. Om deze eigenschap te gebruiken in een grid-, flex- of block-container, stelt u de waarde van reading-flow van de container in op ` source-order en stelt u de reading-order van elk afzonderlijk item in op een integerwaarde.
Voorbeeld in flexbox
Je hebt bijvoorbeeld een flex-layoutcontainer met drie elementen in omgekeerde rijvolgorde, en je wilt de volgorde ook nog eens omwisselen met de eigenschap `order`.
<div class="box">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>
.box {
display: flex;
flex-direction: row-reverse;
}
.box :nth-child(1) {
order: 2;
}
Je kunt proberen door deze elementen te navigeren met de TAB- toets om het volgende focusseerbare element te vinden en met de TAB+SHIFT -toetsen om het vorige focusseerbare element te vinden. Dit volgt de volgorde van de items in de broncode: Een, Twee, Drie.
Vanuit het perspectief van de eindgebruiker is dit onlogisch en kan het erg verwarrend zijn. Hetzelfde gebeurt als we een toegankelijkheidstool voor ruimtelijke navigatie gebruiken om over de pagina te navigeren.
Om dit op te lossen, stelt u de eigenschap reading-flow in:
.box {
reading-flow: flex-visual;
}
De focusvolgorde is nu: Een, Drie, Twee. Dit is dezelfde visuele volgorde als wanneer je in het Engels van links naar rechts leest.
Als u de focusvolgorde liever in omgekeerde volgorde wilt behouden, zoals oorspronkelijk bedoeld, kunt u het volgende instellen:
.box {
reading-flow: flex-flow;
}
De focusvolgorde is nu de omgekeerde flex-volgorde: Twee, Drie, Een. In beide gevallen wordt rekening gehouden met de CSS-eigenschap ' order .
Voorbeeld met rasterindeling
Om te zien hoe dit in een raster werkt, stel je voor dat je een lay-out maakt met automatisch geplaatste CSS-grid-elementen met twaalf focusseerbare gebieden.
<div class="wrapper">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
<a href="#">Five</a>
<a href="#">Six</a>
<a href="#">Seven</a>
<a href="#">Eight</a>
<a href="#">Nine</a>
<a href="#">Ten</a>
<a href="#">Eleven</a>
<a href="#">Twelve</a>
</div>
Je wilt dat het vijfde element de grootste ruimte helemaal bovenaan inneemt, gevolgd door het tweede element in het midden van het raster. Alle andere elementen kunnen automatisch in het raster worden geplaatst volgens een kolomsjabloon.
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
}
.wrapper a:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.wrapper a:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
Probeer door deze elementen te navigeren met de TAB -toets om het volgende focusseerbare element te vinden en met de TAB+SHIFT -toetsen om het vorige focusseerbare element te vinden. Dit volgt de items in de volgorde van de broncode: één tot en met twaalf.
Om dit op te lossen, stelt u de eigenschap reading-flow in:
.wrapper {
reading-flow: grid-rows;
}
De focusvolgorde is nu: Vijf, Een, Drie, Twee, Vier, Zes, Zeven, Acht, Negen, Tien, Elf, Twaalf. Deze volgt de visuele volgorde, rij voor rij.
Als u de leesrichting liever in de kolomvolgorde wilt weergeven, kunt u de waarde van het trefwoord grid-columns gebruiken. De focusvolgorde wordt dan: Vijf, Zes, Negen, Zeven, Tien, Een, Twee, Elf, Drie, Vier, Acht, Twaalf.
.wrapper {
reading-flow: grid-columns;
}
Je kunt ook proberen om grid-order te gebruiken. De focusvolgorde blijft één tot twaalf. Dit komt omdat er geen CSS-volgorde is ingesteld voor een item.
Een blokcontainer die gebruikmaakt reading-order
Met de eigenschap reading-order kunt u specificeren wanneer een item in de leesstroom moet worden bezocht, waarmee de volgorde die is ingesteld door de eigenschap reading-flow wordt overschreven. Deze eigenschap is alleen van toepassing op een geldige leesstroomcontainer wanneer de eigenschap reading-flow niet normal is ingesteld.
.wrapper {
display: block;
reading-flow: source-order;
}
.top {
reading-order: -1;
inset-inline-start: 50px;
inset-block-start: 50px;
}
De volgende container bevat vijf items. Er zijn geen lay-outregels die de elementen anders rangschikken dan in de bronvolgorde, maar er is één item dat niet in de normale volgorde staat en dat als eerste bezocht moet worden.
<div class="wrapper">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a class="top" href="#">Item 5</a>
</div>
Door reading-order van dit item op -1 in te stellen, wordt dit item als eerste bezocht, waarna voor de rest van de items in de leesstroom wordt teruggevallen op de bronvolgorde.
Meer voorbeelden vind je op de website chrome.dev .
Interactie met tabindex
Van oudsher gebruikten ontwikkelaars het globale HTML-attribuut ` tabindex om HTML-elementen focusseerbaar te maken en de relatieve volgorde voor sequentiële focusnavigatie te bepalen. Dit attribuut kent echter veel nadelen en toegankelijkheidsproblemen. Het grootste probleem is dat de focusnavigatie met een positieve `tabindex`-volgorde niet wordt herkend door de toegankelijkheidsboom. Bij onjuist gebruik kan dit leiden tot een schokkerige focusvolgorde die niet overeenkomt met de ervaring van een schermlezer. Om dit op te lossen, kunt u de volgorde bijhouden met behulp van het HTML-attribuut `aria-owns`.
In het vorige flex-voorbeeld zou je, om hetzelfde resultaat te krijgen als met reading-flow: flex-visual , het volgende kunnen doen.
<div class="box" aria-owns="one three two">
<a href="#" tabindex="1" id="one">One</a>
<a href="#" tabindex="3" id="two">Two</a>
<a href="#" tabindex="2" id="three">Three</a>
</div>
Maar wat gebeurt er als een ander element buiten de container ook tabindex=1 heeft? Dan worden alle elementen met tabindex=1 tegelijk bezocht, voordat we naar de volgende oplopende tabindexwaarde gaan. Deze schokkerige, opeenvolgende navigatie leidt tot een slechte gebruikerservaring. Daarom raden toegankelijkheidsexperts aan om positieve tabindexwaarden te vermijden . We hebben geprobeerd dit op te lossen bij het ontwerpen reading-flow .
Een container met de eigenschap reading-flow wordt de eigenaar van het focusbereik. Dit betekent dat de sequentiële focusnavigatie alle elementen binnen de container bezoekt voordat naar het volgende focusseerbare element in een webdocument wordt overgeschakeld. Bovendien worden de directe kinderen van de container gesorteerd op basis van de `reading-flow` eigenschap en worden positieve tabindexen genegeerd voor sorteerdoeleinden. Het is echter nog steeds mogelijk om een positieve tabindex in te stellen voor de afstammelingen van een item met de eigenschap `reading-flow`.
Houd er rekening mee dat een element met display: contents dat de reading-flow eigenschap van het bovenliggende lay-outelement overneemt, ook een geldige container voor leesstroom is. Denk hieraan bij het ontwerpen van uw website. Lees meer hierover in ons verzoek om feedback over reading-flow en display: contents .
Laat het ons weten
Probeer de voorbeelden in dit bericht en in de reading-flow -voorbeelden op chrome.dev eens uit en gebruik deze CSS-eigenschappen op je websites. Heb je feedback? Meld het dan als een issue op de GitHub-repository van de CSS Working Group . Heb je specifiek feedback over het gedrag van tabindex en focus scoping? Meld het dan als een issue op de GitHub-repository van HTML WHATNOT . We stellen je feedback over deze functie zeer op prijs.