Digital Transformation
Reading Flow (CSS reading-flow)
TL;DR: reading-flow adalah properti CSS yang membuat urutan navigasi keyboard dan pembaca layar mengikuti urutan visual elemen, bukan urutan di kode HTML. Ini penting saat layout flex atau grid mengubah posisi tampil elemen sehingga berbeda dari urutan sumbernya. Per 2026, dukungan browser masih berkembang, jadi perlakukan sebagai peningkatan progresif.
Apa itu Reading Flow?
reading-flow adalah properti CSS yang menyelesaikan masalah lama: ketika urutan visual elemen berbeda dari urutan di HTML. Pada layout CSS Grid dan flexbox, properti seperti order bisa memindahkan posisi tampil sebuah elemen, tapi urutan fokus keyboard tetap mengikuti kode sumber. Akibatnya, pengguna keyboard bisa melompat ke tempat yang tidak terduga.
Analogi sederhana: bayangkan buku yang halamannya dijilid berurutan, tapi nomor halamannya dicetak acak. Mata pembaca mengikuti nomor, sementara jari mengikuti jilidan. reading-flow menyelaraskan keduanya sehingga navigasi mengikuti apa yang terlihat.
Cara Kerja dan Nilainya
| Nilai | Fungsi |
|---|---|
| normal | Urutan default mengikuti sumber HTML |
| flex-visual | Mengikuti urutan visual pada container flex |
| flex-flow | Mengikuti arah flex-flow |
| grid-rows | Mengikuti urutan baris grid secara visual |
| grid-columns | Mengikuti urutan kolom grid secara visual |
Properti ini bekerja pada container, bukan item, dan hanya relevan saat urutan visual sudah diubah dari urutan sumber. Untuk detail spesifikasi, dokumentasi MDN soal reading-flow jadi rujukan teknis utama.
Kenapa Penting?
Bagi pebisnis dan marketer di Indonesia yang membangun landing page dengan layout modern, reading-flow menyentuh dua hal sekaligus: aksesibilitas dan pengalaman pengguna. Layout yang indah secara visual bisa diam diam menyulitkan pengguna keyboard atau pembaca layar jika urutan fokusnya kacau.
Menyelaraskan urutan fokus dengan urutan visual mendukung kepatuhan aksesibilitas WCAG dan memperbaiki pengalaman semua pengguna. Penting dicatat, properti ini sebaiknya jadi pelengkap struktur HTML semantik yang sudah benar, bukan penambal layout yang sejak awal bermasalah.
Pertanyaan Umum
Apakah reading-flow menggantikan urutan HTML yang benar?
Tidak. Praktik terbaik tetap menulis HTML dalam urutan logis. reading-flow membantu kasus di mana layout visual memang harus berbeda dari urutan sumber, bukan jadi alasan mengabaikan struktur.
Apakah reading-flow sudah didukung semua browser?
Per 2026 dukungannya masih berkembang dan belum merata. Perlakukan sebagai peningkatan progresif, dengan urutan HTML yang tetap masuk akal sebagai fondasi.
Istilah Terkait