Varsayılan DOM sırasının önemi
Yerel öğelerle çalışmak, odaklanma davranışı hakkında bilgi edinmenin harika bir yoludur. Çünkü bu öğeler DOM'deki konumlarına göre sekme sırasına otomatik olarak eklenir.
Örneğin, DOM'de arka arkaya olmak üzere üç düğme öğeniz olabilir. Tab tuşuna bastığınızda her düğme sırayla odaklanır. Odak gezinme başlangıç noktasını taşımak için aşağıdaki kod bloğunu tıklamayı deneyin, ardından odağı düğmeler arasında taşımak için Tab tuşuna basın.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Bununla birlikte, CSS kullanıldığında öğelerin DOM'de tek bir sırada varken ekranda farklı bir sırada görünmesinin mümkün olduğunu unutmayın. Örneğin, bir düğmeyi sağa taşımak için float gibi bir CSS özelliği kullanırsanız düğmeler ekranda farklı bir sırada görünür. Ancak DOM'daki sıraları aynı kaldığı için sekme sıraları da aynı kalır. Kullanıcı sayfada sekmeyle ilerlediğinde düğmelere pratiklik olmayan bir sırada odaklanır. Odak gezinme başlangıç noktasını taşımak için aşağıdaki kod bloğunu tıklamayı deneyin, ardından odağı düğmeler arasında taşımak için Tab tuşuna basın.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
CSS'yi kullanarak ekrandaki öğelerin görsel konumunu değiştirirken dikkatli olun. Bu durum, sekme sırasının rastgele bir şekilde atlamasına neden olarak klavye kullanan kullanıcıların kafasını karıştırabilir. Bu nedenle, Web AIM kontrol listesinin 1.3.2 numaralı bölümünde kod sırasına göre belirlenen okuma ve gezinme sırasının mantıklı ve sezgisel olması gerektiği belirtilmektedir.
Kural olarak, sekme sırasını yanlışlıkla bozmadığınızdan emin olmak için sayfalarınız arasında ara sıra gezinmeyi deneyin. Benimsenmek iyi bir alışkanlıktır ve fazla çaba gerektirmeyen bir alışkanlıktır.
Ekran dışındaki içerik
Şu anda görüntülenmeyen ancak yine de DOM'de olması gereken içeriğiniz (duyarlı yan gezinme gibi) varsa ne olur? Ekran dışındayken odak noktası olan bunun gibi öğeleriniz olduğunda, odak görünmüyor ve sayfada kullanıcı sekmeleri olarak yeniden ortaya çıkabilir; bu durum kesinlikle istenmeyen bir efekttir. İdeal olarak, panelin ekranda olmadığında odak almasını engellemeli ve yalnızca kullanıcı panelle etkileşime geçebildiğinde panelin odağa alınmasına izin vermeliyiz.
Bazen odaklanmanın nereye kaydığını anlamak için biraz dedektiflik yapmanız gerekir. Şu anda hangi öğenin odakta olduğunu öğrenmek için konsolda document.activeElement simgesini kullanabilirsiniz.
Hangi ekran dışı öğenin odağa alındığını öğrendikten sonra, öğeyi display: none veya visibility: hidden olarak ayarlayabilir ve ardından kullanıcıya göstermeden önce display:
block veya visibility: visible olarak geri ayarlayabilirsiniz.
Genel olarak, geliştiricilerin, sekme sırasının kaybolmadığından veya mantıklı bir diziden çıkmadığından emin olmak için her yayından önce sitelerinde gezinmelerini öneririz. Çalışıyorsa display: none veya visibility: hidden kullanarak ekran dışındaki içerikleri uygun şekilde gizlediğinizden veya DOM'deki öğelerin fiziksel konumlarını mantıksal bir sırada olacak şekilde yeniden düzenlediğinizden emin olmanız gerekir.