Anlamsal HTML öğelerinin DOM konumu tarafından sağlanan varsayılan sekme sırası uygundur ancak sekme sırasını değiştirmeniz gerekebilir. HTML'de öğelerin taşınması idealdir ancak mümkün olmayabilir. Bu durumlarda, bir öğenin sekme konumunu açıkça ayarlamak için tabindex HTML özelliğini kullanabilirsiniz.
tabindex, her öğede kullanışlı olmasa da tüm öğelere uygulanabilir ve bir dizi tam sayı değeri alır. tabindex ile odaklanılabilir sayfa öğeleri için açık bir sıra belirtebilir, başka bir şekilde odaklanılamayan bir öğeyi sekme sırasına ekleyebilir ve öğeleri sekme sırasından kaldırabilirsiniz. Örneğin:
tabindex="0": Normal sekme sırasına bir öğe ekler. Sekme tuşuna basarak öğeye odaklanabilir ve öğeye focus() yöntemi çağrılarak odaklanılabilir.
tabindex="-1": Bir öğeyi doğal sekme sırasından kaldırır ancak focus() yöntemini çağırarak öğeye yine de odaklanabilirsiniz
tabindex="5": 0 değerinden büyük herhangi bir sekme dizini, söz konusu öğeyi doğal sekme sırasının önüne getirir. Sekme dizini 0 değerinden büyük olan birden fazla öğe varsa sekme sırası, sıfırdan büyük olan en düşük değerden başlar ve yukarı doğru ilerler. 0 değerinden büyük bir sekme dizini kullanılması, karşıt kalıp olarak kabul edilir.
Bu durum özellikle başlık, resim veya makale başlıkları gibi giriş olmayan öğeler için geçerlidir. Mümkün olduğunda kaynak kodunuzu DOM sırasının mantıksal bir sekme sırası oluşturacak şekilde düzenlemek en iyisidir. tabindex kullanıyorsanız bunu düğmeler, sekmeler, açılır menüler ve metin alanları gibi özel etkileşimli denetimlerle, yani kullanıcının giriş sağlamayı bekleyebileceği öğelerle sınırlandırın.
Yalnızca etkileşimli içeriğe tabindex ekleyin. İçerik önemli olsa bile (ör. ana resim) ekran okuyucu kullanıcıları odak eklemeden anlayabilir.
Odağı sayfa düzeyinde yönetme
tabindex, bazen sorunsuz bir kullanıcı deneyimi için gereklidir. Örneğin, tüm içeriğin aynı anda görünür olmadığı, farklı içerik bölümlerine sahip sağlam bir sayfa oluşturuyorsanız. Bu durum, gezinme bağlantılarının sayfayı yenilemeden
görünür içeriği değiştirdiği anlamına gelebilir.
Bu durumda, seçilen içerik alanını belirleyip tabindex olarak -1
verin ve focus yöntemini çağırın. Bu, içeriğin doğal sekme sırasında
görünmemesini sağlar. Odaklanmayı yönetme adı verilen bu teknik, kullanıcının algılanan bağlamını, sitenin görsel içeriğiyle senkronize eder.
Bileşenlerde odağı yönetme
Bazı durumlarda, özel bileşenlerde olduğu gibi odağı kontrol düzeyinde de yönetmeniz gerekir.
Örneğin, select öğesi temel odağı alabilir ancak seçilebilir ek seçenekleri göstermek için ok tuşlarını kullanabilirsiniz.
Özel bir select öğesi oluşturursanız klavye kullanıcılarının kontrolünüzle etkileşim kurmaya devam edebilmesi için bu davranışı kopyalamanız önemlidir.
Hangi klavye davranışlarını uygulayacağınızı bilmek zor olabilir. Erişilebilir Zengin İnternet Uygulamaları (ARIA) Yazma Uygulamaları kılavuzunda, bileşen türleri ve destekledikleri klavye işlemleri listelenir.
Bir grup radyo düğmesine benzeyen, ancak görünüşe ve davranışına benzersiz bir bakış açısı getiren Özel Öğeler üzerinde çalışıyor olabilirsiniz.
<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ı kılavuzuna bakın. 2. Bölüm, tasarım kalıplarının listesini içerir. Bu liste, yeni öğenizle en iyi eşleşen mevcut bileşen olan radyo grupları için özellik tablosudur.
Desteklenmesi gereken yaygın klavye davranışlarından biri, yukarı/aşağı/sol/sağ ok tuşlarıdır. Bu davranışı yeni bileşene eklemek için roving tabindex adlı bir teknik kullanırız.
Ayarlı sekme dizini, şu anda etkin olan sekme hariç tüm alt öğeler için tabindex öğesinin -1 değerine ayarlanmasıyla çalışır.
<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, kullanıcının hangi tuşa bastığını belirlemek için bir klavye etkinlik işleyicisi kullanır. Bu durumda, önceden odaklanılan alt öğenin tabindex değerini -1 olarak ayarlar, odaklanılacak çocuğun tabindex değerini 0 olarak ayarlar ve buna odaklanma yöntemini çağırır.
<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ı son çocuğa (veya odağı değiştirdiği yöne bağlı olarak ilk başa) ulaştığında odak, tekrar ilk (veya son) alt çocuğa döner.
Aşağıdaki örneği deneyin. Sekme dizininin bir radyodan diğerine taşındığını görmek için Geliştirici Araçları'nda öğeyi inceleyin.
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 sekme davranışını yakalayan ancak kullanıcının işlem tamamlanana kadar sekmeden ayrılmasını engelleyen bir otomatik tamamlama widget'ı. 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 belirli bir sayfa öğesine kilitlenmemesi veya belirli bir sayfa öğesine sıkışmaması gerektiği belirtilmektedir. Kullanıcı yalnızca klavyeyi kullanarak tüm sayfa öğeleri arasında gezinebilmelidir.
Bu kuralın istisnası kalıcıdır. Ancak kalıcı öğe oluştururken tabindex kullanmaktan kaçınmalısınız. inert sayesinde, kullanıcıların bir öğeyle yanlışlıkla etkileşimde bulunmalarını önleyebilirsiniz (kasıtlı bir klavye tuzağı). Kalıcı olmayan tıklamaları ve sekmeleri engellerken kullanıcılar için bir kalıcı model oluşturmak için varsayılan olarak durağan <dialog> öğesini kullanın. Bu, kullanıcının gerekli bir seçime odaklanmasını sağlar.