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.

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.

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 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": 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 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. 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 kontrollerin odaklanılabilirliğini iyileştirmek için tabindex 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 -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 Öğ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, 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. 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.

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.

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 odağın dışında ek klavye desteği eklemeniz gerekebilir. Mümkün olduğunda yerleşik select öğesini kullanın. Odaklanabilir ve ok tuşlarının seçilebilir ek 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 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ş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ı listelenmiş ve bileşenlerinizin hangi anahtarları desteklemesi gerektiği belirtilmiştir.