Dokümanınızdaki içeriğin sırası, sitenizin erişilebilirliği açısından önemlidir. Ekran okuyucu, seçtiğiniz HTML öğelerini kullanarak belge sırasına göre içeriği sesli okur. Sitede dokunmatik ekran veya fare yerine klavye kullanarak gezinen bir kişi, dokümanın etrafında sekmeyle gezinir. Diğer bir deyişle, bunlar dokümanda yer aldıkları sırada, bağlantılar ve form alanları arasında geçiş yaparak etkin öğeden etkin öğeye atlarlar.
Bu nedenle, iyi yapılandırılmış bir belgeyle başlamak ve tüm doğru HTML öğelerini kullanmak, erişilebilir bir site oluşturmanın önemli bir parçasıdır. Ancak, CSS'yi kullanmaya başladığınızda bu başarılı çalışmanın bir kısmını geri almak mümkündür. Şimdi bunun nedenini inceleyelim.
Kaynak ve görsel sıra
Web sitesinde gezinme, genellikle bir bağlantı listesi olarak işaretlenir. Daha sonra Flexbox'ı kullanarak bunları yatay bir çubuğa dönüştürebilirsiniz. Aşağıdaki Glitch örneğinde, yaygın olarak kullanılan bu kalıbı oluşturdum. Örneği ve bağlantılar arasında sekme açın. Odak, İngilizce'de okuduğumuz sırayla soldan sağa mantıksal bir yönde hareket eder.
Bu tür bir kalıp oluşturduysanız ve ardından kaynakta ikinci sırada olan Bize Ulaşın'ı sona taşımanız istenirse. Flexbox'ta çalışan order özelliğini kullanabilirsiniz.
Öğeleri yeniden düzenlemek için order özelliğini kullanan aşağıdaki örnekte öğeler arasında geçiş yapmayı deneyin.
Odak son öğeye atlar ve ardından tekrar geri döner. Sekme sıralaması söz konusu olduğunda öğe ikinci öğedir. Görsel olarak bu son öğedir.
Yukarıdaki örnek, içeriği CSS kullanarak yeniden düzenleyip yeniden sıraladığımızda karşılaştığımız sorun vurgulanmaktadır. Bu sorunla uğraşıyorsanız yapılması gereken doğru şey, CSS kullanmak yerine kaynaktaki sırayı değiştirmektir.
Hangi CSS özellikleri yeniden sıralamaya neden olabilir?
Öğeleri taşımanıza olanak sağlayan herhangi bir düzen yöntemi bu soruna neden olabilir. Aşağıdaki CSS özellikleri genellikle içeriğin yeniden sıralanması sorunlarına neden olur:
position: absoluteözelliğini kullanma ve bir öğeyi görsel olarak akıştan çıkarma.- Flexbox ve Izgara düzenindeki
orderözelliği. - Flexbox'taki
flex-directioniçinrow-reversevecolumn-reversedeğerleri. - Izgara Düzeni'nde
grid-auto-flowiçindensedeğeri. - Satır adı veya numarasına göre ya da Izgara Düzeni'nde
grid-template-areasiçeren herhangi bir konumlandırma.
Bir sonraki örnekte, CSS Izgarasını kullanarak bir düzen oluşturdum ve öğeleri kaynakta nerede olduklarını dikkate almadan satır numaralarını kullanarak konumlandırdım.
Bu örnekte sağa sola kaydırarak gezinmeyi deneyin ve odak noktasının nasıl yer değiştirdiğine bakın. Bu durum, özellikle de uzun bir sayfa olduğunda çok kafa karıştırıcı bir deneyime neden olur.
Sorunun testi
Sayfanızda klavyeyle gezinmek çok basit bir testtir. Her şeye ulaşabiliyor musunuz? Bunu yaparken tuhaf atlamalar oluyor mu?
İçeriğin yeniden sıralanmasının görsel bir örneği için Chrome'un Erişilebilirlik Analizleri uzantısındaki Sekme Durdurma denetleyicisini deneyin. Aşağıdaki resimde, bu araçtaki CSS ızgara örneği gösterilmektedir. Odağın düzende nasıl atlaması gerektiğini görebilirsiniz.
İçerikleri yeniden sıralama ve esnek web tasarımı
İçeriğiniz için tek bir sunum yapıyorsanız kaynağınızı mantıklı bir sıraya sokmak ve bunu bir düzende yansıtmak genellikle zor değildir. Düzeni farklı ayrılma noktalarındaki düzende değerlendirdiğinizde bunu yapmak daha zor hale gelebilir. Örneğin, bir öğenin daha küçük ekranlarda düzenin alt kısmına taşınması mantıklı olabilir.
Şu anda bu sorun için iyi bir çözüm yoktur. Çoğu durumda, "mobil öncelikli" yaklaşımını geliştirmek, kaynağınızı ve düzeninizi düzenli tutmanıza yardımcı olur. Mobil cihazlarda yaptığınız öncelikler, genelde içerik için somut kararlar verir. Önemli olan, içeriklerin yeniden sıralanması gibi bir olasılık olduğu zaman dikkatli olmak ve son deneyimin her bir ayrılma noktasında çok sarsıcı olup olmadığını test etmektir.