Data publikacji: 1 maja 2025 r.
Właściwości CSS reading-flow i reading-order są dostępne od wersji Chrome 137.
W tym poście opisujemy, dlaczego te usługi zostały tak zaprojektowane, oraz przedstawiamy kilka krótkich informacji, które ułatwią Ci rozpoczęcie z ich korzystania.
Metody układu, takie jak siatka i flex, zmieniły front-end, ale ich elastyczność może być problemem dla niektórych użytkowników. Bardzo łatwo jest stworzyć sytuację, w której kolejność wizualna nie będzie zgodna z kolejnością w źródle w drzewie DOM. Podczas poruszania się po stronie za pomocą klawiatury przeglądarka korzysta z kolejności źródeł, dlatego niektórzy użytkownicy mogą napotkać nieoczekiwane przeskakiwanie podczas poruszania się po stronie.
Właściwości reading-flow i reading-order zostały zaprojektowane i dodane do specyfikacji wyświetlania w usłudze porównywania cen, aby rozwiązać ten długotrwały problem.
reading-flow
Właściwość CSS reading-flow określa kolejność, w jakiej elementy w układzie flex, siatkowym lub blokowym są udostępniane narzędziom ułatwień dostępu, oraz sposób ich zaznaczania za pomocą metody nawigacji sekwencyjnej.
Przyjmuje 1 wartość słowa kluczowego, domyślnie normal, która zachowuje zachowanie sortowania elementów w kolejności DOM.
Aby użyć go w kontenerze elastycznych elementów, ustaw jego wartość na flex-visual lub flex-flow. Aby użyć go w kontenerze siatki, ustaw jego wartość na grid-rows, grid-columns lub grid-order.
reading-order
Właściwość CSS reading-order umożliwia ręczne zastąpienie kolejności elementów w kontenerze przepływu czytania. Aby użyć tej właściwości w kontenerze siatki, elastycznych elementów lub bloku, ustaw wartość reading-flow w kontenerze na source-order, a wartość reading-order w przypadku poszczególnych elementów na liczbę całkowitą.
Przykład w układzie flexbox
Możesz na przykład mieć kontener z elastycznym układem z 3 elementami w odwrotnej kolejności wierszy i chcesz użyć właściwości kolejność, aby zmienić tę kolejność.
<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;
}
Możesz poruszać się po tych elementach, naciskając klawisz TAB, aby znaleźć następny element, na którym można skupić uwagę, oraz TAB + SHIFT, aby znaleźć poprzedni element, na którym można skupić uwagę. Elementy są uporządkowane według kolejności w źródle: 1, 2, 3.
Z perspektywy użytkownika nie ma to sensu i może być bardzo mylące. To samo dzieje się, gdy używamy narzędzia do nawigacji przestrzennej w ramach ułatwień dostępu.
Aby rozwiązać ten problem, ustaw właściwość reading-flow:
.box {
reading-flow: flex-visual;
}
Kolejność fokusów to teraz: 1, 3, 2. Jest to ten sam porządek, w jakim widzisz elementy, gdy czytasz po angielsku od lewej do prawej.
Jeśli wolisz zachować kolejność punktów ogniskowania w pierwotnym porządku, ale w odwrotnej kolejności, możesz ustawić:
.box {
reading-flow: flex-flow;
}
Kolejność fokusów to teraz odwrotna kolejność flexów: 2, 3, 1. W obu przypadkach uwzględniana jest właściwość order w usłudze porównywania cen.
Przykład układu siatki
Aby zobaczyć, jak to działa w kratce, wyobraź sobie, że tworzysz układ z automatycznie umieszczanymi elementami w kratce CSS z 12 obszarami, na których można się skupić.
<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>
Piąty element ma zajmować największą przestrzeń u samego góry, a drugi – w połowie siatki. Wszystkie pozostałe elementy podrzędne mogą być automatycznie umieszczane w sieci zgodnie z szablonem kolumny.
.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;
}
Spróbuj poruszać się po tych elementach za pomocą klawisza Tab, aby znaleźć następny element, na którym można ustawić fokus, oraz klawiszy Tab + Shift, aby znaleźć poprzedni element, na którym można ustawić fokus. Lista zawiera produkty w kolejności źródłowej: od 1 do 12.
Aby rozwiązać ten problem, ustaw właściwość reading-flow:
.wrapper {
reading-flow: grid-rows;
}
Kolejność punktów ostrości to teraz: 5, 1, 3, 2, 4, 6, 7, 8, 9, 10, 11, 12. Jest ona zgodna z kolejnością wizualną, wiersz po wierszu.
Jeśli chcesz, aby kolejność czytania tekstu była zgodna z kolejnością kolumn, możesz użyć wartości grid-columns. Kolejność punktów skupienia będzie więc następująca: 5, 6, 9, 7, 10, 1, 2, 11, 3, 4, 8, 12.
.wrapper {
reading-flow: grid-columns;
}
Możesz też spróbować użyć grid-order. Kolejność skupienia pozostaje taka sama: od 1 do 12.
Wynika to z tego, że żaden produkt nie miał ustawionego zamówienia w usłudze porównywania cen.
Blokowanie kontenera za pomocą reading-order
Właściwość reading-order pozwala określić, kiedy w przebiegu czytania należy wyświetlić dany element, zastępując kolejność określoną przez właściwość reading-flow. Ma ona zastosowanie tylko do prawidłowego kontenera przepływu czytania, gdy właściwość reading-flow nie jest normal.
.wrapper {
display: block;
reading-flow: source-order;
}
.top {
reading-order: -1;
inset-inline-start: 50px;
inset-block-start: 50px;
}
Ten kontener bloku zawiera 5 elementów. Nie ma reguł układu, które zmieniają kolejność elementów w stosunku do ich kolejności źródłowej, ale jest jeden element poza kolejnością, który powinien zostać odwiedzony jako pierwszy.
<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>
Jeśli ustawisz wartość reading-order na -1, element ten będzie odwiedzany jako pierwszy przez kolejność fokusu, a potem w przypadku pozostałych elementów ścieżki czytania będzie stosowana kolejność źródłowa.
Więcej przykładów znajdziesz na stronie chrome.dev.
Interakcja z tabindex
Deweloperzy używali atrybutu globalnego HTML tabindex, aby nadać elementom HTML możliwość skupienia i określić względną kolejność nawigacji skupienia. Ma on jednak wiele wad i wzbudza obawy związane z dostępnością. Najważniejszym problemem jest to, że nawigacja porządkowana według tabindexu utworzona za pomocą dodatniego tabindexu nie jest rozpoznawana przez drzewo ułatwień dostępu. Jeśli nie są one używane prawidłowo, kolejność elementów może się zmieniać, co nie będzie odpowiadać temu, co widzi użytkownik czytnika ekranu. Aby to naprawić, śledź kolejność za pomocą atrybutu HTML aria-owns.
Aby uzyskać taki sam wynik jak w poprzednim przykładzie flexa, możesz wykonać te czynności:reading-flow: flex-visual
<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>
Co się jednak stanie, jeśli inny element poza kontenerem również ma tabindex=1?
Następnie wszystkie elementy z tabindex=1 zostaną odwiedzone razem, zanim przejdziemy do następnej wartości tabindex. Takie przeskakiwanie między sekwencjami może negatywnie wpłynąć na wrażenia użytkowników. Dlatego eksperci ds. dostępności zalecają unikanie indeksu karty dodatniej. Próbowaliśmy to naprawić podczas projektowania reading-flow.
Kontener, który ma ustawioną właściwość reading-flow, staje się właścicielem zakresu fokusu.
Oznacza to, że ogranicza ona sekwencyjną nawigację zaznaczenia, aby odwiedzić wszystkie elementy w kontenerze, zanim przejdzie do następnego elementu, który można zaznaczyć w dokumencie sieci Web. Ponadto jego bezpośrednie elementy podrzędne są uporządkowane za pomocą właściwości reading-flow, a do celów sortowania ignorowany jest dodatni tabindex. Nadal można ustawiać dodatni tabindex dla potomków elementu przepływu lektury.
Pamiętaj, że element z wartością display: contents, który dziedziczy właściwość reading-flow od swojego elementu nadrzędnego, będzie też prawidłowym kontenerem ścieżki czytania. Pamiętaj o tym podczas projektowania witryny. Więcej informacji na ten temat znajdziesz w naszej prośbie o opinię na temat reading-flow i display: contents.
Daj nam znać
Wypróbuj przykłady podane w tym poście i reading-flow na stronie chrome.dev oraz używaj tych właściwości CSS w swoich witrynach. Jeśli chcesz podzielić się opinią, prześlij ją jako problem w repozytorium GitHub grupy roboczej CSS. Jeśli masz opinię na temat zachowania indeksu kart i zakresu fokusa, prześlij ją jako problem do repozytorium HTML WHATNOT na GitHubie. Chętnie poznamy Twoją opinię na temat tej funkcji.