Sekme diziniyle odağı kontrol etme

Rob Dodson

Alexandra Klepper

<button> veya <input> gibi standart HTML öğelerinin klavyeden erişilebilirliği vardır yerleşik olarak bulunur 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.

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

Tabindex nedir?

Bazen, yerleşik olarak sağlanan varsayılan sekme sırasını değiştirmeniz gerekir öğelerinde tabindex HTML özelliğini kullanarak açıkça bir öğenin sekme konumuna gidin.

tabindex tüm öğelere uygulanabilir olsa da yalnızca öğedir ve bir dizi tam sayı değeri alır. Entegre tabindex, odaklanılabilir sayfa öğeleri için açık bir sıra belirtebilirsiniz. sekme sırasına başka bir şekilde odaklanılamayan bir öğe ekleme ve öğeleri kaldırma . Örneğin:

tabindex="0": Normal sekme sırasına bir öğe ekler. Öğe, Sekme tuşuna basarak odaklanılabilir. Öğeye odaklanabilmek için onun focus() yöntemi.

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 değerinden büyük tüm sekme dizini bu öğeyi öne getirir doğal sekme sırasındaki değişikliği ifade eder. Tabindex daha büyük olan birden fazla öğe varsa 0 değerine göre, sekme sırası sıfırdan büyük en düşük değerden başlar hız kazanıyor. 0 değerinden büyük bir sekme dizini kullanılması, anti-pattern.

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

Lighthouse gibi bir araç, belirli erişilebilirlik özelliklerinin otomatik olarak Ancak bazı testlerin yine de bir insan tarafından manuel olarak yapılması gerekir.

Sitenizde gezinmek için Tab tuşuna basmayı deneyin. Çalıştığınız her projede nasıl kontrol ediyor? Değilse tabindex odaklanılmasını sağlayabilirsiniz.

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çilen içerik alanını tanımlayın ve tabindex -1 ve focus yöntemini çağırın. Bu, içeriğin doğal sekme sıralaması. Odaklanmayı yönetme adı verilen bu teknik, Sitenin görsel içeriğiyle uyumlu olarak, kullanıcının algılanan bağlamı.

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" 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 yine de focus() yöntemini çağırarak odaklanılır.

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 çoklu dolgusu. Ç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.

0'dan büyük bir tabindex kullanılması anti-model olarak kabul edilir, çünkü Ekran okuyucular sayfada sekme sırasına göre değil, DOM sırasına göre gezinir. Bir öğe, sekme sırasında daha erken bir tarihte yer alacaksa daha önceki bir noktaya taşınmalıdır. kullanabilirsiniz.

Lighthouse ile, öğeleri tabindex > 0 Erişilebilirlik Denetimi'ne (Lighthouse > Seçenekler > Erişilebilirlik) gidin ve "Hiçbir öğe 0'dan büyük bir [tabindex] değerine sahip değil" sonuçları denetli.

"Füzyon tabindex" etiketini kullan

Karmaşık bir bileşen oluşturuyorsanız ekstra klavye eklemeniz gerekebilir desteği sunmak çok önemli. Mümkün olduğunda yerleşik select öğesini kullanın. İnsanların odaklanılabilir ve ok tuşlarının seçilebilir ek öğeler göstermesine olanak tanır seçenekleri vardı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. Bileşen, daha sonra kullanıcının hangi tuşa bastığını belirlemek için etkinlik işleyiciyi kullanın.

Bu durumda bileşen, önceden odaklanılan alt öğenin tabindex -1 olarak, belirli bir hedefe odaklanan çocuğun tabindex değerini 0 olarak ayarlar ve focus() çağrısını yapar. yöntemini de ekleyebilirsiniz.

Ö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ı ve hangi olması gerekenden bahsedelim.