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'deki öğeleri taşımak ideal olsa da 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 yararlı olmayabilir ve bir dizi tamsayı 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": Doğal sekme sırasına bir öğe ekler. Öğeye Sekme tuşuna basarak veya focus() yöntemini çağırarak odaklanılabilir.

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

tabindex="5": 0'dan büyük bir tabindex değeri, ilgili öğeyi doğal sekme sırasının başına getirir. 0'ten büyük bir tabindex değerine sahip 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 giriş öğesi olmayan başlıklar, resimler veya makale başlıkları 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 öğesini kullanıyorsanız düğmeler, sekmeler, açılır menüler ve metin alanları gibi özel etkileşimli kontrollerle (yani kullanıcının giriş vermesini bekleyebileceği öğelerle) kısıtlayın.

tabindex yalnızca etkileşimli içeriklere eklenmelidir. Ö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ştirdiği anlamına gelebilir.

Bu durumda, seçili içerik alanını tanımlayın ve tabindex -1 verin ve 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, özel bileşenler gibi kontrol düzeyinde de odağı yönetmeniz gerekir.

Örneğin, select öğesi temel odak alabilir ancak bu öğeye geldiğinizde ok tuşlarını kullanarak ek seçilebilir seçenekleri gösterebilirsiniz. Ö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ümde, yeni öğenizle en çok eşleşen mevcut bileşen olan radyo grupları için özellikler tablosu da dahil olmak üzere tasarım kalıplarının bir listesi 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 gezinen sekme dizini adlı bir teknik kullanırız.

Gezen Sekme Dizini, ş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ş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 (veya odağı taşıdığı 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 dizini bir radyo düğmesinden diğerine geçerken DevTools'ta öğeyi inceleyin.

Modal pencereler ve klavye tuşları

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'nin 2.1.2 numaralı bölümünde, klavye odağının hiçbir zaman belirli bir sayfa öğesinde kilitlenmemesi veya takılı kalmaması belirtilmektedir. Kullanıcı, yalnızca klavyeyi kullanarak tüm sayfa öğelerine gidip gelebilmelidir.

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ş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.