Varsayılan DOM sırasının önemi
Yerel öğelerle çalışmak, odaklama davranışı hakkında bilgi edinmenin harika bir yoludur. Bu öğeler, DOM'deki konumlarına göre sekme sırasına otomatik olarak eklenir.
Örneğin, DOM'de art arda üç düğme öğeniz olabilir. Tab tuşuna basıldığında her düğme sırayla odaklanır. Odaklanma 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'yi kullanarak öğelerin DOM'de belirli bir sırada mevcutken ekranda farklı bir sırada görünmesi mümkündür. Ö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'deki sıraları aynı kaldığı için sekme sıraları da aynı kalır. Kullanıcı sayfada gezinirken düğmeler sezgisel olmayan bir sırayla odaklanır. Odaklanma 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, klavyeyi kullanan kullanıcıların sekme sırasının rastgele bir şekilde rastgele değişmesine neden olabilir. Bu nedenle, Web AIM kontrol listesi, bölüm 1.3.2'de kod sırasına göre belirlenen okuma ve gezinme sırasının mantıklı ve sezgisel olması gerektiğini belirtir.
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 iyi bir alışkanlıktır ve çok fazla çaba gerektirmez.
Ekran dışı içerik
O anda görüntülenmeyen ancak duyarlı yan gezinme gibi yine de DOM'de yer alması gereken içeriğiniz varsa ne olur? Ekran dışındayken odağı alan buna benzer öğeleriniz olduğunda, odak kayboluyor ve sayfa içindeki kullanıcı sekmeleri olarak yeniden görünüyor gibi görünebilir ve bu da açıkça istenmeyen bir etkidir. İdeal olarak, panelin ekran kapalıyken 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ı öğrenmek için konsoldan document.activeElement kullanabilirsiniz.
Hangi ekran dışı öğeye odaklanıldığını öğrendikten sonra öğeyi display: none veya visibility: hidden olarak ayarlayabilir ve daha sonra, kullanıcıya göstermeden önce tekrar display:
block veya visibility: visible değerine ayarlayabilirsiniz.
Genel olarak, geliştiricilerin, sekme sırasının kaybolmadığını veya mantıksal bir sıradan atlamadığını görmek için her yayınlamadan önce sitelerinde sekmeye gitmelerini öneririz. Çalışıyorsa display: none veya visibility: hidden ile ekran dışı içeriği uygun şekilde gizlediğinizden veya öğelerin DOM'deki fiziksel konumlarını mantıklı bir sırada olacak şekilde yeniden düzenlediğinizden emin olmanız gerekir.