Chrome 137 ile CSS `reading-flow` geliyor: Görsel sırayı izleyen klavye gezinmesi

• Chrome 137 ile birlikte kullanıma sunulan yeni CSS reading-flow ve reading-order özellikleri, görsel düzen ile klavye odak sırasının uyuşmaması sorununu çözüyor
• Mevcut flex/grid düzenlerinde DOM sırası ile görsel sıra farklılaşabildiği için, erişilebilirlik araçlarında veya klavye ile gezinmede kullanıcı kafa karışıklığı oluşabiliyor
• reading-flow, odak hareketini görsel yerleşim sırasına göre kontrol ederken reading-order, öğe bazında manuel sıra tanımlamaya imkân veriyor
• Mevcut tabindex yaklaşımına göre daha sezgisel ve erişilebilirlik açısından daha avantajlı; düzen içindeki gezinmeyi yerel olarak kapsam içine alıyor
• Çeşitli örnekler ve uygulamalı demolar chrome.dev üzerinden sunuluyor

---

reading-flow nedir?

• Bir düzende öğelerin gezinme sırasına göre hangi sırayla odak alacağını belirler
• Varsayılan değer: normal → mevcut DOM sırası olduğu gibi korunur
• Kullanım örnekleri:
  • Flex: flex-visual, flex-flow
  • Grid: grid-rows, grid-columns, grid-order

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

• Odak hareketi, DOM sırası yerine görsel konuma göre ilerleyebilir

reading-order: manuel sıra belirleme

• reading-flow: source-order ayarlandığında her öğeye sayısal bir sıra değeri verilebilir

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

• Verilen sıra değerlerine göre gezinme sırası önceliği ayarlanabilir

Mevcut tabindex yaklaşımıyla karşılaştırma

• tabindex, erişilebilirlik araçlarıyla uyumsuzluk sorunu yaratma riski taşır
• Aynı değerlerin tekrarlanması veya dış öğeler arasında odak sıçraması sorunları yaşanabilir
• reading-flow, odak kapsamını tanımlayarak iç gezinmeyi sınırlar ve iki yönlü gezinmeyi netleştirir
• Pozitif tabindex değerleri yok sayılır; iç öğelerde yine ayrı ayrı tabindex tanımlanabilir

Özet

• reading-flow, düzen odaklı odak sırası tanımı için modern bir yaklaşımdır
• Görsel düzen ile klavye gezinmesini eşleştirerek erişilebilirliği artırır ve kullanıcı kafa karışıklığını önler
• Uygulamada, mevcut tabindex yaklaşımına kıyasla daha öngörülebilir ve tutarlı bir deneyim sunar