Sekme dizinini kullanma

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

Anlamsal HTML öğelerinin DOM konumu tarafından sağlanan varsayılan sekme sırası kullanışlıdır ancak sekme sırasını değiştirmeniz gerekebilir. HTML'de öğelerin taşınması 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 öğ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, odaklanamayan 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 yine de focus() yöntemi çağrılarak öğeye odaklanabilirsiniz.

tabindex="5": 0'dan büyük bir tabindex değeri, ilgili öğeyi doğal sekme sırasının başına 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.

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ıklı bir sekme sırası sağlaması için düzenlemeniz önerilir. 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. Önemli içerikler (ör. anahtar resim) olsa bile ekran okuyucu kullanıcıları, içeriğe odaklanmadan içeriği anlayabilir.

Odağı sayfa düzeyinde yönetme

Sorunsuz bir kullanıcı deneyimi için bazen tabindex gereklidir. Örneğin, tüm içeriğin aynı anda görünmediği, farklı içerik bölümlerinden oluşan güçlü bir tek sayfa oluşturursanız. Bu, sayfa yenilenmeden gezinme bağlantılarının görünür içeriği değiştirmesi anlamına gelebilir.

Bu durumda, seçili içerik alanını tanımlayın ve -1 türünde bir tabindex atayın ve focus yöntemini çağırın. Böylece 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, ö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ın uygulanacağını bilmek zor olabilir. Erişilebilir Zengin İnternet Uygulamaları (ARIA) İçerik Üretme Uygulamaları kılavuzunda, bileşen türleri ve bu bileşenlerin desteklediği klavye işlemleri listelenmektedir.

Radyo düğmelerine benzeyen ancak görünüm ve davranış açısından benzersiz bir yaklaşıma sahip ö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>

Kullanıcının hangi klavye desteğine ihtiyacı olduğunu belirlemek için ARIA Yazarlık Uygulamaları kılavuzunu inceleyin. 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 gezinen sekme dizini 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 etkinliği işleyici kullanır. Bu durumda, daha önce odaklanan alt öğenin tabindex değerini -1'e, odaklanılacak alt öğenin tabindex değerini 0'a ayarlar ve bu öğenin focus 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ğı taşıdığı yöne bağlı olarak ilk başa) ulaştığında odak, tekrar ilk (veya son) çocuğa döner.

Aşağıdaki örneği deneyin. Sekme dizini bir radyo düğmesinden diğerine geçerken DevTools'ta öğeyi inceleyin.

Kalıcılar ve klavye tuzakları

Odak noktasını manuel olarak yönetmek karmaşık durumlara yol açabileceğinden bunu yapmamak en iyisidir. Örneğin, odağı yönetmeye çalışan ve sekme davranışını yakalayan ancak tamamlanana kadar kullanıcının sekmeden ayrılmasını engelleyen bir otomatik tamamlama widget'ı. Buna klavye tuzağı denir ve kullanıcılar 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 öğelerine gidip gelebilmelidir.

Bu kuralın istisnası kalıcıdır. 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şime geçememesini sağlayabilirsiniz (kasıtlı bir klavye tuzağı). Kullanıcılar için bir modal oluşturmak ve modal dışındaki tıklamaları ve sekmeleri engellemek istiyorsanız varsayılan olarak etkin olmayan <dialog> öğesini kullanın. Bu sayede kullanıcı, zorunlu bir seçime odaklanabilir.