Tabindex ile DOM sırasını değiştirme
Yerel öğelerin DOM konumu tarafından sağlanan varsayılan sekme sırası kullanışlı olsa da sekme sırasını değiştirmek isteyebileceğiniz durumlar da olabilir. Ancak öğelerin HTML içinde fiziksel olarak taşınması her zaman optimum, hatta uygulanabilir bir çözüm değildir. Bu durumlarda, bir öğenin sekme konumunu açık bir şekilde ayarlamak için tabindex HTML özelliğini kullanabilirsiniz.
tabindex, her öğeye uygulanabilir (ancak her öğede faydalı değildir) ve bir tam sayı değeri aralığı alır. tabindex özelliğini kullanarak odaklanılabilir sayfa öğeleri için açık bir sıra belirtebilir, normalde odaklanılamayan bir öğeyi sekme sırasına ekleyebilir ve sekme sırasından öğeleri kaldırabilirsiniz. Örneğin:
tabindex="0": Doğal sekme sırasına bir öğe ekler. Tab tuşuna basılarak öğeye odaklanabilir ve focus() yöntemini çağırarak öğeye odaklanabilirsiniz
<custom-button tabindex="0">Press Tab to Focus Me!</custom-button>
tabindex="-1": Bir öğeyi doğal sekme sırasından kaldırır, ancak focus() yöntemini çağırarak öğeye yine de odaklanabilir
// TODO: DevSite - Code sample removed as it used inline event handlers
// YAPILACAKLAR: DevSite - Kod örneği, satır içi etkinlik işleyicileri kullandığı için kaldırıldı
tabindex="5": 0'dan büyük olan sekme dizinleri, öğeyi doğal sekme sırasının önüne atlar. Sekme dizini 0'dan büyük olan birden çok öğe varsa sekme sırası, sıfırdan büyük olan en düşük değerden başlar ve yukarı doğru çalışır. 0'dan büyük bir sekme dizini kullanmak, anti kalıp olarak kabul edilir.
<button>I should be first</button>
<button>And I should be second</button>
<button tabindex="5">But I jumped to the front!</button>
Bu, özellikle başlıklar, resimler veya makale başlıkları gibi girdi olmayan öğeler için geçerlidir. Bu tür öğelere tabindex eklemek ters etki yaratır. Mümkünse kaynak kodunuzu, DOM sırasının mantıksal bir sekme sırası sağlayacağı şekilde düzenlemek en iyisidir. tabindex kullanırsanız düğmeler, sekmeler, açılır menüler ve metin alanları gibi özel etkileşimli kontrollerle, yani kullanıcının giriş sağlamayı bekleyebileceği öğelerle sınırlandırın.
Ekran okuyucuda tabindex bulunmadığından, ekran okuyucu kullanıcılarının önemli içerikleri kaçırması konusunda endişelenmeyin. İçerik, resim gibi çok önemli olsa bile kullanıcının etkileşime girebileceği bir şey değilse içeriği odaklanmaya teşvik etmek için bir sebep yoktur. Ekran okuyucu kullanıcıları, uygun alt özelliği desteğini sağladığınız sürece resmin içeriğini anlamaya devam edebilir. Bu konuyu birazdan ele alacağız.
Odağı sayfa düzeyinde yönetme
Aşağıda, tabindex ürününün yalnızca faydalı değil, gerekli olduğu bir senaryo verilmiştir. Hepsi aynı anda görünür olmayan, farklı içerik bölümlerine sahip sağlam bir tek sayfa oluşturuyor olabilirsiniz. Bu tür bir sayfada, gezinme bağlantısını tıklamak, sayfayı yenilemeden görünür içeriği değiştirebilir.
Bu durumda, muhtemelen seçilen içerik alanını tanımlar, doğal sekme sırasında görünmemesi için ona -1 değerini tabindex verir ve focus yöntemini çağırırsınız. Odağı yönetme adı verilen bu teknik, kullanıcının algılanan bağlamını sitenin görsel içeriğiyle senkronize tutar.
Bileşenlerde odağı yönetme
Sayfada bir şeyi değiştirirken odağı yönetmek önemlidir, ancak bazen odağı kontrol düzeyinde yönetmeniz gerekir (örneğin, özel bir bileşen oluşturuyorsanız).
Yerel select öğesini düşünün. Temel odağı alabilir, ancak bunu yaptıktan sonra ek işlevleri (seçilebilir seçenekler) ortaya çıkarmak için ok tuşlarını kullanabilirsiniz. Özel bir select öğesi oluşturuyorsanız daha çok klavyeden yararlanan kullanıcıların kontrolünüzle etkileşimde bulunabilmesi için bu tür davranışları açığa çıkarmak istersiniz.
<!-- Focus the element using Tab and use the up/down arrow keys to navigate -->
<select>
<option>Aisle seat</option>
<option>Window seat</option>
<option>No preference</option>
</select>
Hangi klavye davranışlarının uygulanacağını bilmek zor olabilir, ancak başvurabileceğiniz yararlı bir doküman bulunmaktadır. Erişilebilir Zengin İnternet Uygulamaları (ARIA) Yazma Uygulamaları kılavuzu, bileşen türlerini ve bunların desteklediği klavye işlemlerini listeler. ARIA'yı daha sonra ayrıntılı olarak ele alacağız ancak şimdilik yeni bir bileşene klavye desteği eklememize yardımcı olması için rehberi kullanalım.
Belki de bir dizi radyo düğmesine benzeyen ancak görünüm ve davranışınıza kendi tarzınızı katan yeni Özel Öğeler üzerinde çalışıyorsunuz.
<radio-group>
<radio-button>Water</radio-button>
<radio-button>Coffee</radio-button>
<radio-button>Tea</radio-button>
<radio-button>Cola</radio-button>
<radio-button>Ginger Ale</radio-button>
</radio-group>
Ne tür bir klavye desteğine ihtiyaç duyduklarını belirlemek için ARIA Yazma Uygulamaları kılavuzuna göz atabilirsiniz. 2. Bölüm, tasarım kalıplarının listesini içerir. Bu listede ise yeni öğenizle en iyi eşleşen mevcut bileşen olan radyo grupları için bir özellik tablosu bulunur.
Tabloda görebileceğiniz gibi, desteklenmesi gereken yaygın klavye davranışlarından biri yukarı/aşağı/sol/sağ ok tuşlarıdır. Bu davranışı yeni bileşene eklemek için roving tabindex adlı bir teknik kullanacağız.
Dönüşüm izleme sekme dizini, şu anda etkin olan alt öğe hariç tüm alt öğeler için tabindex değerini -1 olarak ayarlayarak çalışır.
<radio-group>
<radio-button tabindex="0">Water</radio-button>
<radio-button tabindex="-1">Coffee</radio-button>
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Bileşen, daha sonra kullanıcının hangi tuşa bastığını belirlemek için bir klavye etkinliği işleyicisi kullanır. Bu durumda, önceden odaklanılan alt öğenin tabindex değerini -1 olarak ayarlar, odaklanılacak alt öğenin tabindex değerini 0'a ayarlar ve buna odaklanma yöntemini çağırır.
<radio-group>
// Assuming the user pressed the down arrow, we'll focus the next available child
<radio-button tabindex="-1">Water</radio-button>
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Kullanıcı en son (veya odağı hareket ettirdiği yöne bağlı olarak ilk) çocuğa ulaştığında, döngü yapar ve ilk (veya son) çocuğa tekrar odaklanırsınız.
Tamamlanmış örneği aşağıdan deneyebilirsiniz. Sekme dizininin bir radyodan diğerine geçişi gözlemlemek için Geliştirici Araçları'ndaki öğeyi inceleyin.
// YAPILACAKLAR: DevSite - Kod örneği, satır içi etkinlik işleyicileri kullandığı için kaldırıldı
Bu öğenin kaynağını GitHub'da görüntüleyebilirsiniz.
Kalıcı iletişim kutuları ve klavye tutucular
Odağı yönetirken bazen gözünüzden kaçabilecek bir durumla karşılaşabilirsiniz. Odağı yönetmeye çalışan ve sekme davranışını yakalayan ancak işlem tamamlanana kadar kullanıcının sayfadan ayrılmasını engelleyen bir otomatik tamamlama widget'ını düşünün. Buna klavye tuzağı denir ve kullanıcı için son derece can sıkıcı olabilir. Web AIM kontrol listesinin 2.1.2 numaralı bölümü, klavye odağının hiçbir zaman belirli bir sayfa öğesine kilitlenmemeli veya sıkışmaması gerektiğini belirtecek şekilde bu sorunu ele alır. Kullanıcı, tüm sayfa öğeleri arasında yalnızca klavyeyi kullanarak gezinebilmelidir.
İşin tuhafı, modal pencerede olduğu gibi bu davranışın gerçekten istendiği zamanlar olabilir. Normalde, kalıcı iletişim kutusu görüntülendiğinde kullanıcının bunun arkasındaki içeriğe erişmesini istemezsiniz. Sayfayı görsel olarak örtecek bir yer paylaşımı ekleyebilirsiniz, ancak bu, klavye odağının yanlışlıkla kalıcı iletişim kutusunun dışına çıkmasını engellemez.
Bu gibi durumlarda, odağı yalnızca kalıcı öğe görüntülenirken yakaladığınızdan emin olmak için geçici bir klavye tuzağı uygulayabilir ve daha sonra, kalıcı öğe kapatıldığında odağı tekrar önceden odaklanılan öğeye geri döndürebilirsiniz.
Geliştiriciler için bunu nasıl kolaylaştıracak
<dialog>öğesi de dahil olmak üzere bazı öneriler vardır, ancak tarayıcı desteği henüz yaygın olarak sağlanmamaktadır.
<dialog>hakkında daha fazla bilgi için bu MDN makalesine, kalıcı pencereler hakkında daha fazla bilgi için bu kalıcı örneğe bakın.
Birkaç öğe içeren bir div ve arka plan yer paylaşımını temsil eden başka bir div ile temsil edilen kalıcı iletişim kutusu düşünün. Bu durumda geçici bir klavye tuzağı uygulamak için
gereken temel adımlara bakalım.
document.querySelectorkullanarak kalıcı ve yer paylaşımlı div'leri seçin ve referanslarını depolayın.- Kalıcı iletişim kutusu açıldığında, kalıcı öğe açıldığında odaklanılan öğeye bir referans depolayın. Böylece, odağı söz konusu öğeye döndürebilirsiniz.
- Kalıcı mod açıkken tuşlara basıldığında tuşları yakalamak için bir keydown işleyici kullanın. Ayrıca, arka plan yer paylaşımının tıklanmasını dinleyebilir ve kullanıcı tıkladığında kalıcı pencereyi kapatabilirsiniz.
- Ardından, kalıcı öğe içindeki odaklanılabilir öğelerin koleksiyonunu alın. Odaklanabilir ilk ve son öğeler, kalıcı iletişim kutusu içinde kalmak için odağı ne zaman ileriye veya geriye doğru döngüye alacağınızı size bildiren "zorlayıcı" görevi görür.
- Kalıcı pencereyi görüntüleyin ve odaklanılabilir ilk öğeye odaklanın.
- Kullanıcı
TabveyaShift+Tabtuşlarına basarken odağı uygun şekilde son veya ilk öğeleri döngüye alarak ileri veya geri hareket ettirin. - Kullanıcı
Esctuşuna basarsa kalıcı pencereyi kapatın. Bu, kullanıcının belirli bir kapatma düğmesi aramadan kalıcı pencereyi kapatmasına olanak tanıdığı ve fare kullanan kullanıcılar için bile yararlı olduğu için çok kullanışlıdır. - Kalıcı pencere kapatıldığında bunu ve arka plan yer paylaşımını gizleyin. Ardından, odağı daha önce kaydedilmiş olan önceden odaklanılmış öğeye geri getirin.
Bu prosedür size herkesin etkili bir şekilde kullanabileceği, kullanışlı, rahatsızlık vermeyen kalıcı bir pencere sunar.
Daha fazla ayrıntı için bu örnek kodu inceleyebilir ve tamamlanmış bir sayfadan canlı bir örnek görüntüleyebilirsiniz.