Sekme diziniyle odağı kontrol etme

Rob Dodson
Alexandra Klepper
Alexandra Klepper
X GitHub LinkedIn

<button> veya <input> gibi standart HTML öğeleri, yerleşik klavye erişimine sahiptir ve mümkün olduğunda kullanılmalıdır. Ancak her bir görev için özel etkileşimli öğeleri kullanarak, beklenen kullanıcı davranışını tabindex ekleniyor.

Tarayıcı Desteği

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.5.
  • Safari: 3.1.

Kaynak

Yalnızca etkileşimli içeriğe tabindex ekleyin. İçerik, ekran okuyucu kullanıcılarının bunu anlayabileceğinden dikkat ekliyorum.

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 öğedir 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. Öğ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 ilgili öğe yine de focus() yöntemini çağırarak odaklanabilir

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.

Kontrollerin klavyeden erişilebilir olmasını sağlama

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 öğesini kullanmanız gerekebilir.

Odağı sayfa düzeyinde yönetme

tabindex, bazen sorunsuz bir kullanıcı deneyimi oluşturmaya yardımcı olur. Örneğin, Farklı içerik bölümlerine sahip sağlam tek bir sayfa oluşturursanız İçerik, sayfa yüklenirken farklı noktalarda gizlenmiştir. Bunun anlamı şu olabilir: gezinme bağlantıları, sayfa yenileme olmadan görünür içeriği değiştirir.

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. Bu, içeriğin doğal sekme sıralaması. 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 odağı kontrol düzeyinde de yönetmeniz gerekir (örneğin, Özel Öğeler.

Hangi klavye davranışlarını uygulayacağınızı bilmek zor olabilir. İlgili içeriği oluşturmak için kullanılan Erişilebilir Zengin İnternet Uygulamaları (ARIA) Yazma Uygulamalar kılavuzunda bileşen türlerinin ve destekledikleri klavye işlemlerinin türleri listelenir.

Sekme sırasına öğe ekleme

Doğal sekme sırasına tabindex="0" kullanarak öğ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" 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 öğeleri etkilemez; sekme sırasında doğal olarak veya bir 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 polyfill'ini kullanabilirsiniz. Çoklu dolgu, önerilen bir inert özelliğinin davranışını emüle eder. Böylece öğelerin yardımcı teknolojiler tarafından seçilmesini veya okunmasını engelleyebilirsiniz.

tabindex > 0 kullanmaktan kaçının

0'dan büyük bir tabindex, öğeyi doğal sekmenin önüne atlar sipariş. tabindex değeri 0'dan büyük olan birden fazla öğe varsa sekme sıra, sıfırdan büyük en düşük değerden başlar ve yukarıya 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 öğe, sekme sırasında daha erken bir tarihte yer alacaksa önceki bir noktaya taşınmalıdır. kullanabilirsiniz.

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 ekstra klavye eklemeniz gerekebilir desteği sunmak çok önemlidir. 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.

Benzer işlevleri kendi bileşenlerinizde uygulamak için bilinen bir teknik kullanabilirsiniz. "araba tabindex" olarak tanındı. Hareketsiz sekme dizini, tabindex alanının -1 değerine ayarlanmasıyla çalışır şu anda etkin olan hariç tüm alt yayıncılar. 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 hangi düzeyde klavyeyi destekleyebileceğinden emin değilseniz söz konusu olduğunda ARIA Yazma Uygulamaları 1.1. Bu kılavuzda, yaygın kullanıcı arayüzü kalıpları listelenmiş ve bileşenlerinizin hangi anahtarları desteklemesi gerektiği belirtilmiştir.