Öğelerin, dokümanın kaynağıyla bağlantısı olmayan bir sıraya göre düzenlenmesi sorunuyla ilgili olarak önerilen bir çözüm için geri bildiriminiz isteniyor.
CSS Çalışma Grubu, bir düzen yönteminin öğeleri kaynaktan ve dolayısıyla da dokümanın okuma ve odaklanma sırasından ayrı bir sırada düzenleyebileceği duruma bir çözüm üzerinde çalışıyor. Bu makalede, sorun ve önerilen çözüm açıklanmaktadır. Geri bildiriminizi öğrenmekten memnuniyet duyarız.
Sorun
HTML dokümanlarının okuma sırası, kaynak sırasını takip eder. Yani ekran okuyucu, dokümanı kaynakta verildiği şekilde okuyacaktır. Klavyeyi kullanarak dokümanı çevreleyen bir kişi de bu kaynak sırasını takip edecektir. Bu genellikle mantıklıdır. Ayrıca, içerikte, ekran okuyucularda ve sınırlı CSS'ye sahip tüm cihazlarda okuma moduyla ilgili sunumlar için doküman için makul bir kaynak sırası büyük önem taşır. Ancak CSS ve özellikle flexbox ve ızgara, düzenin temel kaynaktan farklı bir görsel okuma sırası tanımladığı düzenler oluşturabilir.
Örneğin, esnek öğelerde order özelliğinin kullanılması, düzen sırasını değiştirir ancak kaynaktaki sırayı değiştirmez.
Izgara düzeni kullanıldığında, seçilen düzen yönteminin sekme sırasını karıştırması mümkündür. Örneğin, grid-auto-flow: dense kullanıldığında öğeler için rastgele bir düzen düzeni oluşturulur.
Geliştiriciler, öğeleri kaynakta belirtilenden farklı bir sırada olacak şekilde tabloya yerleştirerek bu soruna yol açabilir.
Önerilen çözüm
CSS Çalışma Grubu bu sorun için bir çözüm öneriyor ve geliştiricilerden ve erişilebilirlik topluluğunun bu yaklaşımla ilgili geri bildirimlerini almaktan memnuniyet duyuyor.
reading-order: auto ile rastgele düzenler takip ediliyor
Izgara düzeninde yoğun paketleme kullanma gibi rastgele düzen sırası oluşturan durumlarda, muhtemelen tarayıcının kaynak sırası yerine düzeni izlemesini istersiniz. Bunun gerçekleşmesi için esnek veya ızgara öğelerinin, auto değerine sahip bir reading-order özelliğinin olması gerekir.
Aşağıdaki CSS, okuma sırasının grid-auto-flow: dense nedeniyle yoğun şekilde paketlenmiş öğelerin yerleşimini takip etmesine neden olur.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
reading-order-items ile rastgele olmayan düzenler takip ediliyor
Bazı ızgara ve esnek düzenlerde düzenin anlaşılması kolay olur. Örneğin, öğeleri yeniden sıralamak için order özelliğini kullanan esnek bir düzende, order özelliği tarafından dikte edilen bariz bir düzen sırası vardır. Diğer düzenlerde ideal düzen sırasının ne olduğu o kadar net değildir ve birden fazla olası seçenek olabilir. Bu nedenle, rastgele olmayan düzenleri izlerken, düzen siparişi amacınızı açıklayan anahtar kelime değerleriyle birlikte grid-order-items özelliğini kapsayıcıya eklemeniz gerekir.
Aşağıdaki örnekte, row-reverse kullanan esnek düzen gösterilmektedir. Esnek öğelerde reading-order: auto ve esnek kapsayıcı reading-order-items: flex flow bulunur. Bu kapsayıcı, okuma sırasının görsel bir sıra izlemek yerine (flex visual ile belirtebiliriz) flex-flow yönünü de izlemesini istediğimizi belirtir.
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
Sıradaki örnekte, grid-template-areas kullanılarak bir ızgara düzeni oluşturulur ve öğeler kaynak sıradan farklı bir düzene yerleştirilir. reading-order-items özelliği, bir sonrakine geçmeden önce her satırdan geçerek düzen sırasını izlememiz gerektiğini belirtmek için kullanılır. (grid column, ters yönü belirtir).
.wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"a a b b b b"
"c c d d e e"
"f f g g h h";
reading-order-items: grid rows;
}
.a {
grid-area: a;
reading-order: auto;
}
Bu, kaynak sırasının önemli olmadığı anlamına mı geliyor?
Hayır, kaynak sırası önemli olmaya devam eder. Bu işlev yalnızca okuma sırasının kaynaktan farklı olabileceği belirli durumlarda kullanılmalıdır. Bu soruna yol açabilecek düzen yöntemleri (ör. yoğun ızgara paketleme) veya belirli bir ayrılma noktasında farklı bir düzen sırası anlamlı olduğunda bu durumlara örnek olarak verilebilir.
Bu özellikleri kullanırken sayfanın CSS olmadan oluşturulması mantıklı olacak bir sipariş kullanarak kaynak doküman oluşturun. Bu özellikleri yalnızca bunları gerektiren yerlere ve ayrılma noktalarına ekleyin.
Yazma araçları bu özellikleri uygulamalı mıdır?
Kullanıcıların öğeleri sürükleyip bırakarak ızgara düzeni oluşturmasına olanak tanıyan yazma araçları, kullanıcıları yine de mantıklı bir kaynak doküman oluşturmaya teşvik etmelidir. Bu nedenle, çoğu durumda bu özellikleri bağlantı kesintisi sorununu çözmenin geç bir yolu olarak kullanmak yerine, kaynağı düzen sırasına göre yeniden sıralamak daha uygun olur.
Lütfen bu teklifle ilgili geri bildiriminizi paylaşın
Bu konuda geri bildirim toplamaya çok önem veriyoruz. Özellikle, bunun çözülmeyeceğini düşündüğünüz bir kullanım alanınız varsa veya yaklaşımla ilgili erişilebilirlikle ilgili bir endişeniz varsa lütfen CSS Çalışma Grubu'na bildirin.
Devam eden bir ileti dizisi mevcuttur. Bu iletide, birçok kullanım alanı ve yaklaşımla ilgili görüşler yer alır. Bu ileti dizisi, yorum eklemek ve bu teklifle ilgili olası sorunları vurgulamak için mükemmel bir yerdir. Geçerli teklifin, ileti dizisini başlatan ilk teklifimden çok farklı olduğunu unutmayın. İlgilenen kişiler, bugünkü konumumuza giden tüm konuşmalardan keyif alabilir. Bu, önerilerin tarayıcılarda uygulanabilecek bir şey haline gelmesi için CSS Çalışma Grubu'nda nasıl çalıştığına iyi bir örnektir.
Patrick Tomasso'ya ait küçük resim. Geri bildirim ve yorumlar için Chris Harrelson, Tab Atkins ve Ian Kilpatrick'e teşekkür ederiz.