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.
![Ekran dışındaki içeri kayan bir panel odağı çalabilir.](https://web.dev/static/articles/dom-order-matters/image/an-offscreen-slide-panel-418516732500b.png?authuser=5&hl=tr)
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.
![Hiçbirini göstermeyecek şekilde ayarlanmış, içeri kayan bir panel.](https://web.dev/static/articles/dom-order-matters/image/a-slide-panel-set-displ-4e959c65a9e47.png?authuser=5&hl=tr)
![Blok görüntülemek için ayarlanmış, içeri kayan bir panel.](https://web.dev/static/articles/dom-order-matters/image/a-slide-panel-set-displ-ccba12904336f.png?authuser=5&hl=tr)
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.