Yayınlanma tarihi: 1 Mayıs 2025
CSS reading-flow ve reading-order özellikleri Chrome 137'den itibaren kullanılabilir.
Bu gönderide, bu mülklerin tasarımının arkasındaki nedenler ve bu mülkleri kullanmaya başlamanıza yardımcı olacak bazı kısa bilgiler açıklanmaktadır.
Grid ve flex gibi düzen yöntemleri, kullanıcı arayüzü geliştirmeyi dönüştürdü ancak esneklikleri bazı kullanıcılar için soruna neden olabilir. Görsel düzenin DOM ağacındaki kaynak düzenle eşleşmediği bir durum oluşturmak çok kolaydır. Sitede klavye kullanarak gezinirseniz tarayıcı bu kaynak sırasını uygular. Bu nedenle, bazı kullanıcılar bir sayfa içinde gezinirken beklenmedik şekilde sayfanın farklı bölümlerine atlayabilir.
reading-flow ve reading-order özellikleri, bu uzun süredir devam eden sorunu çözmek için tasarlanıp CSS Görüntüleme spesifikasyonuna eklendi.
reading-flow
reading-flow CSS mülkü, bir esnek, ızgara veya blok düzenindeki öğelerin erişilebilirlik araçlarına gösterilme sırasını ve doğrusal sıralı gezinme yöntemleri kullanılarak nasıl odaklanacağını kontrol eder.
Bir anahtar kelime değeri alır. Varsayılan değer normal'tür ve öğeleri DOM sırasına göre sıralama davranışını korur.
Bir esnek kapsayıcı içinde 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 mülkü, bir 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 bir öğenin reading-order değerini ise bir tam sayı olarak ayarlayın.
Flexbox örneği
Örneğin, ters satır sırasına sahip üç öğe içeren bir flex düzen kapsayıcınız olabilir ve bu sıralamayı yeniden karıştırmak için sipariş ö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, öğeleri kaynak sırada sıralar: Bir, İki, Üç.
Son kullanıcı açısından bu durum anlamlı değildir ve çok kafa karıştırıcı olabilir. Sayfada gezinmek için erişilebilirlik uzamsal gezinme aracı kullanırsak da aynı şey olur.
Bu sorunu düzeltmek için reading-flow mülkünü ayarlayın:
.box {
reading-flow: flex-visual;
}
Odak sırası şu şekilde değişti: Bir, Üç, İki. Bu, İngilizceyi soldan sağa doğru okurken göreceğiniz görsel sırayla aynıdır.
Bunun yerine, odak sırasını orijinal amacına uygun şekilde, ters sırada tutmak isterseniz şunları ayarlayabilirsiniz:
.box {
reading-flow: flex-flow;
}
Odak sırası artık ters esnek sıradır: İki, Üç, Bir. Her iki durumda da CSS order mülkü hesaba katılır.
Izgara düzeni içeren örnek
Bu özelliğin bir ızgaradaki işleyişini görmek için on iki odaklanılabilir alana sahip CSS ızgara otomatik yerleştirilmiş öğelerle bir düzen oluşturduğunuzu hayal edin.
<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 üstteki en büyük alanı, ikinci çocuğun da ızgaranın ortasına doğru bir alanı almasını istiyorsunuz. Diğer tüm alt öğeler, sütun şablonuna göre ı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;
}
Odaklanabilir bir sonraki öğeyi bulmak için Sekme tuşunu, odaklanılabilir önceki öğeyi bulmak için Sekme+Üst Karakter tuşlarını kullanarak bu öğeler arasında gezinmeyi deneyin. Bu, öğeleri kaynak sırasına göre (Bir ile On İki arasında) sıralar.
Bu sorunu düzeltmek için reading-flow mülkünü ayarlayın:
.wrapper {
reading-flow: grid-rows;
}
Odak sırası şu şekildedir: Beş, Bir, Üç, İki, Dört, Altı, Yedi, Sekiz, Dokuz, On, On Bir, On İki. Görsel sıraya göre satır satır ilerler.
Bunun yerine okuma akışının sütun sırasını takip etmesini istiyorsanız grid-columns anahtar kelime değerini kullanabilirsiniz. Odak sırası da Beş, Altı, Dokuz, Yedi, On, Bir, İki, On Bir, Üç, Dört, Sekiz, On İki olur.
.wrapper {
reading-flow: grid-columns;
}
grid-order'ü kullanmayı da deneyebilirsiniz. Odak sırası Bir ile On İki arasında kalır.
Bunun nedeni, herhangi bir öğede CSS siparişi ayarlanmamış olmasıdır.
reading-order kullanan bir blok kapsayıcı
reading-order mülkü, reading-flow mülkü tarafından belirlenen sırayı geçersiz kılarak bir öğenin okuma akışında ne zaman ziyaret edilmesi gerektiğini belirtmenize olanak tanır. Yalnızca reading-flow mülkü normal olmadığında geçerli bir okuma akışı kapsayıcısında geçerli 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ısı beş öğe içerir. Öğeleri kaynak sırasına göre yeniden düzenleyen düzen kuralları yoktur ancak önce ziyaret edilmesi gereken bir akış dışı öğe vardır.
<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 değerini -1 olarak ayarlayarak, odaklanma sırası okuma akışı öğelerinin geri kalanı için kaynak sırasına dönmeden önce öğeyi önce ziyaret eder.
Daha fazla örnek için chrome.dev sitesine göz atın.
Sekme dizini ile etkileşim
Geliştiriciler, geçmişte HTML öğelerini odaklanılabilir hale getirmek ve sıralı odak gezinme için göreli sıralamayı belirlemek amacıyla HTML tabindex genel özelliğini kullanıyordu. Ancak bu özelliğin birçok dezavantajı ve erişilebilirlik sorunu vardır. Temel sorun, pozitif tabindex kullanılarak oluşturulan tabindex sıralı odak gezinmesinin erişilebilirlik ağacı tarafından tanınmaması. Yanlış kullanıldığında, ekran okuyucudaki deneyimle eşleşmeyen, sıçrayan bir odak sırası elde edebilirsiniz. Bu sorunu düzeltmek için aria-owns HTML özelliğini kullanarak sıralamayı izleyin.
Önceki esnek örnekte, reading-flow: flex-visual kullanırken elde ettiğiniz 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ı 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 sıçrayan sıralı gezinme, kötü bir kullanıcı deneyimine neden olur. Bu nedenle, erişilebilirlik uzmanları pozitif sekme dizini kullanmaktan kaçınmayı önerir. reading-flow'ü tasarlarken bu sorunu düzeltmeye çalıştık.
reading-flow mülkü ayarlanmış bir kapsayıcı, odak kapsamı sahibi olur.
Yani, sıralı odak gezinmesini, web belgesindeki bir sonraki odaklanabilir öğeye geçmeden önce kapsayıcı içindeki her öğeyi ziyaret edecek şekilde kapsamlandırır. Ayrıca, doğrudan alt öğeleri reading-flow mülkü kullanılarak sıralanır ve pozitif sekme dizini, sıralama amacıyla yoksayılır. Okuma akışı öğesinin alt öğelerinde pozitif bir sekme dizini ayarlamak yine de mümkündür.
display: contents içeren ve reading-flow mülkünü 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 örneklerindeki örnekleri deneyin ve bu CSS özelliklerini sitelerinizde kullanın. Geri bildiriminiz varsa CSS Çalışma Grubu GitHub deposunda sorun olarak bildirin. Özellikle sekme sırası ve odak kapsama davranışıyla ilgili geri bildiriminiz varsa HTML WHATNOT GitHub reposunda sorun olarak bildirin. Bu özellik hakkındaki geri bildirimlerinizi öğrenmekten memnuniyet duyarız.