Veröffentlicht am 1. Mai 2025
Die CSS-Attribute reading-flow und reading-order sind ab Chrome 137 verfügbar.
In diesem Beitrag werden die Gründe für das Design dieser Eigenschaften und einige kurze Details erläutert, die Ihnen den Einstieg erleichtern sollen.
Layoutmethoden wie Grid und Flex haben die Frontend-Entwicklung revolutioniert, ihre Flexibilität kann jedoch für einige Nutzer ein Problem darstellen. Es ist sehr einfach, eine Situation zu schaffen, in der die visuelle Reihenfolge nicht mit der Quellreihenfolge im DOM-Baum übereinstimmt. Da der Browser dieser Reihenfolge folgt, wenn Sie die Website über eine Tastatur aufrufen, kann es für einige Nutzer zu unerwarteten Sprüngen kommen, wenn sie auf einer Seite navigieren.
Die Eigenschaften reading-flow und reading-order wurden entwickelt und der CSS-Displayspezifikation hinzugefügt, um dieses langjährige Problem zu beheben.
reading-flow
Mit der CSS-Eigenschaft reading-flow wird die Reihenfolge gesteuert, in der Elemente in einem Flex-, Grid- oder Blocklayout für Barrierefreiheitstools verfügbar gemacht werden und wie sie mit linearen sequenziellen Navigationsmethoden fokussiert werden.
Es wird ein Keyword-Wert mit dem Standardwert normal verwendet, der das Verhalten beibehält, Elemente in der DOM-Reihenfolge zu sortieren.
Wenn Sie die Eigenschaft in einem Flex-Container verwenden möchten, legen Sie ihren Wert auf flex-visual oder flex-flow fest. Wenn Sie die Eigenschaft in einem Grid-Container verwenden möchten, legen Sie ihren Wert auf grid-rows, grid-columns oder grid-order fest.
reading-order
Mit der CSS-Property reading-order können Sie die Reihenfolge von Elementen in einem Container für den Lesefluss manuell überschreiben. Wenn Sie diese Eigenschaft in einem Grid-, Flex- oder Block-Container verwenden möchten, setzen Sie den Wert reading-flow des Containers auf source-order und den Wert reading-order des einzelnen Elements auf einen ganzzahligen Wert.
Beispiel in Flexbox
Angenommen, Sie haben einen Flex-Layout-Container mit drei Elementen in umgekehrter Zeilenreihenfolge und möchten die Reihenfolge mit der Eigenschaft „order“ ändern.
<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;
}
Sie können versuchen, mit der TAB-Taste zum nächsten fokussierbaren Element und mit TAB+UMSCHALTTASTE zum vorherigen fokussierbaren Element zu navigieren. Die Reihenfolge entspricht der Quellreihenfolge: Eins, Zwei, Drei.
Aus Nutzersicht ist das nicht nachvollziehbar und kann sehr verwirrend sein. Dasselbe passiert, wenn wir ein Tool für die räumliche Navigation verwenden, um auf der Seite zu navigieren.
So beheben Sie das Problem: Legen Sie das Attribut reading-flow fest:
.box {
reading-flow: flex-visual;
}
Die Fokusreihenfolge ist jetzt: Eins, Drei, Zwei. Das entspricht der visuellen Reihenfolge, die Sie beim Lesen von links nach rechts erhalten.
Wenn Sie die ursprüngliche Fokusreihenfolge beibehalten möchten, können Sie Folgendes festlegen:
.box {
reading-flow: flex-flow;
}
Die Fokusreihenfolge ist jetzt die umgekehrte Flex-Reihenfolge: Zwei, Drei, Eins. In beiden Fällen wird die CSS-Property order berücksichtigt.
Beispiel mit Rasterlayout
Stellen Sie sich vor, Sie erstellen ein Layout mit CSS-Grid-Elementen, die automatisch platziert werden, und zwölf fokussierbaren Bereichen.
<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>
Das fünfte Kind soll den größten Bereich ganz oben einnehmen, gefolgt vom zweiten Kind in der Mitte des Rasters. Alle anderen untergeordneten Elemente können automatisch gemäß einer Spaltenvorlage im Raster platziert werden.
.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;
}
Versuchen Sie, mit der TAB-Taste zum nächsten fokussierbaren Element und mit TAB + UMSCHALTTASTE zum vorherigen fokussierbaren Element zu navigieren. Die Reihenfolge entspricht der Quellreihenfolge: Eins bis Zwölf.
So beheben Sie das Problem: Legen Sie das Attribut reading-flow fest:
.wrapper {
reading-flow: grid-rows;
}
Die Fokusreihenfolge ist jetzt: 5, 1, 3, 2, 4, 6, 7, 8, 9, 10, 11, 12. Die Reihenfolge entspricht der visuellen Reihenfolge, Zeile für Zeile.
Wenn Sie stattdessen möchten, dass der Lesefluss der Spaltenreihenfolge folgt, können Sie den Keyword-Wert grid-columns verwenden. Die Fokusreihenfolge lautet dann: Fünf, Sechs, Neun, Sieben, Zehn, Eins, Zwei, Elf, Drei, Vier, Acht, Zwölf.
.wrapper {
reading-flow: grid-columns;
}
Du kannst es auch mit grid-order versuchen. Die Fokusreihenfolge bleibt „Eins bis Zwölf“.
Das liegt daran, dass für keinen Artikel eine Bestellung über ein Preisvergleichsportal festgelegt wurde.
Ein Blockcontainer mit reading-order
Mit der Property reading-order können Sie festlegen, wann ein Element im Lesefluss besucht werden soll. Dadurch wird die durch die Property reading-flow festgelegte Reihenfolge überschrieben. Sie wird nur auf einen gültigen Container für den Lesefluss angewendet, wenn die reading-flow-Eigenschaft nicht normal ist.
.wrapper {
display: block;
reading-flow: source-order;
}
.top {
reading-order: -1;
inset-inline-start: 50px;
inset-block-start: 50px;
}
Der folgende Blockcontainer enthält fünf Elemente. Es gibt keine Layoutregeln, die die Elemente in der Quellreihenfolge neu anordnen, aber es gibt ein Element, das nicht im Fluss ist und zuerst besucht werden sollte.
<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>
Wenn Sie reading-order dieses Elements auf -1 setzen, wird es in der Fokusreihenfolge zuerst besucht, bevor für die restlichen Elemente des Leseflusses auf die Quellreihenfolge zurückgegriffen wird.
Weitere Beispiele finden Sie auf der chrome.dev-Website.
Interaktion mit tabindex
Bisher haben Entwickler das globale HTML-Attribut tabindex verwendet, um HTML-Elemente fokussierbar zu machen und die relative Reihenfolge für die sequentielle Fokusnavigation festzulegen. Dieses Attribut hat jedoch viele Nachteile und Bedenken hinsichtlich der Barrierefreiheit. Das Hauptproblem besteht darin, dass die durch die Verwendung eines positiven tabindex erstellte Fokusnavigation in der Tabindex-Reihenfolge nicht vom Barrierefreiheitsbaum erkannt wird. Bei falscher Verwendung kann es zu einer sprunghaften Fokusreihenfolge kommen, die nicht mit der Erfahrung auf einem Screenreader übereinstimmt. Um das Problem zu beheben, verfolgen Sie die Reihenfolge mit dem HTML-Attribut „aria-owns“.
Im vorherigen Flex-Beispiel können Sie das gleiche Ergebnis wie mit reading-flow: flex-visual so erzielen:
<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>
Was passiert aber, wenn ein anderes Element außerhalb des Containers ebenfalls tabindex=1 hat?
Anschließend werden alle Elemente mit tabindex=1 zusammen besucht, bevor zum nächsten inkrementellen Tabindex-Wert gewechselt wird. Diese sprunghafte sequentielle Navigation führt zu einer schlechten Nutzererfahrung. Daher empfehlen Bedienungshilfenexperten, positive Tabindex zu vermeiden. Wir haben versucht, dieses Problem beim Design von reading-flow zu beheben.
Ein Container, für den das Attribut reading-flow festgelegt ist, wird zum Inhaber des Fokusbereichs.
Das bedeutet, dass die sequenzielle Fokusnavigation so festgelegt wird, dass jedes Element im Container besucht wird, bevor zum nächsten fokussierbaren Element in einem Webdokument gewechselt wird. Außerdem werden die direkten untergeordneten Elemente anhand der Eigenschaft „reading-flow“ sortiert und positive Tabindex werden bei der Sortierung ignoriert. Es ist weiterhin möglich, für die untergeordneten Elemente eines Elements im Lesefluss einen positiven Tabindex festzulegen.
Ein Element mit display: contents, das die reading-flow-Property von seinem Layout-Übergeordneten erbt, ist ebenfalls ein gültiger Container für den Lesefluss. Berücksichtigen Sie dies beim Design Ihrer Website. Weitere Informationenreading-flowdisplay: contents
Geben Sie uns Feedback
Probieren Sie die Beispiele in diesem Beitrag und die reading-flow-Beispiele auf chrome.dev aus und verwenden Sie diese CSS-Eigenschaften auf Ihren Websites. Wenn Sie Feedback haben, melden Sie es als Problem im GitHub-Repository der CSS Working Group. Wenn Sie Feedback zum Verhalten von „tabindex“ und zum Fokusbereich haben, melden Sie es bitte als Problem im HTML WHATNOT GitHub-Repository. Wir freuen uns über Ihr Feedback zu dieser Funktion.