Dipublikasikan: 1 Mei 2025
Properti CSS reading-flow dan reading-order tersedia mulai Chrome 137.
Postingan ini menjelaskan alasan di balik desain properti ini dan beberapa detail singkat untuk membantu Anda mulai menggunakannya.
Metode tata letak seperti petak dan flex telah mengubah pengembangan frontend, tetapi fleksibilitasnya dapat menyebabkan masalah bagi sebagian pengguna. Sangat mudah untuk membuat situasi di mana urutan visual tidak cocok dengan urutan sumber di hierarki DOM. Karena urutan sumber ini adalah yang diikuti browser jika Anda menjelajahi situs menggunakan keyboard, beberapa pengguna dapat mengalami lompatan yang tidak terduga saat mereka menjelajahi halaman.
Properti reading-flow dan reading-order telah didesain dan ditambahkan ke
spesifikasi CSS Display, untuk mencoba dan
menyelesaikan masalah yang sudah lama terjadi ini.
reading-flow
Properti CSS reading-flow mengontrol urutan elemen dalam tata letak fleksibel, petak, atau blok yang diekspos ke alat aksesibilitas dan cara elemen tersebut difokuskan menggunakan metode navigasi berurutan linear.
Fungsi ini memerlukan satu nilai kata kunci, dengan
default normal, yang mempertahankan perilaku pengurutan elemen dalam urutan DOM.
Untuk menggunakannya di dalam penampung fleksibel, tetapkan nilainya ke flex-visual atau
flex-flow. Untuk menggunakannya di dalam penampung petak, tetapkan nilainya ke
grid-rows, grid-columns, atau grid-order.
reading-order
Properti CSS reading-order memungkinkan Anda mengganti urutan item secara manual dalam penampung alur baca. Untuk menggunakan properti ini di dalam petak, flex,
atau penampung blok, tetapkan nilai reading-flow pada penampung ke
source-order dan tetapkan reading-order item individual ke nilai bilangan bulat.
Contoh di flexbox
Misalnya, Anda mungkin memiliki penampung tata letak fleksibel dengan tiga elemen dalam urutan baris terbalik, dan juga ingin menggunakan properti urutan untuk mengacak urutan tersebut.
<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;
}
Anda dapat mencoba menavigasi elemen ini menggunakan tombol TAB untuk menemukan elemen berikutnya yang dapat difokuskan dan tombol TAB+SHIFT untuk menemukan elemen sebelumnya yang dapat difokuskan. Ini mengikuti item dalam urutan sumber: Satu, Dua, Tiga.
Dari perspektif pengguna akhir, hal ini tidak masuk akal dan dapat sangat membingungkan. Hal yang sama terjadi jika kita menggunakan alat navigasi spasial aksesibilitas untuk menjelajahi halaman.
Untuk memperbaikinya, tetapkan properti reading-flow:
.box {
reading-flow: flex-visual;
}
Urutan fokusnya sekarang adalah: Satu, Tiga, Dua. Hal ini sama dengan urutan visual yang akan Anda dapatkan jika membaca dalam bahasa Inggris dari kiri ke kanan.
Jika Anda lebih memilih untuk mempertahankan urutan fokus seperti yang dimaksudkan semula, dalam urutan terbalik, Anda dapat menetapkan:
.box {
reading-flow: flex-flow;
}
Urutan fokus kini adalah urutan flex terbalik: Dua, Tiga, Satu. Dalam
kedua kasus tersebut, properti CSS order diperhitungkan.
Contoh dengan tata letak petak
Untuk melihat cara kerjanya dalam petak, bayangkan Anda membuat tata letak dengan item yang ditempatkan otomatis CSS grid dengan dua belas area yang dapat difokuskan.
<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>
Anda ingin turunan kelima menempati ruang terbesar di bagian paling atas, diikuti oleh turunan kedua di bagian tengah petak. Semua turunan lainnya dapat ditempatkan secara otomatis dalam petak mengikuti template kolom.
.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;
}
Coba jelajahi elemen ini menggunakan tombol TAB untuk menemukan elemen berikutnya yang dapat difokuskan dan tombol TAB+SHIFT untuk menemukan elemen sebelumnya yang dapat difokuskan. Ini mengikuti item dalam urutan sumber: Satu hingga Dua Belas.
Untuk memperbaikinya, tetapkan properti reading-flow:
.wrapper {
reading-flow: grid-rows;
}
Urutan fokus sekarang adalah: Lima, Satu, Tiga, Dua, Empat, Enam, Tujuh, Delapan, Sembilan, Sepuluh, Sebelas, Dua Belas. Urutannya mengikuti urutan visual, baris demi baris.
Jika Anda ingin alur pembacaan mengikuti urutan kolom, Anda dapat menggunakan nilai kata kunci grid-columns. Urutan fokus kemudian menjadi Lima,
Enam, Sembilan, Tujuh, Sepuluh, Satu, Dua, Sebelas, Tiga, Empat, Delapan, Dua Belas.
.wrapper {
reading-flow: grid-columns;
}
Anda juga dapat mencoba menggunakan grid-order. Urutan fokus tetap dari Satu hingga Dua Belas.
Hal ini karena tidak ada pesanan CSS yang ditetapkan pada item mana pun.
Container blok menggunakan reading-order
Properti reading-order memungkinkan Anda menentukan kapan suatu item harus dikunjungi dalam alur baca, menggantikan urutan yang ditetapkan oleh properti reading-flow. Hanya
berlaku pada penampung alur baca yang valid, saat properti reading-flow
bukan normal.
.wrapper {
display: block;
reading-flow: source-order;
}
.top {
reading-order: -1;
inset-inline-start: 50px;
inset-block-start: 50px;
}
Penampung blok berikut berisi lima item. Tidak ada aturan tata letak yang mengurutkan ulang elemen dari urutan sumbernya, tetapi ada satu item di luar alur yang harus dikunjungi terlebih dahulu.
<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>
Dengan menyetel reading-order item ini ke -1, urutan fokus akan mengunjunginya terlebih dahulu
sebelum kembali ke urutan sumber untuk item alur baca lainnya.
Anda dapat menemukan contoh lainnya di situs chrome.dev.
Interaksi dengan tabindex
Sebelumnya, developer telah menggunakan atribut global tabindex HTML untuk membuat elemen HTML dapat difokuskan dan menentukan pengurutan relatif untuk navigasi fokus berurutan. Namun, atribut ini memiliki banyak kekurangan dan masalah aksesibilitas. Masalah utamanya adalah navigasi fokus yang diurutkan berdasarkan tabindex yang dibuat
dengan menggunakan tabindex positif tidak dikenali oleh hierarki aksesibilitas. Jika
digunakan secara tidak benar, Anda mungkin akan mendapatkan urutan fokus yang melompat-lompat dan tidak sesuai dengan
pengalaman di pembaca layar. Untuk memperbaikinya, lacak pengurutan menggunakan
atribut HTML aria-owns.
Dalam contoh flex sebelumnya, untuk mendapatkan hasil yang sama seperti menggunakan
reading-flow: flex-visual, Anda dapat melakukan hal berikut.
<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>
Namun, apa yang terjadi jika elemen lain di luar penampung juga memiliki tabindex=1?
Kemudian, semua elemen dengan tabindex=1 akan dikunjungi bersama-sama, sebelum kita beralih ke nilai tabindex inkremental berikutnya. Navigasi berurutan yang melompat-lompat ini akan menghasilkan pengalaman pengguna yang buruk. Oleh karena itu, pakar aksesibilitas merekomendasikan untuk menghindari
tabindex positif. Kami
mencoba memperbaiki hal ini saat mendesain reading-flow.
Penampung yang memiliki properti reading-flow yang ditetapkan akan menjadi pemilik cakupan fokus.
Artinya, navigasi fokus berurutan mencakup untuk mengunjungi setiap elemen
di dalam penampung sebelum berpindah ke elemen yang dapat difokuskan berikutnya dalam
dokumen web. Selain itu, turunan langsungnya diurutkan menggunakan properti alur baca dan tabindex positif diabaikan untuk tujuan pengurutan. Anda tetap dapat menetapkan tabindex positif pada turunan item alur baca.
Perhatikan bahwa elemen dengan display: contents yang mewarisi properti reading-flow
dari induk tata letaknya juga akan menjadi penampung alur baca yang valid. Perhatikan hal ini saat mendesain situs Anda. Baca selengkapnya tentang hal ini dalam
permintaan masukan kami tentang reading-flow dan display: contents.
Beri tahu kami
Coba contoh dalam postingan ini dan contoh
reading-flow di chrome.dev, lalu gunakan properti CSS ini di situs Anda. Jika ada masukan, ajukan sebagai masalah di
repositori GitHub CSS Working Group. Jika Anda memiliki masukan khusus tentang perilaku penetapan indeks tab dan cakupan fokus, ajukan sebagai masalah di repo HTML WHATNOT GitHub. Kami ingin mendengar masukan Anda tentang fitur ini.