Varsayılan DOM sırasının önemi
Yerel öğelerle çalışmak, odak davranışını öğrenmenin harika bir yoludur. Çünkü bunlar, DOM'daki konumlarına göre sekme sırasına otomatik olarak eklenir.
Örneğin, DOM'da arka arkaya üç düğme öğeniz olabilir. Tab tuşuna bastığınızda her düğmeye sırayla odaklanılı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>
Ancak CSS kullanarak öğelerin DOM'da bir sırada bulunmasını ancak ekranda farklı bir sırada görünmesini sağlamanın 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 sekmeler arasında gezinirken düğmeler sezgisel olmayan bir 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 style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
CSS 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 klavyeyi kullanan kullanıcıların kafasını karıştırabilir. Bu nedenle, Web AIM kontrol listesinin 1.3.2 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 belirtilir.
Kural olarak, sekme sırasını yanlışlıkla bozmadığınızdan emin olmak için sayfalarınızda sık sık sekmeler arasında gezinmeyi deneyin. Bu, edinilmesi gereken iyi bir alışkanlıktır ve çok fazla çaba gerektirmez.
Ekran dışı içerik
Şu anda gösterilmeyen ancak duyarlı bir yan gezinme menüsü gibi DOM'da bulunması gereken içerikleriniz varsa ne yapmalısınız? Ekran dışındayken odaklanan bu tür öğeleriniz olduğunda, kullanıcı sayfada sekmeler arasında gezinirken odak kayboluyor ve yeniden ortaya çıkıyor gibi görünebilir. Bu, açıkça istenmeyen bir etkidir. İdeal olarak, panelin ekran dışındayken odaklanmasını önlemeli ve yalnızca kullanıcı onunla etkileşim kurabildiğinde odaklanmasına izin vermeliyiz.
Bazen odağın nereye gittiğini anlamak için biraz dedektiflik yapmanız gerekir. Şu anda hangi öğeye odaklanıldığını öğrenmek için konsoldan document.activeElement değerini kullanabilirsiniz.
Hangi ekran dışı öğeye odaklanıldığını öğrendikten sonra bu öğeyi display: none veya visibility: hidden olarak ayarlayabilir ve kullanıcıya göstermeden önce tekrar display:
block ya da visibility: visible olarak ayarlayabilirsiniz.
Genel olarak, geliştiricilerin her yayınlamadan önce sitelerinde sekmeler arasında gezinerek sekme sırasının kaybolmadığını veya mantıksal bir sıradan çıkmadığını görmelerini öneririz. Böyle bir durum varsa ekran dışı içeriği display: none veya visibility: hidden ile uygun şekilde gizlediğinizden ya da öğelerin DOM'daki fiziksel konumlarını mantıklı bir sırada olacak şekilde yeniden düzenlediğinizden emin olmanız gerekir.