Sekme dizinini kullanma

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

Anlamsal HTML öğelerinin DOM konumuna göre sağlanan varsayılan sekme sırası kullanışlıdır ancak sekme sırasını değiştirmeniz gereken zamanlar olabilir. HTML'deki öğeleri taşımak idealdir ancak mümkün olmayabilir. Bu gibi durumlarda, bir öğenin sekme konumunu açıkça ayarlamak için tabindex HTML özelliğini kullanabilirsiniz.

tabindex, her öğeye uygulanabilir ancak her öğede kullanılması gerekli değildir ve bir dizi tam sayı değeri alır. tabindex ile odaklanılabilir sayfa öğeleri için açık bir sıra belirtebilir, aksi takdirde odaklanılamayan bir öğeyi sekme sırasına ekleyebilir ve öğeleri sekme sırasından kaldırabilirsiniz. Örneğin:

tabindex="0": Doğal sekme sırasına bir öğe ekler. Öğeye Sekme tuşuna basılarak odaklanılabilir ve öğenin focus() yöntemi çağrılarak odaklanılabilir.

tabindex="-1": Bir öğeyi doğal sekme sırasından kaldırır ancak öğe, focus() yöntemi çağrılarak odaklanmaya devam edebilir.

tabindex="5": 0'den büyük herhangi bir tabindex, söz konusu öğeyi doğal sekme sırasının önüne getirir. Tabindex değeri 0'dan büyük olan birden fazla öğe varsa sekme sırası, sıfırdan büyük en düşük değerden başlayıp yukarı doğru devam eder.

Bu durum özellikle başlıklar, resimler 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ı sağlayacak şekilde düzenlemeniz en iyisidir. tabindex kullanıyorsanız bunu düğmeler, sekmeler, açılır listeler ve metin alanları gibi özel etkileşimli kontrollerle sınırlayın. Yani kullanıcının giriş yapmasını bekleyebileceği öğelerle sınırlayın.

Yalnızca etkileşimli içeriklere tabindex ekleyin. Önemli bir içerik (ör. anahtar resim) olsa bile ekran okuyucu kullanıcıları, odak eklemeden içeriği anlayabilir.

Odaklanmayı sayfa düzeyinde yönetme

Bazen sorunsuz bir kullanıcı deneyimi için tabindex gerekir. Örneğin, tüm içeriğin aynı anda görünmediği, farklı içerik bölümleri içeren sağlam bir tek sayfa oluşturursanız. Bu, gezinme bağlantılarının sayfa yenilenmeden görünür içeriği değiştirebileceği anlamına gelir.

Bu durumda, seçilen içerik alanını belirleyin ve tabindex değerini -1 olarak ayarlayıp focus yöntemini çağırın. Bu sayede içerik, doğal sekme sırasına göre görünmez. Odağı yönetme olarak adlandırılan bu teknik, kullanıcının algıladığı bağlamı sitenin görsel içeriğiyle senkronize tutar.

Bileşenlerde odağı yönetme

Bazı durumlarda, odağı kontrol düzeyinde de yönetmeniz gerekir (ör. özel bileşenlerde).

Örneğin, select öğesi temel odaklanma alabilir ancak oradayken ek olarak seçilebilir 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şimde bulunmaya devam edebilmesi için bu davranışı kopyalamanız önemlidir.

Hangi klavye davranışlarının uygulanacağını bilmek zor olabilir. Erişilebilir Zengin İnternet Uygulamaları (ARIA) Yazma Uygulamaları kılavuzunda bileşen türleri ve destekledikleri klavye işlemleri listelenir.

Belki de bir grup radyo düğmesine benzeyen ancak görünüm ve davranış açısından benzersiz bir yaklaşım sunduğunuz özel öğeler üzerinde çalışıyorsunuzdur.

<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 Authoring Practices rehberini inceleyin. Bölüm 2'de, radyo grupları için özellikler tablosu da dahil olmak üzere tasarım kalıplarının listesi ve yeni öğenizle en çok eşleşen mevcut bileşen yer alır.

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.

Gezici tabindex, şu anda etkin olan hariç tüm alt öğeler için tabindex değerini -1 olarak ayarlayarak ç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 etkinliği işleyicisi kullanır. Bu durumda, daha önce odaklanılan alt öğenin tabindex değerini -1 olarak ayarlar, odaklanılacak alt öğenin tabindex değerini 0 olarak ayarlar ve üzerinde 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 (veya odağı hareket ettirdiği yöne bağlı olarak ilk) alt öğeye ulaştığında odak, ilk (veya son) alt öğeye geri döner.

Aşağıdaki örneği deneyin. Sekme sırasının bir radyodan diğerine geçişini gözlemlemek için öğeyi Geliştirici Araçları'nda inceleyin.

Modallar ve klavye tuzakları

Odaklanmayı manuel olarak yönetmekten kaçınmak en iyisidir. Aksi takdirde karmaşık durumlarla karşılaşabilirsiniz. Örneğin, odağı yönetmeye çalışan ve sekme davranışını yakalayan ancak tamamlanana kadar kullanıcının ayrılmasını engelleyen bir otomatik tamamlama widget'ı. Bu duruma klavye tuzağı denir ve kullanıcı için çok sinir bozucu olabilir.

WCAG'nin 2.1.2 bölümünde, klavye odağının hiçbir zaman belirli bir sayfa öğesinde kilitlenmemesi veya sıkışmaması gerektiği belirtilir. Kullanıcı, yalnızca klavyeyi kullanarak tüm sayfa öğelerinde gezinebilmelidir.

Bu kuralın istisnası, modal pencerelerdir. Ancak yine de modal oluştururken tabindex kullanmaktan kaçınmalısınız. inert ile kullanıcıların bir öğeyle yanlışlıkla etkileşimde bulunmasını (amaçlı klavye tuzağı) önleyebilirsiniz. Kullanıcılar için bir modal oluştururken modalın dışındaki tıklamaları ve sekmeleri engellemek üzere varsayılan olarak etkisiz olan <dialog> öğesini kullanın. Bu sayede kullanıcı, gerekli seçime odaklanabilir.