Sekme diziniyle odağı kontrol etme

Rob Dodson

Alexandra Klepper

<button> veya <input> gibi standart HTML öğelerinde klavye erişimi yerleşik olarak bulunur 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çeriklere tabindex ekleyin. Önemli içerikler (ör. anahtar resim) için bile ekran okuyucu kullanıcıları, odak eklemeden 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 uygulanmalı ve bir dizi tam sayı değeri almalıdır. tabindex ile odaklanılabilir sayfa öğeleri için açık bir sıra belirtebilir, aksi takdirde 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 basılarak odaklanılabilir ve öğenin focus() yöntemi çağrılarak odaklanılabilir.

tabindex="-1": Bir öğeyi doğal sekme sırasından kaldırır ancak öğe, focus() yöntemi çağrılarak odaklanmaya devam edebilir.

tabindex="5": 0'den büyük herhangi bir tabindex, söz konusu öğ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şlayıp yukarı doğru devam eder. 0 değerinden büyük bir tabindex kullanmak anti-pattern olarak kabul edilir.

Kontrollerin klavye ile erişilebilir olduğundan emin olun

Lighthouse gibi bir araç, belirli erişilebilirlik sorunlarını otomatik olarak algılamada mükemmeldir ancak bazı testlerin yine de bir kişi tarafından manuel olarak yapılması gerekir.

Sitenizde gezinmek için Tab tuşuna basmayı deneyin. Sayfadaki tüm etkileşimli kontrolleri kullanabiliyor musunuz? Aksi takdirde, bu kontrollerin odaklanılabilirliğini artırmak için tabindex kullanmanız gerekebilir.

Odaklanmayı sayfa düzeyinde yönetme

Bazen tabindex, sorunsuz bir kullanıcı deneyimi oluşturmaya yardımcı olur. Örneğin, farklı içerik bölümleri içeren sağlam bir tek sayfa oluşturduğunuzu ve sayfa yükleme sürecinin farklı noktalarında bazı içeriklerin gizlendiğini varsayalım. 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çilen içerik alanını belirleyin ve tabindex değerini -1 olarak ayarlayıp 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, odaklanmayı kontrol düzeyinde de yönetmeniz gerekir. Örneğin, özel öğeler ile.

Hangi klavye davranışlarının uygulanacağını 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" 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öntemi çağrılarak odaklanmaya devam edebilir.

Bir öğeye tabindex="-1" uygulanması, alt öğelerini etkilemez. Alt öğeler, doğal olarak veya tabindex değeri nedeniyle sekme sırasındaysa sekme sırasındaki yerlerini korur. Bir öğeyi ve tüm alt öğelerini sekme sırasından kaldırmak için WICG'nin inert polyfill'ini kullanabilirsiniz. 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 herhangi bir tabindex değeri, öğeyi doğal sekme sırasının en önüne taşır. 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şlayarak artar.

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 değeri kullanmak anti-pattern olarak kabul edilir. Sekme sırasına daha önce dahil edilmesi gereken bir öğe varsa bu öğe, DOM'da daha önceki bir yere taşınmalıdır.

Lighthouse ile tabindex > 0 olan öğeleri belirleyebilirsiniz. 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ı inceleyin.

"Dolaşan tabindex" özelliğini kullanma

Karmaşık bir bileşen oluşturuyorsanız odaklanmanın yanı sıra ek klavye desteği de eklemeniz gerekebilir. Mümkün olduğunda yerleşik select öğesini kullanın. Odaklanılabilir ve ok tuşlarıyla ek seçilebilir seçeneklerin gösterilmesine olanak tanır.

Kendi bileşenlerinizde benzer işlevleri uygulamak için "gezici tabindex" olarak bilinen bir teknik kullanabilirsiniz. Gezici tabindex, şu anda etkin olan hariç tüm alt öğeler 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 etkinlik dinleyicisi kullanır.

Bu durumda bileşen, daha önce odaklanılan alt öğenin tabindex özelliğini -1 olarak, odaklanılacak alt öğenin tabindex özelliğini 0 olarak 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şimiyle kullanılabilen tarifler

Özel bileşenlerinizin hangi düzeyde klavye desteğine ihtiyaç duyduğundan emin değilseniz ARIA Authoring Practices 1.1'e (ARIA 1.1 Yazma Uygulamaları) göz atabilirsiniz. Bu kılavuzda, yaygın kullanıcı arayüzü kalıpları listelenir ve bileşenlerinizin hangi tuşları desteklemesi gerektiği belirtilir.