Düzen yöntemlerinin öğeleri dokümanın kaynağıyla bağlantısı olmayan bir sırada düzenlemesi sorununa yönelik önerilen çözümle ilgili geri bildirimlerinizi bekliyoruz.
CSS Çalışma Grubu, bir düzen yönteminin öğeleri kaynaktan ve dolayısıyla dokümanın okuma ve odaklanma sırasından bağımsız bir sırada düzenleyebildiği durum için bir çözüm üzerinde çalışıyor. Bu makalede sorun ve önerilen çözüm açıklanmaktadır. Geri bildiriminizi bekliyoruz.
Sorun
Bir HTML dokümanının okuma sırası, kaynak sırasını takip eder. Bu durumda, ekran okuyucu belgeyi kaynakta düzenlendiği şekilde okur ve klavyeyi kullanarak belgede sekmelerle gezen bir kişi de bu kaynak sırasını takip eder. Bu genellikle mantıklıdır ve belgenin mantıklı bir kaynak sırası, içeriklerin okuma modu sunumları, ekran okuyucular ve sınırlı CSS'ye sahip tüm cihazlar için hayati önem taşır. Ancak CSS ve özellikle flexbox ve grid, düzenin temel kaynaktan farklı bir görsel okuma sırası tanımladığı düzenler oluşturabilir.
Örneğin, flex öğelerde order özelliğini kullanmak düzen sırasını değiştirir ancak kaynakta sırayı değiştirmez.
Izgara düzeni kullanılırken, seçilen düzen yönteminin sekme sırasını karıştırması mümkündür. Örneğin, öğelerin rastgele bir düzen sırasını oluşturan grid-auto-flow: dense kullanılırken bu durum yaşanabilir.
Geliştirici, öğeleri kaynakta belirtilenden farklı bir sırayla ızgaraya yerleştirerek de bu bağlantı kesilmesine neden olabilir.
Önerilen çözüm
CSS Çalışma Grubu bu sorun için bir çözüm öneriyor ve geliştiricilerden ve erişilebilirlik topluluğundan bu yaklaşımla ilgili geri bildirim almak istiyor.
reading-order: auto ile rastgele düzenleri takip etme
Izgara düzeninde yoğun paketleme kullanma gibi rastgele düzen sırası oluşturan durumlarda, tarayıcının kaynak sırasını değil düzeni takip etmesini istersiniz. Bunun gerçekleşmesi için esnek veya ızgara öğelerinin reading-order özelliği auto değeriyle birlikte kullanılması 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
Bazı ızgara ve esnek düzenlerde, düzen sırası kolayca anlaşılabilir. Örneğin, öğeleri yeniden sıralamak için order özelliğini kullanan bir esnek düzende, order özelliği tarafından belirlenen açık bir düzen sırası vardır. Diğer düzenlerde ideal düzen sırasının ne olduğu daha az nettir ve birden fazla olası seçenek olabilir. Bu nedenle, rastgele olmayan düzenleri takip ederken kapsayıcıya grid-order-items özelliğini eklemeniz ve düzen sırasıyla ilgili amacınızı açıklayan anahtar kelime değerlerini girmeniz gerekir.
Aşağıdaki örnekte row-reverse kullanılarak oluşturulan bir esnek düzen gösterilmektedir. Flex öğeler reading-order: auto, flex kapsayıcı ise reading-order-items: flex flow sembolünü içerir. Bu semboller, okuma sırasının görsel bir sırayı (flex visual ile belirtebileceğimiz) takip etmek yerine flex-flow yönünü de takip etmesini istediğimizi belirtir.
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
Bu sonraki örnekte, grid-template-areas kullanılarak bir ızgara düzeni oluşturulur ve öğeler, kaynak sırasından farklı bir düzen sırasına yerleştirilir. reading-order-items özelliği, bir sonraki satıra geçmeden önce her satırda ilerleyerek düzen sırasını takip etmemiz gerektiğini belirtmek için kullanılır. (grid column ters yönü gösterir).
.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ı hâlâ önemlidir. Bu işlev yalnızca okuma sırasının kaynaktan farklı olabileceği belirli durumlarda kullanılmalıdır. Örneğin, yoğun ızgara paketleme gibi bu bağlantı kesilmesine neden olabilecek düzen yöntemleri kullanılırken veya belirli bir kesme noktasında farklı bir düzen sırası mantıklı olduğunda.
Bu özellikleri kullanırken sayfa CSS olmadan oluşturulduğunda mantıklı olacak bir sırayla kaynak doküman oluşturun. Bu özellikleri yalnızca gerekli yerlerde ve kesme noktalarında ekleyin.
Yazma araçları bu özellikleri uygulamalı mı?
Kullanıcıların öğeleri sürükleyip bırakarak ızgara düzeni oluşturmasına olanak tanıyan içerik oluşturma araçları, kullanıcıları mantıklı bir kaynak doküman oluşturmaya teşvik etmelidir. Bu nedenle, çoğu durumda kaynağı düzen sırasına göre yeniden sıralamak, bu özellikleri bağlantı kesilmesiyle başa çıkmanın kolay bir yolu olarak kullanmaktan daha uygun olacaktır.
Bu öneriyle ilgili geri bildiriminizi lütfen paylaşın.
Bu konuyla ilgili geri bildirimlerinizi bekliyoruz. Özellikle bu çözümün işe yaramayacağını düşündüğünüz bir kullanım alanınız varsa veya yaklaşımla ilgili bir erişilebilirlik sorununuz varsa lütfen CSS Çalışma Grubu'na bildirin.
Yaklaşım hakkında birçok kullanım alanı ve düşünce içeren devam eden bir ileti dizisi var. Bu ileti dizisi, yorum eklemek ve bu teklifle ilgili olası sorunları vurgulamak için harika bir yerdir. Mevcut teklifin, ileti dizisini başlatan ilk teklifimden çok farklı olduğunu unutmayın. İlgilenen kişiler, önerilerin CSS Çalışma Grubu'nda nasıl ele alınarak tarayıcılarda uygulanabilecek bir şeye dönüştürüldüğünü gösteren iyi bir örnek olduğu için, bizi bugüne getiren tüm tartışmalardan keyif alabilir.
Küçük resim: Patrick Tomasso. Geri bildirim ve inceleme için Chris Harrelson, Tab Atkins ve Ian Kilpatrick'e teşekkür ederiz.