Chrome 137 memperkenalkan CSS `reading-flow`: navigasi keyboard yang mengikuti urutan visual

• Mulai Chrome 137, properti CSS reading-flow dan reading-order yang baru diperkenalkan menyelesaikan masalah ketidaksesuaian antara tata letak visual dan urutan fokus keyboard
• Pada layout flex/grid yang ada saat ini, urutan DOM dan urutan visual bisa berbeda, sehingga menyebabkan kebingungan bagi pengguna saat memakai alat aksesibilitas atau navigasi keyboard
• reading-flow mengontrol perpindahan fokus berdasarkan urutan tata letak visual, dan reading-order memungkinkan penetapan urutan manual untuk tiap item
• Lebih intuitif dan lebih baik untuk aksesibilitas dibanding pendekatan tabindex yang ada, serta membatasi navigasi di dalam layout ke scope lokal
• Beragam contoh dan praktik tersedia di chrome.dev

---

Apa itu reading-flow?

• Menentukan urutan elemen menerima fokus sesuai urutan navigasi di dalam layout
• Nilai default: normal → tetap mengikuti urutan DOM yang ada
• Contoh penggunaan:
  • Flex: flex-visual, flex-flow
  • Grid: grid-rows, grid-columns, grid-order

  .box {  
    reading-flow: flex-visual;  
  }  
  

• Memungkinkan perpindahan fokus berdasarkan posisi visual, bukan urutan DOM

reading-order: menetapkan urutan manual

• Saat reading-flow: source-order diatur, setiap item bisa diberi nomor urutan

  .wrapper {  
    reading-flow: source-order;  
  }  
  .top {  
    reading-order: -1;  
  }  
  

• Berdasarkan nilai urutan yang ditetapkan, prioritas urutan navigasi bisa disesuaikan

Perbandingan dengan pendekatan tabindex yang ada

• tabindex berisiko menimbulkan masalah ketidaksesuaian dengan alat aksesibilitas
• Bisa muncul masalah lompatan fokus karena nilai yang duplikat atau antar elemen eksternal
• reading-flow mendefinisikan scope fokus sehingga membatasi navigasi internal dan memperjelas navigasi dua arah
• tabindex positif akan diabaikan, tetapi elemen internal tetap bisa diberi tabindex secara individual

Ringkasan

• reading-flow adalah pendekatan terbaru untuk menentukan urutan fokus yang berpusat pada layout
• Menyelaraskan urutan visual dan navigasi keyboard untuk meningkatkan aksesibilitas dan mencegah kebingungan pengguna
• Dalam penerapan praktis, ini memberikan pengalaman yang lebih dapat diprediksi dan konsisten dibanding tabindex yang ada