Varsayılan DOM sırasının önemi
Yerel öğeler, DOM'daki konumlarına göre sekme sırasına otomatik olarak eklendikleri için odaklanma davranışı hakkında bilgi edinmek için mükemmel bir yöntemdir.
Örneğin, DOM'da birbirinin ardından gelen üç 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 Tab tuşuna basarak odağı düğmeler arasında taşıyın.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Ancak CSS'yi kullanarak DOM'da bir sırada bulunan öğelerin ekranda farklı bir sırada görünebileceğini 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ı sayfayı sekme tuşlarıyla gezerken 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'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.
Sekme sırasını yanlışlıkla bozmadığınızdan emin olmak için sayfalarınızda sekme tuşunu kullanarak gezinmeyi düzenli olarak deneyin. Bu, edinilmesi iyi bir alışkanlıktır ve çok fazla çaba gerektirmez.
Ekran dışındaki içerik
Şu anda gösterilmeyen ancak DOM'de bulunması gereken içerikleriniz (ör. duyarlı yan gezinme menüsü) varsa ne yapmalısınız? Ekran dışındayken odak alan bu tür öğeler olduğunda, kullanıcı sayfayı sekme tuşlarıyla gezerken odağın kaybolup yeniden göründüğü görülebilir. Bu, kesinlikle istenmeyen bir etkidir. İ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 her yayınlamadan önce sitelerinde Sekme tuşuna basarak Sekme sırasının kaybolmadığından veya mantıklı bir sırayı atlamadığından emin olmalarını öneririz. Bu durumda, ekran dışındaki içeriği display: none veya visibility: hidden ile uygun şekilde gizlediğinizden ya da öğelerin DOM'daki fiziksel konumlarını mantıklı bir düzende olacak şekilde yeniden düzenlediğinizden emin olmanız gerekir.