Anlamsal HTML öğelerinin DOM konumu tarafından sağlanan varsayılan sekme sırası
uygundur, ancak sekme sırasını değiştirmeniz gerekebilir. Hareket halinde
öğelerinin HTML'de bulunması ideal olsa da mümkün olmayabilir. Böyle durumlarda
bir öğenin sekmesini açıkça ayarlamak için tabindex HTML özelliğini kullanabilir
dokunun.
tabindex, her zaman olmasa da herhangi bir öğeye uygulanabilir
faydalıdır ve bir dizi tam sayı değeri alır. Entegre
tabindex, odaklanılabilir sayfa öğeleri için açık bir sıra belirtebilirsiniz.
sekme sırasına başka bir şekilde odaklanılamayan bir öğe ekleme ve öğeleri kaldırma
. Örneğin:
tabindex="0": Normal sekme sırasına bir öğe ekler. Öğe,
Sekme tuşuna basarak odaklanılabilir. Öğeye odaklanabilmek için
onun focus() yöntemi.
tabindex="-1": Bir öğeyi doğal sekme sırasından kaldırır ancak ilgili öğe
yine de focus() yöntemini çağırarak odaklanabilirsiniz.
tabindex="5": 0 değerinden büyük tüm sekme dizini bu öğeyi öne getirir
doğal sekme sırasına göre değişir. Tabindex daha büyük olan birden fazla öğe varsa
0 değerine göre, sekme sırası sıfırdan büyük en düşük değerden başlar
hız kazanıyor.
Bu durum özellikle başlık, resim veya makale gibi giriş olmayan öğeler için geçerlidir.
başlıklar. Mümkün olduğunda kaynak kodunuzu, DOM sırasının
mantıksal sekme sırası. tabindex kullanıyorsanız bunu özel etkileşimle sınırlayın
düğme, sekme, açılır liste ve metin alanı gibi kontroller; yani
bilgi sağlayabilir.
Yalnızca etkileşimli içeriğe tabindex ekleyin. İçerik önemli olsa bile (ör. ana resim) ekran okuyucu kullanıcıları bunu
dikkat ekliyorum.
Odağı sayfa düzeyinde yönetme
tabindex, bazen sorunsuz bir kullanıcı deneyimi için gereklidir. Örneğin,
farklı içerik bölümlerine sahip sağlam tek bir sayfa oluşturursanız
tüm içerik aynı anda görünür olmalıdır. Bu, gezinme bağlantıları anlamına gelebilir
görünür içeriği, sayfa yenileme olmadan değiştirin.
Bu durumda, seçilen içerik alanını tanımlayın ve tabindex
-1 ve focus yöntemini çağırın. Bu, içeriğin
doğal sekme sıralaması. Odaklanmayı yönetme adı verilen bu teknik,
Sitenin görsel içeriğiyle uyumlu olarak, kullanıcının algılanan bağlamı.
Bileşenlerde odağı yönetme
Bazı durumlarda odağı kontrol düzeyinde de yönetmeniz gerekir (örneğin, özel bileşenler.
Örneğin, select öğesi temel odak noktasını alabiliyor. Ancak bir kez
seçilebilir ek seçenekleri göstermek için ok tuşlarını kullanabilirsiniz.
Özel bir select öğesi oluşturursanız bunu tekrarlamak önemlidir
klavye kullanıcılarının kontrolünüzle etkileşimde bulunmaya devam edebilmesi için.
Hangi klavye davranışlarını uygulayacağınızı bilmek zor olabilir. İlgili içeriği oluşturmak için kullanılan Erişilebilir Zengin İnternet Uygulamaları (ARIA) Yazma Uygulamalar kılavuzunda bileşen türlerinin ve destekledikleri klavye işlemlerinin türleri listelenir.
Belki de ayrıntıya inen Özel Öğeler bir dizi radyo düğmesine benziyor, ancak görünüşe ve gösterir.
<radio-group>
<radio-button>Water</radio-button>
<radio-button>Coffee</radio-button>
<radio-button>Tea</radio-button>
<radio-button>Cola</radio-button>
<radio-button>Ginger Ale</radio-button>
</radio-group>
Hangi klavye desteğine ihtiyaç duyduklarını belirlemek için ARIA Yazma Uygulamaları rehberini inceleyin. 2. Bölüm, aşağıdakileri içeren bir tasarım kalıplarının listesini içerir: telsiz için özellikler tablosu gruplar yeni öğenizle en iyi eşleşen mevcut bileşeni
Yaygın klavye çalışmalarından biri, yukarı/aşağı/sol/sağ ok tuşları desteklenir. Bu davranışı yeni bileşeni için, kayan sekme dizini adlı bir teknik kullanırız.
Ayarlanabilir sekme dizini,tabindex
etkin olan bir hesap seçebilirsiniz.
<radio-group>
<radio-button tabindex="0">Water</radio-button>
<radio-button tabindex="-1">Coffee</radio-button>
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Bileşen, bir klavyenin hangi tuşun
kullanıcı bastığında; daha önce odaklanılan çocuğun
tabindex, -1'e, belirli bir hedefe odaklanan çocuğun tabindex değerini 0'a ayarlar ve
odaklamanıza yardım eder.
<radio-group>
<!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
<radio-button tabindex="-1">Water</radio-button>
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Kullanıcı sonuncuya (veya varış noktasına bağlı olarak ilk sıraya ulaştığında) bir noktaya dönmeye başlayınca, odak tekrar birinciye (veya sonuncuya) döner. alt öğe olarak ayarlanır.
Aşağıdaki örneği deneyin. Öğeyi Geliştirici Araçları'nı kullanarak sekme dizininin bir radyodan diğerine taşındığını görebilirsiniz.
Kalıcı iletişim kutuları ve klavye tuzakları
Karmaşık durumlara yol açabileceğinden odağı manuel olarak yönetmekten kaçınmak en iyisidir. Örneğin, odağı yönetmeye çalışan ve fotoğraf çeken bir otomatik tamamlama widget'ı sekme davranışına uyar, ancak tamamlanana kadar kullanıcının sayfadan ayrılmasını engeller. Buna klavye tuzağı denir ve kullanıcı için çok can sıkıcı olabilir.
WCAG Bölüm 2.1.2'de, klavye odağının hiçbir zaman kilitlenmemesi veya tek bir sayfa öğesinde sıkışmış olabilir. Kullanıcı yalnızca klavye kısayollarını da kullanabilirsiniz.
Bu kuralın istisnası kalıcıdır. Ancak yine de
Kalıcı bir iletişim kutusu oluştururken tabindex. inert ile şunları yapabilirsiniz:
Kullanıcıların bir öğeyle yanlışlıkla etkileşimde bulunmalarını önlemek için (kasıtlı
klavye tuzağı). <dialog>'ı kullanma
öğesi oluşturun. Bu öğe, engellerken kullanıcılar için bir kalıcı
tıklama ve sekmelerin boyutunu değiştirebilirsiniz. Bu, kullanıcının bir
seçim yapmanız gerekir.