Digital Transformation
CSS reading-flow (Property)
TL;DR: CSS reading-flow adalah properti baru yang menentukan urutan elemen di dalam flex atau grid container diakses oleh keyboard tab dan screen reader. Properti ini menyelesaikan masalah aksesibilitas klasik di mana urutan DOM dan urutan visual sering bertentangan, dan stabil di Chrome 137 ke atas.
Apa itu CSS reading-flow?
CSS reading-flow adalah properti yang mengontrol urutan baca anak elemen dalam container fleksibel atau grid, sehingga sesuai dengan urutan visual yang dilihat pengguna. Sebelumnya, jika developer memakai order atau grid-area untuk menata visual, urutan tab keyboard tetap mengikuti DOM, dan pengguna keyboard atau screen reader akan kebingungan. Properti ini melengkapi pendekatan layout modern seperti CSS subgrid dan CSS container queries.
Analoginya seperti antrian kasir. Visual menampilkan urutan baru, namun reading-flow memastikan kasir memanggil pelanggan sesuai antrian yang terlihat, bukan urutan kedatangan asli. Ini krusial untuk pengguna yang mengandalkan navigasi sekuensial.
Nilai dan Sintaks Dasar
| Nilai | Perilaku | Use Case |
|---|---|---|
normal | Ikut urutan DOM | Default, kompatibel mundur |
flex-visual | Urutan visual flexbox | Card yang di-reorder dengan order |
flex-flow | Urutan flex-direction | Layout horizontal yang dibalik di mobile |
grid-rows | Baris demi baris grid | Form atau dashboard grid |
grid-columns | Kolom demi kolom grid | Layout multi-kolom artikel |
Sintaks dasar cukup: .container { display: flex; reading-flow: flex-visual; }. Per Mei 2026, properti ini hadir di Chrome 137 dan masih di belakang flag pada Firefox. Untuk fallback, sertakan tabindex manual di elemen kritis seperti CTA pada landing page.
Kenapa Penting?
Aksesibilitas adalah salah satu sinyal kepercayaan yang dinilai Google sebagai bagian dari E-E-A-T. Halaman dengan urutan tab yang kacau berisiko gagal audit WCAG dan menurunkan skor Core Web Vitals jika pengguna terjebak di area yang tidak dapat dinavigasi. Bagi marketer Indonesia yang membangun website bisnis di Next.js, mengadopsi reading-flow lebih awal mengurangi technical debt aksesibilitas yang sering ditemukan saat audit ke pasar Eropa atau pemerintah.
Pertanyaan Umum
Apakah reading-flow menggantikan tabindex?
Tidak sepenuhnya. Tabindex masih dipakai untuk kasus spesifik seperti modal atau widget custom. Reading-flow menangani layout container, sehingga keduanya saling melengkapi.
Apa risikonya jika tidak memakai reading-flow?
Pengguna keyboard, screen reader, dan switch device akan mengikuti urutan DOM, bukan urutan visual. Ini menurunkan completion rate form dan menggagalkan audit aksesibilitas WCAG 2.2 level AA.
Istilah Terkait