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 mülkü kullanırsanız düğmeler ekranda farklı bir sırada görünür. Ancak DOM'deki sıralamaları aynı kaldığı için sekme sırası 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 kullanarak öğelerin ekrandaki görsel konumunu değiştirirken dikkatli olun. Bu durum, sekme sıralamasının rastgele bir şekilde, klavyeyi kullanan kullanıcıların kafasını karıştırarak atlamasına neden olabilir. Bu nedenle, Web IAM kontrol listesi bölüm 1.3.2'de, kod sırası ile belirlenen okuma ve gezinme sırasının mantıksal ve sezgisel olması gerektiğini belirtir.
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 ekran dışındayken odaklanmasını engellemeli ve yalnızca kullanıcı etkileşimde bulunabiliyorsa odaklanmasına izin vermeliyiz.
Bazen odağın nereye gittiğini anlamak için biraz dedektif çalışması yapmanız gerekir. Şu anda hangi öğeye odaklanıldığını anlamak için konsoldan document.activeElement işlevini kullanabilirsiniz.
Ekran dışındaki hangi öğeye odaklanıldığını öğrendikten sonra öğeyi display: none veya visibility: hidden olarak ayarlayabilir, ardından kullanıcıya göstermeden önce tekrar display:
block veya visibility: visible olarak 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. İhlal ediyorsa ekran dışındaki içerikleri display: none veya visibility: hidden ile uygun şekilde gizlediğinizden ya da DOM'deki öğelerin fiziksel konumlarını mantıksal bir sırada olacak şekilde yeniden düzenlediğinizden emin olmanız gerekir.