<button> veya <input> gibi standart HTML öğeleri, yerleşik klavye erişilebilirliğine
sahiptir ve mümkün olduğunda kullanılmalıdır. Ancak özel etkileşimli öğeler oluşturmanız gerekiyorsa tabindex ekleyerek beklenen kullanıcı davranışını oluşturabilirsiniz.
Yalnızca etkileşimli içeriğe tabindex ekleyin. İçerik, ana resim gibi önemli bir öğe olsa bile ekran okuyucu kullanıcıları odak eklemeden bu içeriği anlayabilir.
Tabindex nedir?
Yerleşik öğeler tarafından sağlanan varsayılan sekme sırasını değiştirmeniz gerektiğinde, bir öğenin sekme konumunu açıkça ayarlamak için tabindex HTML özelliğini kullanabilirsiniz.
tabindex herhangi bir öğeye uygulanabilir ancak yalnızca etkileşimli öğelere uygulanması gerekir 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.
Kontrollerin klavyeden erişilebilir olmasını sağlama
Lighthouse gibi bir araç, belirli erişilebilirlik sorunlarını otomatik olarak tespit etme konusunda çok başarılıdır ancak bazı testlerin yine de bir insan tarafından manuel olarak yapılması gerekir.
Sitenizde gezinmek için Tab tuşuna basmayı deneyin. Sayfadaki tüm etkileşimli
kontrollere erişebiliyor musunuz? Aksi takdirde, bu kontrollerin odaklanılabilirliğini iyileştirmek için tabindex kullanmanız gerekebilir.
Odağı sayfa düzeyinde yönetme
tabindex, bazen sorunsuz bir kullanıcı deneyimi oluşturmaya yardımcı olur. Örneğin, bazı içeriklerin sayfa yüklenirken farklı noktalarda gizlendiği, farklı içerik bölümlerine sahip sağlam tek bir sayfa oluşturursanız bu durumla karşılaşırsınız. Bu durum, gezinme bağlantılarının sayfa yenileme olmadan 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 Öğeler gibi durumlarda odağı kontrol düzeyinde de yönetmeniz gerekir.
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.
Sekme sırasına öğe ekleme
tabindex="0" kullanarak doğal sekme sırasına bir öğe ekleyin. Örneğin:
<div tabindex="0">Focus me with the TAB key</div>
Bir öğeye odaklanmak için Tab tuşuna basın veya öğenin focus() yöntemini çağırın.
Sekme sırasından bir öğeyi kaldırma
tabindex="-1" kullanarak bir öğeyi kaldırın. Örneğin:
<button tabindex="-1">Can't reach me with the TAB key!</button>
Bu işlem, bir öğeyi doğal sekme sırasından kaldırır ancak öğe, focus() yöntemini çağırarak odaklanmaya devam edebilir.
Bir öğeye tabindex="-1" uygulanması, alt öğelerini etkilemez. Sekme sırasında doğal olarak veya tabindex değeri nedeniyle sekme sırasında kalırlar.
Bir öğeyi ve tüm alt öğelerini sekme sırasından kaldırmak için WICG'nin inert çoklu dolgusunu kullanmayı düşünün.
Çoklu dolgu, önerilen bir inert özelliğinin davranışını emüle eder. Bu da öğelerin yardımcı teknolojiler tarafından seçilmesini veya okunmasını engeller.
tabindex > 0 kullanmaktan kaçının
0'dan büyük bir tabindex, öğeyi doğal sekme sırasının önüne atlar. 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şlar ve yukarı doğru ilerler.
0'dan büyük bir tabindex kullanılması, ekran okuyucular sayfada sekme sırasına göre değil, DOM sırasına göre gezindiği için kalıpsız bir kalıp olarak kabul edilir. Bir öğenin sekme sırasında daha erken gelmesi gerekiyorsa öğe DOM'de önceki bir noktaya taşınmalıdır.
Lighthouse ile, tabindex > 0 değerine sahip öğeleri tanımlayabilirsiniz. Erişilebilirlik Denetimi'ni (Lighthouse > Seçenekler > Erişilebilirlik) çalıştırın ve "Hiçbir öğenin [tabindex] değeri 0'dan büyük değil" denetiminin sonuçlarını bulun.
"Füzyon tabindex" etiketini kullan
Karmaşık bir bileşen oluşturuyorsanız odağın dışında ek klavye desteği eklemeniz gerekebilir. Mümkün olduğunda yerleşik select öğesini kullanın. Odaklanabilirdir ve ok tuşlarının seçilebilir ek seçenekler göstermesine olanak tanır.
Benzer işlevleri kendi bileşenlerinizde uygulamak için "fırsat tabindex" olarak bilinen bir teknik kullanabilirsiniz. Dönen sekme dizini, şu anda etkin olan hariç tüm alt öğeler için tabindex politikasını -1 değerine ayarlayarak çalışır. Daha sonra bileşen, kullanıcının hangi tuşa bastığını belirlemek için bir klavye etkinlik dinleyicisi kullanır.
Bu durumda bileşen, daha önce odaklanmış alt yayıncının tabindex değerini -1 olarak ayarlar, odaklanılacak alt öğenin tabindex değerini 0 olarak ayarlar ve bileşende focus() yöntemini çağırır.
Önce
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="0">Redo</button>
<button tabindex="-1">Cut</button>
</div>
Sonra
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="-1">Redo</button>
<button tabindex="0">Cut</button>
</div>
Klavye erişimi tarifleri
Özel bileşenleriniz için hangi klavye desteğinin gerekli olabileceğinden emin değilseniz ARIA Yazma Uygulamaları 1.1'e bakabilirsiniz. Bu kılavuzda, yaygın kullanıcı arayüzü kalıpları listelenmekte ve bileşenlerinizin hangi anahtarları desteklemesi gerektiği açıklanmaktadır.