Gepubliceerd: 1 mei 2025
De CSS- reading-flow en reading-order eigenschappen zijn beschikbaar vanaf Chrome 137. In dit bericht worden de redenen achter het ontwerp van deze eigenschappen uitgelegd en enkele korte details om u op weg te helpen.
Lay-outmethoden zoals grid en flex hebben de ontwikkeling van de frontend getransformeerd, maar hun flexibiliteit kan voor sommige gebruikers een probleem veroorzaken. Het is heel gemakkelijk om een situatie te creëren waarin de visuele volgorde niet overeenkomt met de bronvolgorde in de DOM-structuur. Omdat deze bronvolgorde de browser volgt als u met een toetsenbord door de site navigeert, kunnen sommige gebruikers onverwacht rondspringen terwijl ze door een pagina navigeren.
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-, raster- of blokindeling worden blootgesteld aan toegankelijkheidstools en hoe ze worden gefocust met behulp van lineaire sequentiële navigatiemethoden.
Er is één sleutelwoordwaarde voor nodig, met de standaardwaarde normal , waardoor het gedrag van de bestelelementen in de DOM-volgorde blijft. Om het in een flexcontainer te gebruiken, stelt u de waarde ervan in op flex-visual of flex-flow . Om het in een rastercontainer te gebruiken, stelt u de waarde ervan in op grid-rows , grid-columns grid-order .
reading-order
Met de CSS-eigenschap reading-order kunt u de volgorde van items binnen een leesstroomcontainer handmatig overschrijven. Als u deze eigenschap in een raster-, flex- of blokcontainer wilt gebruiken, stelt u de reading-flow op de container in op source-order en stelt u de reading-order van het afzonderlijke item in op een geheel getal.
Voorbeeld in flexbox
U hebt bijvoorbeeld een container voor een flexibele lay-out met drie elementen in omgekeerde rijvolgorde, en u wilt ook de eigenschap order gebruiken om die volgorde opnieuw te rangschikken.
<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;
}
U kunt proberen door deze elementen te navigeren met de TAB- toets om het volgende focusbare element te vinden en de TAB+SHIFT -toetsen om het vorige focusbare element te vinden. Dit volgt de items in bronvolgorde: Eén, Twee, Drie.
Vanuit het perspectief van de eindgebruiker is dit niet logisch en kan het erg verwarrend zijn. Hetzelfde gebeurt als we een ruimtelijke navigatietool voor toegankelijkheid gebruiken om over de pagina te navigeren.
Om dit op te lossen, stelt u de reading-flow eigenschap in:
.box {
reading-flow: flex-visual;
}
De focusvolgorde is nu: Eén, Drie, Twee. Dit is dezelfde als de visuele volgorde die je zou krijgen als je in het Engels van links naar rechts leest.
Als u liever de focusvolgorde behoudt zoals deze oorspronkelijk bedoeld was, in omgekeerde volgorde, kunt u het volgende instellen:
.box {
reading-flow: flex-flow;
}
De focusvolgorde is nu de omgekeerde flexvolgorde: Twee, Drie, Eén. In beide gevallen wordt rekening gehouden met de CSS- order .
Voorbeeld met rasterindeling
Om te zien hoe dit in een raster werkt, stelt u zich voor dat u een lay-out maakt met automatisch geplaatste CSS-rasteritems met twaalf focusgebieden.
<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 kind helemaal bovenaan de grootste ruimte inneemt, gevolgd door het tweede kind in het midden van het raster. Alle andere kinderen 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 focusbare element te vinden en de TAB+SHIFT -toetsen om het vorige focusbare element te vinden. Dit volgt de items in bronvolgorde: één tot twaalf.
Om dit op te lossen, stelt u de reading-flow eigenschap in:
.wrapper {
reading-flow: grid-rows;
}
De focusvolgorde is nu: Vijf, Eén, Drie, Twee, Vier, Zes, Zeven, Acht, Negen, Tien, Elf, Twaalf. Het volgt de visuele volgorde, rij voor rij.
Als u wilt dat het leesproces de kolomvolgorde volgt, kunt u in plaats daarvan de trefwoordwaarde grid-columns gebruiken. De focusvolgorde wordt dan Vijf, Zes, Negen, Zeven, Tien, Eén, Twee, Elf, Drie, Vier, Acht, Twaalf.
.wrapper {
reading-flow: grid-columns;
}
Je kunt ook proberen grid-order te gebruiken. De focusvolgorde blijft één tot twaalf. Dit komt omdat er voor geen enkel item een CSS-volgorde is ingesteld.
Een blokcontainer die reading-order gebruikt
Met de eigenschap reading-order kunt u opgeven wanneer in de leesstroom een item moet worden bezocht, waarbij de volgorde wordt overschreven die is ingesteld door de eigenschap reading-flow . Het heeft alleen effect op een geldige leesstroomcontainer, wanneer de reading-flow niet normal is.
.wrapper {
display: block;
reading-flow: source-order;
}
.top {
reading-order: -1;
inset-inline-start: 50px;
inset-block-start: 50px;
}
De volgende blokcontainer bevat vijf items. Er zijn geen lay-outregels die de elementen opnieuw ordenen vanuit de bronvolgorde, maar er is één item dat niet in de stroom zit en dat als eerste moet worden bezocht.
<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 in te stellen op -1 , bezoekt de focusvolgorde het eerst voordat het terugkeert naar de bronvolgorde voor de rest van de leesstroomitems.
U kunt meer voorbeelden vinden op de chrome.dev-site .
Interactie met tabindex
Historisch gezien hebben ontwikkelaars het globale kenmerk HTML tabindex gebruikt om HTML-elementen focusseerbaar te maken en de relatieve volgorde voor sequentiële focusnavigatie te bepalen. Dit kenmerk heeft echter veel nadelen en toegankelijkheidsproblemen. Het grootste probleem is dat de op tabindex geordende focusnavigatie die wordt gecreëerd door het gebruik van positieve tabindex, niet wordt herkend door de toegankelijkheidsboom. Bij onjuist gebruik kan het gebeuren dat u een schokkerige focusvolgorde krijgt die niet overeenkomt met de ervaring op een schermlezer. Om dit op te lossen, kunt u de bestelling volgen met behulp van het HTML-attribuut aria-owns.
Om in het vorige flex-voorbeeld hetzelfde resultaat te krijgen als bij het gebruik van reading-flow: flex-visual , zou u 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? Vervolgens worden alle elementen met tabindex=1 samen bezocht, voordat we naar de volgende incrementele tabindexwaarde gaan. Deze springerige sequentiële navigatie zal resulteren in een slechte gebruikerservaring. Daarom raden toegankelijkheidsexperts aan om positieve tabindex te vermijden . We hebben geprobeerd dit op te lossen bij het ontwerpen van reading-flow .
Een container waarvoor de reading-flow is ingesteld, wordt eigenaar van een focusbereik. Dit betekent dat de sequentiële focusnavigatie wordt gebruikt om elk element in de container te bezoeken voordat naar het volgende focusbare element in een webdocument wordt gegaan. Verder worden de directe kinderen geordend met behulp van de reading-flow-eigenschap en worden positieve tabindex genegeerd voor ordeningsdoeleinden. Het is nog steeds mogelijk om een positieve tabindex in te stellen op de nakomelingen van een leesstroomitem.
Houd er rekening mee dat een element met display: contents dat de reading-flow -eigenschap van zijn lay-out-ouder overneemt, ook een geldige leesstroomcontainer zal zijn. Houd hier rekening mee bij het ontwerpen van uw site. Lees hier meer over 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 op chrome.dev uit en gebruik deze CSS-eigenschappen op uw sites. Als u feedback heeft, kunt u deze als probleem melden in de CSS Working Group GitHub repository . Als je specifiek feedback hebt over het tabindex- en focusscopinggedrag, meld dit dan als een probleem met de HTML WHATNOT GitHub-repository . We zouden graag uw feedback over deze functie ontvangen.
Gepubliceerd: 1 mei 2025
De CSS- reading-flow en reading-order eigenschappen zijn beschikbaar vanaf Chrome 137. In dit bericht worden de redenen achter het ontwerp van deze eigenschappen uitgelegd en enkele korte details om u op weg te helpen.
Lay-outmethoden zoals grid en flex hebben de ontwikkeling van de frontend getransformeerd, maar hun flexibiliteit kan voor sommige gebruikers een probleem veroorzaken. Het is heel gemakkelijk om een situatie te creëren waarin de visuele volgorde niet overeenkomt met de bronvolgorde in de DOM-structuur. Omdat deze bronvolgorde de browser volgt als u met een toetsenbord door de site navigeert, kunnen sommige gebruikers onverwacht rondspringen terwijl ze door een pagina navigeren.
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-, raster- of blokindeling worden blootgesteld aan toegankelijkheidstools en hoe ze worden gefocust met behulp van lineaire sequentiële navigatiemethoden.
Er is één sleutelwoordwaarde voor nodig, met de standaardwaarde normal , waardoor het gedrag van de bestelelementen in de DOM-volgorde blijft. Om het in een flexcontainer te gebruiken, stelt u de waarde ervan in op flex-visual of flex-flow . Om het in een rastercontainer te gebruiken, stelt u de waarde ervan in op grid-rows , grid-columns grid-order .
reading-order
Met de CSS-eigenschap reading-order kunt u de volgorde van items binnen een leesstroomcontainer handmatig overschrijven. Als u deze eigenschap in een raster-, flex- of blokcontainer wilt gebruiken, stelt u de reading-flow op de container in op source-order en stelt u de reading-order van het afzonderlijke item in op een geheel getal.
Voorbeeld in flexbox
U hebt bijvoorbeeld een container voor een flexibele lay-out met drie elementen in omgekeerde rijvolgorde, en u wilt ook de eigenschap order gebruiken om die volgorde opnieuw te rangschikken.
<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;
}
U kunt proberen door deze elementen te navigeren met de TAB- toets om het volgende focusbare element te vinden en de TAB+SHIFT -toetsen om het vorige focusbare element te vinden. Dit volgt de items in bronvolgorde: Eén, Twee, Drie.
Vanuit het perspectief van de eindgebruiker is dit niet logisch en kan het erg verwarrend zijn. Hetzelfde gebeurt als we een ruimtelijke navigatietool voor toegankelijkheid gebruiken om over de pagina te navigeren.
Om dit op te lossen, stelt u de reading-flow eigenschap in:
.box {
reading-flow: flex-visual;
}
De focusvolgorde is nu: Eén, Drie, Twee. Dit is dezelfde als de visuele volgorde die je zou krijgen als je in het Engels van links naar rechts leest.
Als u liever de focusvolgorde behoudt zoals deze oorspronkelijk bedoeld was, in omgekeerde volgorde, kunt u het volgende instellen:
.box {
reading-flow: flex-flow;
}
De focusvolgorde is nu de omgekeerde flexvolgorde: Twee, Drie, Eén. In beide gevallen wordt rekening gehouden met de CSS- order .
Voorbeeld met rasterindeling
Om te zien hoe dit in een raster werkt, stelt u zich voor dat u een lay-out maakt met automatisch geplaatste CSS-rasteritems met twaalf focusgebieden.
<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 kind helemaal bovenaan de grootste ruimte inneemt, gevolgd door het tweede kind in het midden van het raster. Alle andere kinderen 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 focusbare element te vinden en de TAB+SHIFT -toetsen om het vorige focusbare element te vinden. Dit volgt de items in bronvolgorde: één tot twaalf.
Om dit op te lossen, stelt u de reading-flow eigenschap in:
.wrapper {
reading-flow: grid-rows;
}
De focusvolgorde is nu: Vijf, Eén, Drie, Twee, Vier, Zes, Zeven, Acht, Negen, Tien, Elf, Twaalf. Het volgt de visuele volgorde, rij voor rij.
Als u wilt dat het leesproces de kolomvolgorde volgt, kunt u in plaats daarvan de trefwoordwaarde grid-columns gebruiken. De focusvolgorde wordt dan Vijf, Zes, Negen, Zeven, Tien, Eén, Twee, Elf, Drie, Vier, Acht, Twaalf.
.wrapper {
reading-flow: grid-columns;
}
Je kunt ook proberen grid-order te gebruiken. De focusvolgorde blijft één tot twaalf. Dit komt omdat er voor geen enkel item een CSS-volgorde is ingesteld.
Een blokcontainer die reading-order gebruikt
Met de eigenschap reading-order kunt u opgeven wanneer in de leesstroom een item moet worden bezocht, waarbij de volgorde wordt overschreven die is ingesteld door de eigenschap reading-flow . Het heeft alleen effect op een geldige leesstroomcontainer, wanneer de reading-flow niet normal is.
.wrapper {
display: block;
reading-flow: source-order;
}
.top {
reading-order: -1;
inset-inline-start: 50px;
inset-block-start: 50px;
}
De volgende blokcontainer bevat vijf items. Er zijn geen lay-outregels die de elementen opnieuw ordenen vanuit de bronvolgorde, maar er is één item dat niet in de stroom zit en dat als eerste moet worden bezocht.
<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 in te stellen op -1 , bezoekt de focusvolgorde het eerst voordat het terugkeert naar de bronvolgorde voor de rest van de leesstroomitems.
U kunt meer voorbeelden vinden op de chrome.dev-site .
Interactie met tabindex
Historisch gezien hebben ontwikkelaars het globale kenmerk HTML tabindex gebruikt om HTML-elementen focusseerbaar te maken en de relatieve volgorde voor sequentiële focusnavigatie te bepalen. Dit kenmerk heeft echter veel nadelen en toegankelijkheidsproblemen. Het grootste probleem is dat de op tabindex geordende focusnavigatie die wordt gecreëerd door het gebruik van positieve tabindex, niet wordt herkend door de toegankelijkheidsboom. Bij onjuist gebruik kan het gebeuren dat u een schokkerige focusvolgorde krijgt die niet overeenkomt met de ervaring op een schermlezer. Om dit op te lossen, kunt u de bestelling volgen met behulp van het HTML-attribuut aria-owns.
Om in het vorige flex-voorbeeld hetzelfde resultaat te krijgen als bij het gebruik van reading-flow: flex-visual , zou u 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? Vervolgens worden alle elementen met tabindex=1 samen bezocht, voordat we naar de volgende incrementele tabindexwaarde gaan. Deze springerige sequentiële navigatie zal resulteren in een slechte gebruikerservaring. Daarom raden toegankelijkheidsexperts aan om positieve tabindex te vermijden . We hebben geprobeerd dit op te lossen bij het ontwerpen van reading-flow .
Een container waarvoor de reading-flow is ingesteld, wordt eigenaar van een focusbereik. Dit betekent dat de sequentiële focusnavigatie wordt gebruikt om elk element in de container te bezoeken voordat naar het volgende focusbare element in een webdocument wordt gegaan. Verder worden de directe kinderen geordend met behulp van de reading-flow-eigenschap en worden positieve tabindex genegeerd voor ordeningsdoeleinden. Het is nog steeds mogelijk om een positieve tabindex in te stellen op de nakomelingen van een leesstroomitem.
Houd er rekening mee dat een element met display: contents dat de reading-flow -eigenschap van zijn lay-out-ouder overneemt, ook een geldige leesstroomcontainer zal zijn. Houd hier rekening mee bij het ontwerpen van uw site. Lees hier meer over 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 op chrome.dev uit en gebruik deze CSS-eigenschappen op uw sites. Als u feedback heeft, kunt u deze als probleem melden in de CSS Working Group GitHub repository . Als je specifiek feedback hebt over het tabindex- en focusscopinggedrag, meld dit dan als een probleem met de HTML WHATNOT GitHub-repository . We zouden graag uw feedback over deze functie ontvangen.
Gepubliceerd: 1 mei 2025
De CSS- reading-flow en reading-order eigenschappen zijn beschikbaar vanaf Chrome 137. In dit bericht worden de redenen achter het ontwerp van deze eigenschappen uitgelegd en enkele korte details om u op weg te helpen.
Lay-outmethoden zoals grid en flex hebben de ontwikkeling van de frontend getransformeerd, maar hun flexibiliteit kan voor sommige gebruikers een probleem veroorzaken. Het is heel gemakkelijk om een situatie te creëren waarin de visuele volgorde niet overeenkomt met de bronvolgorde in de DOM-structuur. Omdat deze bronvolgorde de browser volgt als u met een toetsenbord door de site navigeert, kunnen sommige gebruikers onverwacht rondspringen terwijl ze door een pagina navigeren.
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-, raster- of blokindeling worden blootgesteld aan toegankelijkheidstools en hoe ze worden gefocust met behulp van lineaire sequentiële navigatiemethoden.
Er is één sleutelwoordwaarde voor nodig, met de standaardwaarde normal , waardoor het gedrag van de bestelelementen in de DOM-volgorde blijft. Om het in een flexcontainer te gebruiken, stelt u de waarde ervan in op flex-visual of flex-flow . Om het in een rastercontainer te gebruiken, stelt u de waarde ervan in op grid-rows , grid-columns grid-order .
reading-order
Met de CSS-eigenschap reading-order kunt u de volgorde van items binnen een leesstroomcontainer handmatig overschrijven. Als u deze eigenschap in een raster-, flex- of blokcontainer wilt gebruiken, stelt u de reading-flow op de container in op source-order en stelt u de reading-order van het afzonderlijke item in op een geheel getal.
Voorbeeld in flexbox
U hebt bijvoorbeeld een container voor een flexibele lay-out met drie elementen in omgekeerde rijvolgorde, en u wilt ook de eigenschap order gebruiken om die volgorde opnieuw te rangschikken.
<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;
}
U kunt proberen door deze elementen te navigeren met de TAB- toets om het volgende focusbare element te vinden en de TAB+SHIFT -toetsen om het vorige focusbare element te vinden. Dit volgt de items in bronvolgorde: Eén, Twee, Drie.
Vanuit het perspectief van de eindgebruiker is dit niet logisch en kan het erg verwarrend zijn. Hetzelfde gebeurt als we een ruimtelijke navigatietool voor toegankelijkheid gebruiken om over de pagina te navigeren.
Om dit op te lossen, stelt u de reading-flow eigenschap in:
.box {
reading-flow: flex-visual;
}
De focusvolgorde is nu: Eén, Drie, Twee. Dit is dezelfde als de visuele volgorde die je zou krijgen als je in het Engels van links naar rechts leest.
Als u liever de focusvolgorde behoudt zoals deze oorspronkelijk bedoeld was, in omgekeerde volgorde, kunt u het volgende instellen:
.box {
reading-flow: flex-flow;
}
De focusvolgorde is nu de omgekeerde flexvolgorde: Twee, Drie, Eén. In beide gevallen wordt rekening gehouden met de CSS- order .
Voorbeeld met rasterindeling
Om te zien hoe dit in een raster werkt, stelt u zich voor dat u een lay-out maakt met automatisch geplaatste CSS-rasteritems met twaalf focusgebieden.
<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 kind helemaal bovenaan de grootste ruimte inneemt, gevolgd door het tweede kind in het midden van het raster. Alle andere kinderen 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 focusbare element te vinden en de TAB+SHIFT -toetsen om het vorige focusbare element te vinden. Dit volgt de items in bronvolgorde: één tot twaalf.
Om dit op te lossen, stelt u de reading-flow eigenschap in:
.wrapper {
reading-flow: grid-rows;
}
De focusvolgorde is nu: Vijf, Eén, Drie, Twee, Vier, Zes, Zeven, Acht, Negen, Tien, Elf, Twaalf. Het volgt de visuele volgorde, rij voor rij.
Als u wilt dat het leesproces de kolomvolgorde volgt, kunt u in plaats daarvan de trefwoordwaarde grid-columns gebruiken. De focusvolgorde wordt dan Vijf, Zes, Negen, Zeven, Tien, Eén, Twee, Elf, Drie, Vier, Acht, Twaalf.
.wrapper {
reading-flow: grid-columns;
}
Je kunt ook proberen grid-order te gebruiken. De focusvolgorde blijft één tot twaalf. Dit komt omdat er voor geen enkel item een CSS-volgorde is ingesteld.
Een blokcontainer die reading-order gebruikt
Met de eigenschap reading-order kunt u opgeven wanneer in de leesstroom een item moet worden bezocht, waarbij de volgorde wordt overschreven die is ingesteld door de eigenschap reading-flow . Het heeft alleen effect op een geldige leesstroomcontainer, wanneer de reading-flow niet normal is.
.wrapper {
display: block;
reading-flow: source-order;
}
.top {
reading-order: -1;
inset-inline-start: 50px;
inset-block-start: 50px;
}
De volgende blokcontainer bevat vijf items. Er zijn geen lay-outregels die de elementen opnieuw ordenen vanuit de bronvolgorde, maar er is één item dat niet in de stroom zit en dat als eerste moet worden bezocht.
<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 in te stellen op -1 , bezoekt de focusvolgorde het eerst voordat het terugkeert naar de bronvolgorde voor de rest van de leesstroomitems.
U kunt meer voorbeelden vinden op de chrome.dev-site .
Interactie met tabindex
Historisch gezien hebben ontwikkelaars het globale kenmerk HTML tabindex gebruikt om HTML-elementen focusseerbaar te maken en de relatieve volgorde voor sequentiële focusnavigatie te bepalen. Dit kenmerk heeft echter veel nadelen en toegankelijkheidsproblemen. Het grootste probleem is dat de op tabindex geordende focusnavigatie die wordt gecreëerd door het gebruik van positieve tabindex, niet wordt herkend door de toegankelijkheidsboom. Bij onjuist gebruik kan het gebeuren dat u een schokkerige focusvolgorde krijgt die niet overeenkomt met de ervaring op een schermlezer. Om dit op te lossen, kunt u de bestelling volgen met behulp van het HTML-attribuut aria-owns.
Om in het vorige flex-voorbeeld hetzelfde resultaat te krijgen als bij het gebruik van reading-flow: flex-visual , zou u 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? Vervolgens worden alle elementen met tabindex=1 samen bezocht, voordat we naar de volgende incrementele tabindexwaarde gaan. Deze springerige sequentiële navigatie zal resulteren in een slechte gebruikerservaring. Daarom raden toegankelijkheidsexperts aan om positieve tabindex te vermijden . We hebben geprobeerd dit op te lossen bij het ontwerpen van reading-flow .
Een container waarvoor de reading-flow is ingesteld, wordt eigenaar van een focusbereik. Dit betekent dat de sequentiële focusnavigatie wordt gebruikt om elk element in de container te bezoeken voordat naar het volgende focusbare element in een webdocument wordt gegaan. Verder worden de directe kinderen geordend met behulp van de reading-flow-eigenschap en worden positieve tabindex genegeerd voor ordeningsdoeleinden. Het is nog steeds mogelijk om een positieve tabindex in te stellen op de nakomelingen van een leesstroomitem.
Houd er rekening mee dat een element met display: contents dat de reading-flow -eigenschap van zijn lay-out-ouder overneemt, ook een geldige leesstroomcontainer zal zijn. Houd hier rekening mee bij het ontwerpen van uw site. Lees hier meer over 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 op chrome.dev uit en gebruik deze CSS-eigenschappen op uw sites. Als u feedback heeft, kunt u deze als probleem melden in de CSS Working Group GitHub repository . Als je specifiek feedback hebt over het tabindex- en focusscopinggedrag, meld dit dan als een probleem met de HTML WHATNOT GitHub-repository . We zouden graag uw feedback over deze functie ontvangen.
Gepubliceerd: 1 mei 2025
De CSS- reading-flow en reading-order eigenschappen zijn beschikbaar vanaf Chrome 137. In dit bericht worden de redenen achter het ontwerp van deze eigenschappen uitgelegd en enkele korte details om u op weg te helpen.
Lay-outmethoden zoals grid en flex hebben de ontwikkeling van de frontend getransformeerd, maar hun flexibiliteit kan voor sommige gebruikers een probleem veroorzaken. Het is heel gemakkelijk om een situatie te creëren waarin de visuele volgorde niet overeenkomt met de bronvolgorde in de DOM-structuur. Omdat deze bronvolgorde de browser volgt als u met een toetsenbord door de site navigeert, kunnen sommige gebruikers onverwacht rondspringen terwijl ze door een pagina navigeren.
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-, raster- of blokindeling worden blootgesteld aan toegankelijkheidstools en hoe ze worden gefocust met behulp van lineaire sequentiële navigatiemethoden.
Er is één sleutelwoordwaarde voor nodig, met de standaardwaarde normal , waardoor het gedrag van de bestelelementen in de DOM-volgorde blijft. Om het in een flexcontainer te gebruiken, stelt u de waarde ervan in op flex-visual of flex-flow . Om het in een rastercontainer te gebruiken, stelt u de waarde ervan in op grid-rows , grid-columns grid-order .
reading-order
Met de CSS-eigenschap reading-order kunt u de volgorde van items binnen een leesstroomcontainer handmatig overschrijven. Als u deze eigenschap in een raster-, flex- of blokcontainer wilt gebruiken, stelt u de reading-flow op de container in op source-order en stelt u de reading-order van het afzonderlijke item in op een geheel getal.
Voorbeeld in flexbox
U hebt bijvoorbeeld een container voor een flexibele lay-out met drie elementen in omgekeerde rijvolgorde, en u wilt ook de eigenschap order gebruiken om die volgorde opnieuw te rangschikken.
<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;
}
U kunt proberen door deze elementen te navigeren met de TAB- toets om het volgende focusbare element te vinden en de TAB+SHIFT -toetsen om het vorige focusbare element te vinden. Dit volgt de items in bronvolgorde: Eén, Twee, Drie.
Vanuit het perspectief van de eindgebruiker is dit niet logisch en kan het erg verwarrend zijn. Hetzelfde gebeurt als we een ruimtelijke navigatietool voor toegankelijkheid gebruiken om over de pagina te navigeren.
Om dit op te lossen, stelt u de reading-flow eigenschap in:
.box {
reading-flow: flex-visual;
}
De focusvolgorde is nu: Eén, Drie, Twee. Dit is dezelfde als de visuele volgorde die je zou krijgen als je in het Engels van links naar rechts leest.
Als u liever de focusvolgorde behoudt zoals deze oorspronkelijk bedoeld was, in omgekeerde volgorde, kunt u het volgende instellen:
.box {
reading-flow: flex-flow;
}
De focusvolgorde is nu de omgekeerde flexvolgorde: Twee, Drie, Eén. In beide gevallen wordt rekening gehouden met de CSS- order .
Voorbeeld met rasterindeling
Om te zien hoe dit in een raster werkt, stelt u zich voor dat u een lay-out maakt met automatisch geplaatste CSS-rasteritems met twaalf focusgebieden.
<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 kind helemaal bovenaan de grootste ruimte inneemt, gevolgd door het tweede kind in het midden van het raster. Alle andere kinderen 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 focusbare element te vinden en de TAB+SHIFT -toetsen om het vorige focusbare element te vinden. Dit volgt de items in bronvolgorde: één tot twaalf.
Om dit op te lossen, stelt u de reading-flow eigenschap in:
.wrapper {
reading-flow: grid-rows;
}
De focusvolgorde is nu: Vijf, Eén, Drie, Twee, Vier, Zes, Zeven, Acht, Negen, Tien, Elf, Twaalf. Het volgt de visuele volgorde, rij voor rij.
Als u wilt dat het leesproces de kolomvolgorde volgt, kunt u in plaats daarvan de trefwoordwaarde grid-columns gebruiken. De focusvolgorde wordt dan Vijf, Zes, Negen, Zeven, Tien, Eén, Twee, Elf, Drie, Vier, Acht, Twaalf.
.wrapper {
reading-flow: grid-columns;
}
Je kunt ook proberen grid-order te gebruiken. De focusvolgorde blijft één tot twaalf. Dit komt omdat er voor geen enkel item een CSS-volgorde is ingesteld.
Een blokcontainer die reading-order gebruikt
Met de eigenschap reading-order kunt u opgeven wanneer in de leesstroom een item moet worden bezocht, waarbij de volgorde wordt overschreven die is ingesteld door de eigenschap reading-flow . Het heeft alleen effect op een geldige leesstroomcontainer, wanneer de reading-flow niet normal is.
.wrapper {
display: block;
reading-flow: source-order;
}
.top {
reading-order: -1;
inset-inline-start: 50px;
inset-block-start: 50px;
}
De volgende blokcontainer bevat vijf items. Er zijn geen lay-outregels die de elementen opnieuw ordenen vanuit de bronvolgorde, maar er is één item dat niet in de stroom zit en dat als eerste moet worden bezocht.
<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 in te stellen op -1 , bezoekt de focusvolgorde het eerst voordat het terugkeert naar de bronvolgorde voor de rest van de leesstroomitems.
U kunt meer voorbeelden vinden op de chrome.dev-site .
Interactie met tabindex
Historisch gezien hebben ontwikkelaars het globale kenmerk HTML tabindex gebruikt om HTML-elementen focusseerbaar te maken en de relatieve volgorde voor sequentiële focusnavigatie te bepalen. Dit kenmerk heeft echter veel nadelen en toegankelijkheidsproblemen. Het grootste probleem is dat de op tabindex geordende focusnavigatie die wordt gecreëerd door het gebruik van positieve tabindex, niet wordt herkend door de toegankelijkheidsboom. Bij onjuist gebruik kan het gebeuren dat u een schokkerige focusvolgorde krijgt die niet overeenkomt met de ervaring op een schermlezer. Om dit op te lossen, kunt u de bestelling volgen met behulp van het HTML-attribuut aria-owns.
Om in het vorige flex-voorbeeld hetzelfde resultaat te krijgen als bij het gebruik van reading-flow: flex-visual , zou u 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? Vervolgens worden alle elementen met tabindex=1 samen bezocht, voordat we naar de volgende incrementele tabindexwaarde gaan. Deze springerige sequentiële navigatie zal resulteren in een slechte gebruikerservaring. Daarom raden toegankelijkheidsexperts aan om positieve tabindex te vermijden . We hebben geprobeerd dit op te lossen bij het ontwerpen van reading-flow .
Een container waarvoor de reading-flow is ingesteld, wordt eigenaar van een focusbereik. Dit betekent dat de sequentiële focusnavigatie wordt gebruikt om elk element in de container te bezoeken voordat naar het volgende focusbare element in een webdocument wordt gegaan. Verder worden de directe kinderen geordend met behulp van de reading-flow-eigenschap en worden positieve tabindex genegeerd voor ordeningsdoeleinden. Het is nog steeds mogelijk om een positieve tabindex in te stellen op de nakomelingen van een leesstroomitem.
Houd er rekening mee dat een element met display: contents dat de reading-flow -eigenschap van zijn lay-out-ouder overneemt, ook een geldige leesstroomcontainer zal zijn. Houd hier rekening mee bij het ontwerpen van uw site. Lees hier meer over 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 op chrome.dev uit en gebruik deze CSS-eigenschappen op uw sites. Als u feedback heeft, kunt u deze als probleem melden in de CSS Working Group GitHub repository . Als je specifiek feedback hebt over het tabindex- en focusscopinggedrag, meld dit dan als een probleem met de HTML WHATNOT GitHub-repository . We zouden graag uw feedback over deze functie ontvangen.