Belgenizdeki içeriklerin sırası, sitenizin erişilebilirliği açısından önemlidir. Ekran okuyucu, içeriği belge sırasına göre okur ve bu içeriğe ek anlamlar katmak için HTML öğelerini kullanır.
Siteye dokunmatik ekran veya fare yerine klavye ile göz atan bir kişi, dokümanda sekmeler arasında gezinir. Etkin öğeden etkin öğeye atlar, bağlantılar ve form alanları arasında sekmeler oluşturur. Bu işlem, öğelerin dokümanda bulunduğu sırayla yapılır.
Bu nedenle, iyi yapılandırılmış bir dokümanla başlamak ve doğru HTML öğelerini kullanmak, erişilebilir bir site oluşturmanın önemli bir parçasıdır. Ancak CSS kullanmaya başladığınızda bu iyi çalışmanın bir kısmını geri almanız mümkündür.
Kaynak sırası ile görsel sıra karşılaştırması
Web sitesi gezinme bağlantıları genellikle bağlantı listesi olarak işaretlenir. Bunları yatay bir çubuğa dönüştürmek için Flexbox'ı kullanabilirsiniz. Aşağıdaki örnekte, yaygın olarak kullanılan bu kalıbı oluşturdum. Örneği tıklayın ve bağlantılar arasında geçiş yapmak için Tab tuşuna basın. Odak, İngilizce okuma düzenine uygun olarak soldan sağa doğru mantıksal bir yönde hareket eder.
Bu gezinme modelini oluşturduğunuzu ve ardından kaynakta ikinci sırada yer alan Bize Ulaşın'ı sona taşımanızın istendiğini varsayalım. Konumunu değiştirmek için Flexbox order özelliğini kullanabilirsiniz.
Öğeleri yeniden düzenlemek için order özelliğinin kullanıldığı aşağıdaki örnekteki öğeler arasında sekme tuşuyla geçiş yapmayı deneyin.
Odak, son öğeye atlayıp tekrar geri dönüyor. Sekme sırası açısından bu öğe ikinci öğedir. Ancak görsel olarak son öğedir.
Örnekte, CSS kullanarak içeriği yeniden düzenleyip yeniden sıraladığımızda karşılaştığımız sorun vurgulanmaktadır. Bu sorunu düzeltmenin doğru yolu, CSS kullanarak bu değişikliği taklit etmek yerine kaynakta bağlantıların sırasını değiştirmektir.
Hangi CSS özellikleri yeniden sıralamaya neden olabilir?
Öğeleri taşımanıza olanak tanıyan tüm düzen yöntemleri bu soruna neden olabilir. Aşağıdaki CSS özellikleri genellikle içerik yeniden sıralama sorunlarına neden olur:
position: absolutesimgesini kullanma ve bir öğeyi görsel olarak akıştan çıkarma- Flexbox ve ızgara düzeninde
orderözelliği. - Flexbox'ta
flex-directioniçinrow-reversevecolumn-reversedeğerleri. - Izgara düzeninde
grid-auto-flowiçindensedeğeri. - Izgara düzeninde satır adına veya numarasına göre ya da
grid-template-areasile yapılan tüm konumlandırmalar.
Bir sonraki örnekte, CSS Grid kullanarak bir düzen oluşturdum ve öğeleri kaynakta nerede olduklarını dikkate almadan satır numaralarını kullanarak konumlandırdım.
Bu örnekte sekme tuşunu kullanarak odak noktasının nasıl değiştiğini görün. Bu durum, özellikle uzun sayfalarda çok kafa karıştırıcı bir deneyime yol açar.
Sorunla ilgili testler
Hızlı bir test için sayfanızda klavyeyle gezinin. Her şeye erişebiliyor musunuz? Bunu yaparken tuhaf atlamalar oluyor mu?
İçeriğin yeniden sıralanmasıyla ilgili görsel bir gösterim için Chrome uzantısı Accessibility Insights'taki sekme durağı denetleyicisini deneyin. Ekran görüntüsünde, bu araçtaki CSS Grid örneği gösterilmektedir. Odak noktasının düzende nasıl hareket etmesi gerektiğini görebilirsiniz.
İçeriği yeniden sıralama ve duyarlı web tasarımı
İçeriğinizin yalnızca bir sunumu varsa düzeni yansıtan mantıksal olarak sıralanmış bir kaynak tutabilirsiniz. Farklı kesme noktalarındaki düzeni göz önünde bulundurduğunuzda bu durum daha zor olabilir. Örneğin, küçük ekranlarda bir öğeyi düzenin en altına taşımak mantıklı olabilir.
Şu anda bu sorun için iyi bir çözüm bulunmamaktadır. Çoğu durumda, mobil öncelikli geliştirme, kaynağınızı ve düzeninizi düzenli tutmanıza yardımcı olabilir. Mobil için doğru önceliklendirmeler genellikle genel olarak içeriğiniz için de doğrudur. Önemli olan, içeriğin yeniden sıralanma olasılığının ne zaman olduğunu bilmektir. Son deneyimin her kesme noktasında çok rahatsız edici olmadığından emin olmak için test edin.