Varsayılan DOM sırasının önemi
Yerel öğelerle çalışmak, odaklanma davranışı hakkında bilgi edinmenin harika bir yoludur. sekmelerine göre otomatik olarak sekme sırasına DOM'deki konumu.
Örneğin,
DOM. Tab tuşuna bastığınızda her düğme sırayla odaklanır. Kod bloğunu tıklamayı deneyin
odak gezinme başlangıç noktasını taşımak için aşağıya, ardından odağı taşımak için Tab tuşuna basın
yapabilirsiniz.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Ancak, CSS kullanarak bazı şeylerin olduğunu unutmayın.
DOM'de tek bir sırada bulunur ancak ekranda farklı bir sırada görünür. Örneğin,
Ö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. Fakat şirketteki sıraları
DOM aynı kalır ve sekme sıralaması değişmez. Kullanıcı sekmelerini
düğmelere pratik olmayan bir sırada odaklanıldığını görürsünüz. Şurayı tıklamayı deneyin:
odak gezinme başlangıç noktasını taşımak için aşağıdaki kod bloğunu ve ardından, Tab
odağı düğmeler arasında taşır.
<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ırasının rasgele, kafa karıştırıcı gibi görünerek atlamasına neden olabilir. en iyi uygulamaları paylaştık. Bu nedenle, Web IMA’da kontrol listesinde bölüm 1.3.2 kod sırası ile belirlenen okuma ve gezinme sırasının mantıklı ve sezgisel olmasını sağlar.
Kural olarak, emin olmak için sayfalarınız arasında ara sıra gezinmeyi deneyin. emin olmanız gerekir. İyi bir alışkanlıktır. ve çok fazla çaba gerektirmeyen bir stratejidir.
Ekran dışındaki içerik
Görüntülenmeyen ancak yine de gösterilmesi gereken içeriğiniz varsa ne olur? DOM'de olmasını mı istiyorsunuz? Bunun gibi öğeleriniz olduğunda ekran dışındayken de odaklanmaya çalışırsa sanki kullanıcının sayfada sekmeleri olarak görünmeye devam ediyor. istenmeyen bir etki yaratır. İdeal olarak, panelin özellikle bu tür görevlere odaklanmasını ve yalnızca kullanıcı etkileşimde bulunabiliyorsa odaklanılmasına olanak tanımalıdır gerçekleşebilir.
Bazen odak noktasının
nerede olduğunu anlamak için
kayboldu. Konsolda document.activeElement aracını kullanarak hangi
öğesine odaklanılmış.
Hangi ekran dışındaki öğenin odaklandığını öğrendikten sonra, bunu
display: none veya visibility: hidden yapıp kullanıcıya göstermeden önce tekrar display:
block veya visibility: visible olarak ayarlayın.
Genel olarak, geliştiricilerin her aşamaya geçmeden önce
sekme sırasının kaybolmadığından veya mantıksal bir sıralamadan çıkmadığını
tıklayın. Görünürse, dosyayı uygun şekilde gizlediğinizden emin olun.
ekran dışındaki içerikleri display: none veya visibility: hidden ile ya da
yeniden düzenle" DOM'de fiziksel konumlar vardır, böylece bunların mantıksal
sipariş.