Bu sayfa, Cloud Translation API ile çevrilmiştir.

Sekme diziniyle odağı kontrol etme

Rob Dodson

Alexandra Klepper

<button> veya <input> gibi standart HTML öğeleri, yerleşik klavye erişimine 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.

Tarayıcı desteği

Kaynak

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.

Sekme dizini 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 uygulanmalıdır 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": 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. 0'ten büyük bir sekme dizini kullanmak anti-pattern olarak kabul edilir.

Kontrollere klavyeden erişilebildiğinden emin olun

Lighthouse gibi araçlar, belirli erişilebilirlik sorunlarını otomatik olarak tespit etmede mükemmel olsa da bazı testlerin yine de gerçek kişiler tarafından manuel olarak yapılması gerekir.

Sitenizde gezinmek için Tab tuşuna basmayı deneyin. Sayfadaki tüm etkileşimli denetimlere ulaşabiliyor musunuz? Aksi takdirde, bu denetimlerin odaklanılabilirliğini iyileştirmek için tabindex simgesini kullanmanız gerekebilir.

Odağı sayfa düzeyinde yönetme

Bazen tabindex, sorunsuz bir kullanıcı deneyimi oluşturmanıza yardımcı olur. Örneğin, farklı içerik bölümlerinin bulunduğu güçlü bir tek sayfa oluşturursanız bazı içerikler sayfa yüklemenin farklı noktalarında gizlenir. Bu, gezinme bağlantılarının sayfa yenilenmeden 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 Öğeler gibi durumlarda olduğu gibi, odağı kontrol düzeyinde de yönetmeniz gerekir.

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.

Sekme sırasına öğe ekleme

tabindex="0" simgesini 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.

Bir öğeyi sekme sırasından kaldırma

tabindex="-1" simgesini 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öntemi çağrılarak yine de odaklanılabilir.

Bir öğeye tabindex="-1" uygulanması, alt öğelerini etkilemez. Alt öğeler, sekme sırasına doğal olarak veya bir tabindex değeri nedeniyle eklendiyse sekme sırasında kalır. Bir öğeyi ve tüm alt öğelerini sekme sırasından kaldırmak için WICG'nin inert polyfill'ini kullanabilirsiniz. Bu polyfill, önerilen bir inert özelliğinin davranışını taklit eder. Bu özellik, öğelerin yardımcı teknolojiler tarafından seçilmesini veya okunmasını engeller.

Dikkat: inert polyfill deneyseldir ve her durumda beklendiği gibi çalışmayabilir. Üretimde kullanmadan önce dikkatlice test edin.

`tabindex > 0` kullanmaktan kaçının

0'dan büyük bir tabindex değeri, öğ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şlar ve yukarı doğru ilerler.

Ekran okuyucular sayfada sekme sırasına göre değil DOM sırasına göre gezindiği için 0'dan büyük bir tabindex kullanmak anti-pattern olarak kabul edilir. Bir öğenin sekme sırasına daha erken gelmesi gerekiyorsa DOM'da daha önceki bir noktaya taşınmalıdır.

Lighthouse ile tabindex > 0 olan öğeleri tanımlayabilirsiniz. Erişilebilirlik denetimini (Lighthouse > Seçenekler > Erişilebilirlik) çalıştırın ve "Hiçbir öğe 0'dan büyük [tabindex] değeri içermiyor" denetiminin sonuçlarını arayın.

"`tabindex` gezgini"ni kullanma

Karmaşık bir bileşen oluşturuyorsanız odak dışında ek klavye desteği eklemeniz gerekebilir. Mümkün olduğunda yerleşik select öğesini kullanın. Odağı üzerine alınabilir ve ok tuşlarının ek seçilebilir seçenekler göstermesine olanak tanır.

Kendi bileşenlerinizde benzer işlevleri uygulamak için "gezinen tabindex" olarak bilinen bir tekniği kullanabilirsiniz. Gezinen sekme dizini, şu anda etkin olan hariç tüm çocuklar için tabindex değerini -1 olarak ayarlayarak çalışır. Ardından bileşen, kullanıcının hangi tuşa bastığını belirlemek için bir klavye etkinliği dinleyicisi kullanır.

Bu durumda bileşen, daha önce odaklanan alt öğenin tabindex değerini -1'e, odaklanılacak alt öğenin tabindex değerini 0'a ayarlar ve üzerinde 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şenlerinizin ne düzeyde klavye desteğine ihtiyaç duyabileceğinden emin değilseniz ARIA Yazarlık Uygulamaları 1.1'e bakabilirsiniz. Bu kılavuzda, yaygın kullanıcı arayüzü kalıpları listelenir ve bileşenlerinizin hangi anahtarları desteklemesi gerektiği açıklanır.