Yayınlanma tarihi: 1 Mayıs 2025
reading-flow ve reading-order CSS özellikleri Chrome 137'den itibaren kullanılabilir.
Bu yayında, bu özelliklerin tasarımının nedenleri ve özelliklerle ilgili kısa bilgiler açıklanmaktadır.
Izgara ve esnek gibi düzen yöntemleri, ön uç geliştirmeyi dönüştürdü ancak bu yöntemlerin esnekliği bazı kullanıcılar için sorunlara neden olabilir. Görsel sıranın DOM ağacındaki kaynak sırasıyla eşleşmediği bir durum oluşturmak çok kolaydır. Bu kaynak sırası, sitede klavye kullanarak gezindiğinizde tarayıcının izlediği sıradır. Bu nedenle, bazı kullanıcılar sayfada gezinirken beklenmedik atlamalarla karşılaşabilir.
Bu uzun süredir devam eden sorunu çözmek için reading-flow ve reading-order özellikleri tasarlanıp CSS Display spesifikasyonuna eklendi.
reading-flow
reading-flow CSS özelliği, esnek, ızgara veya blok düzenindeki öğelerin erişilebilirlik araçlarına sunulma sırasını ve doğrusal sıralı gezinme yöntemleri kullanılarak nasıl odaklandıklarını kontrol eder.
Varsayılan değeri normal olan tek bir anahtar kelime değeri alır. Bu değer, öğeleri DOM sırasına göre sıralama davranışını korur.
Bir esnek kapsayıcıda kullanmak için değerini flex-visual veya flex-flow olarak ayarlayın. Bir ızgara kapsayıcısında kullanmak için değerini grid-rows, grid-columns veya grid-order olarak ayarlayın.
reading-order
reading-order CSS özelliği, okuma akışı kapsayıcısındaki öğelerin sırasını manuel olarak geçersiz kılmanıza olanak tanır. Bu özelliği bir ızgara, esnek veya blok kapsayıcı içinde kullanmak için kapsayıcıdaki reading-flow değerini source-order olarak, tek tek öğelerin reading-order değerini ise bir tam sayı değeri olarak ayarlayın.
Flexbox örneği
Örneğin, ters satır sırasına göre üç öğe içeren bir esnek düzen kapsayıcınız olabilir ve bu sıralamayı yeniden düzenlemek için order özelliğini kullanmak isteyebilirsiniz.
<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;
}
Bir sonraki odaklanılabilir öğeyi bulmak için SEKME tuşunu, önceki odaklanılabilir öğeyi bulmak için SEKME+ÜST KARAKTER tuşlarını kullanarak bu öğeler arasında gezinmeyi deneyebilirsiniz. Bu, kaynak sırasındaki öğeleri (Bir, İki, Üç) takip eder.
Bu durum, son kullanıcı açısından mantıklı değildir ve çok kafa karıştırıcı olabilir. Sayfada gezinmek için erişilebilirlik amaçlı bir uzamsal gezinme aracı kullandığımızda da aynı durum söz konusudur.
Bu sorunu düzeltmek için reading-flow özelliğini ayarlayın:
.box {
reading-flow: flex-visual;
}
Odak sırası artık: Bir, Üç, İki. Bu, İngilizceyi soldan sağa okurken elde edeceğiniz görsel sırayla aynıdır.
Bunun yerine odak sırasını başlangıçtaki gibi, ters sırada tutmayı tercih ederseniz şunları ayarlayabilirsiniz:
.box {
reading-flow: flex-flow;
}
Odak sırası artık ters esnek sıra: İki, Üç, Bir. Her iki durumda da CSS order özelliği dikkate alınır.
Izgara düzeni içeren örnek
Bunun bir ızgarada nasıl çalıştığını görmek için CSS ile düzen oluşturduğunuzu ve odaklanılabilir on iki alan içeren ızgara otomatik yerleştirilmiş öğeler kullandığınızı düşünün.
<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>
Beşinci çocuğun en üstte en büyük alanı kaplamasını, ardından ikinci çocuğun ızgaranın ortasına yakın bir yerde yer almasını istiyorsunuz. Diğer tüm alt öğeler, sütun şablonu kullanılarak ızgaraya otomatik olarak yerleştirilebilir.
.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;
}
Bir sonraki odaklanılabilir öğeyi bulmak için TAB tuşunu, önceki odaklanılabilir öğeyi bulmak için TAB+ÜST KARAKTER tuşlarını kullanarak bu öğeler arasında gezinmeyi deneyin. Bu, kaynak sırasındaki öğeleri (Bir ila On İki) takip eder.
Bu sorunu düzeltmek için reading-flow özelliğini ayarlayın:
.wrapper {
reading-flow: grid-rows;
}
Odak sırası artık: Beş, Bir, Üç, İki, Dört, Altı, Yedi, Sekiz, Dokuz, On, On Bir, On İki. Görsel sırayı satır satır takip eder.
Okuma akışının bunun yerine sütun sırasını takip etmesini istiyorsanız grid-columns anahtar kelime değerini kullanabilirsiniz. Odaklanma sırası daha sonra Beş, Altı, Dokuz, Yedi, On, Bir, İki, On Bir, Üç, Dört, Sekiz, On İki olur.
.wrapper {
reading-flow: grid-columns;
}
grid-order aracını da kullanmayı deneyebilirsiniz. Odak sırası, Bir'den On İki'ye kadar aynı kalır.
Bunun nedeni, hiçbir öğede CSS siparişi ayarlanmamış olmasıdır.
reading-order kullanılarak oluşturulan bir blok kapsayıcı
reading-order özelliği, okuma akışında bir öğenin ne zaman ziyaret edilmesi gerektiğini belirtmenize olanak tanır ve reading-flow özelliğiyle belirlenen sırayı geçersiz kılar. Yalnızca reading-flow özelliği normal olmadığında geçerli bir okuma akışı kapsayıcısında etkili olur.
.wrapper {
display: block;
reading-flow: source-order;
}
.top {
reading-order: -1;
inset-inline-start: 50px;
inset-block-start: 50px;
}
Aşağıdaki blok kapsayıcı beş öğe içeriyor. Öğeleri kaynak sırasına göre yeniden sıralayan düzen kuralları yok ancak önce ziyaret edilmesi gereken bir akış dışı öğe var.
<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>
Bu öğenin reading-order özelliğini -1 olarak ayarladığınızda odak sırası, okuma akışındaki diğer öğeler için kaynak sırasına geri dönmeden önce bu öğeyi ziyaret eder.
Daha fazla örneği chrome.dev sitesinde bulabilirsiniz.
tabindex ile etkileşim
Geçmişte geliştiriciler, HTML öğelerini odaklanılabilir hale getirmek ve sıralı odaklanma gezinmesi için göreli sıralamayı belirlemek üzere HTML tabindex genel özelliğini kullanıyordu. Ancak bu özelliğin birçok dezavantajı ve erişilebilirlik sorunları vardır. Buradaki temel sorun, pozitif tabindex kullanılarak oluşturulan tabindex sıralı odak gezinmenin erişilebilirlik ağacı tarafından tanınmamasıdır. Yanlış kullanıldığında, ekran okuyucudaki deneyimle eşleşmeyen, atlamalı bir odak sırası elde edebilirsiniz. Bunu düzeltmek için aria-owns HTML özelliğini kullanarak sıralamayı izleyin.
Önceki esnek örnekte, reading-flow: flex-visual kullanmayla aynı sonucu elde etmek için aşağıdakileri yapabilirsiniz.
<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>
Ancak kapsayıcının dışındaki başka bir öğede de tabindex=1 varsa ne olur?
Ardından, bir sonraki artımlı tabindex değerine geçmeden önce tabindex=1 içeren tüm öğeler birlikte ziyaret edilir. Bu şekildeki atlamalı sıralı gezinme, kötü bir kullanıcı deneyimine yol açar. Bu nedenle, erişilebilirlik uzmanları pozitif tabindex değerinden kaçınılmasını önerir. reading-flow tasarlanırken bu sorun düzeltilmeye çalışıldı.
reading-flow özelliği ayarlanmış bir kapsayıcı, odak kapsamı sahibi olur.
Bu, sıralı odak gezinmesinin kapsamını, bir web belgesindeki sonraki odaklanılabilir öğeye geçmeden önce kapsayıcının içindeki her öğeyi ziyaret edecek şekilde belirlediği anlamına gelir. Ayrıca, doğrudan alt öğeleri reading-flow özelliği kullanılarak sıralanır ve sıralama amacıyla pozitif tabindex değerleri yoksayılır. Okuma akışı öğesinin alt öğelerinde pozitif bir tabindex ayarlamak mümkündür.
display: contents özelliğine sahip ve reading-flow özelliğini düzen üst öğesinden devralan bir öğenin de geçerli bir okuma akışı kapsayıcısı olacağını unutmayın. Sitenizi tasarlarken bunu göz önünde bulundurun. Bu konu hakkında daha fazla bilgiyi reading-flow ve display: contents ile ilgili geri bildirim isteğimizde bulabilirsiniz.
Lütfen bize bildirin
Bu yayındaki ve reading-flow chrome.dev'deki örnekleri deneyin ve bu CSS özelliklerini sitelerinizde kullanın. Geri bildiriminiz varsa CSS Çalışma Grubu GitHub deposunda sorun olarak bildirin. Tabindex ve odak kapsamı davranışı ile ilgili geri bildiriminiz varsa bunu HTML WHATNOT GitHub deposunda sorun olarak bildirin. Bu özellik hakkındaki geri bildirimlerinizi öğrenmek isteriz.