Geliştirici geri bildirimi isteği: focusgroup

Jacques Newman

Yayınlanma tarihi: 5 Mart 2026

focusgroup HTML özelliği, gezinme JavaScript'i yazmadan araç çubukları, sekme listeleri, menüler, liste kutuları gibi bileşik widget'lara klavye ok tuşuyla gezinme özelliği eklemek için önerilen bir bildirimsel yöntemdir. Bir özellik, yüzlerce satırlık standart metnin yerini alır. Bu özellik kullanıma sunulmadan önce geri bildirimlerinizi bekliyoruz.

Deneyip geri bildirimlerinizi bizimle paylaşın

focusgroup'ı bugün Chrome, Edge ve diğer Chromium tarayıcılarda iki şekilde etkinleştirerek deneyebilirsiniz:

1. Yerel test: Tarayıcıda about://flags sayfasını açın ve Deneysel Web Platformu özellikleri işaretini etkinleştirin. Alternatif olarak, --enable-blink-features=Focusgroup komut satırı parametresini kullanarak tarayıcıyı komut satırından başlatın.
2. Kaynak denemesi: Sitenizde gerçek kullanıcılarla test etmek için focusgroup kaynak denemesine kaydolun.

Ardından, her kalıbın nasıl çalıştığını görmek için etkileşimli demoları inceleyin.

Görüşlerinize ihtiyacımız var. Düşüncelerinizi bizimle paylaşmak için odak grubu sorunu bildirin.

Bu, tarayıcılar arası bir çalışmadır: Öneri, Microsoft tarafından OpenUI Community Group aracılığıyla Google'ın güçlü desteğiyle birlikte sunulmuştur. API şekli, geri bildirimlerinize göre değişebilir. Focusgroup'un çözdüğü sorunu ve API'nin nasıl çalıştığını inceleyelim.

Sorun: Manuel olarak dolaşan tabindex

Daha önce araç çubuğu, tablist, menü veya listbox oluşturduysanız bu kodun bir sürümünü yazmışsınızdır. ARIA Authoring Practices Guide (APG), bileşik widget'ların tek bir sekme durağı sunmasını ve kullanıcıların ok tuşlarıyla öğeler arasında hareket etmesini önerir. Bu desen, "dolaşan tabindex" olarak bilinir. Birçok kullanıcı arayüzü çerçevesi bunu sıfırdan yeniden uygular:

<div role="toolbar" aria-label="Text formatting" id="toolbar">
  <button type="button" tabindex="0">Bold</button>
  <button type="button" tabindex="-1">Italic</button>
  <button type="button" tabindex="-1">Underline</button>
  <button type="button" tabindex="-1">Strikethrough</button>
</div>

Buradan itibaren geliştiricilerin, odağı taşımak için ok tuşlarını dinleyen JavaScript'i kullanması ve tüm öğeler için tabindex özelliğini ayarlaması gerekir. Bu, basitleştirilmiş sürümdür. Üretim uygulaması ayrıca şunları da ele almalıdır:

• Yazma modu ve sağdan sola (RTL): Ok tuşlarının yönünü içeriğin yönüne göre ayarlayın.
• Son odaklanılan öğe belleği: Kullanıcı Tab tuşuna tekrar bastığında odağı daha önce etkin olan öğeye geri yükleyin.
• Devre dışı bırakılmış ve gizlenmiş öğeler: Navigasyon sırasında bu öğeler atlanır.
• Dinamik öğeler: Öğeler eklendiğinde veya kaldırıldığında hareketli indeksi güncelleyin.

React, Angular CDK ve Fluent UI dahil olmak üzere çoğu kullanıcı arayüzü kitaplığı, bu mantığın kendi sürümünü gönderir. Bu, platformun temel öğesi olabilecek bir şeyi elde etmek için çok fazla tekrarlanan çaba anlamına geliyor.

Çözüm: focusgroup özelliği

focusgroup ile aynı araç çubuğu şu hale gelir:

<div focusgroup="toolbar" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
  <button type="button">Strikethrough</button>
</div>

Canlı olarak deneyin: Araç çubuğu deseni > Temel araç çubuğu. Bu kadar basit. Ok tuşlarıyla gezinmek için JavaScript kullanılmaz. Manuel tabindex yönetimi yoktur. Tarayıcı artık sizin için şunları yapar:

• Ok tuşlarıyla gezinme: Yazma moduna ve yönüne uygun şekilde öğeler arasında gezinin.
• Tek bir sekme durağı: Tarayıcı, katılan öğeleri otomatik olarak tek bir sekme durağında daraltır. Geliştiricilerin etkin olmayan öğelerde tabindex="-1" ayarını etkinleştirmesi gerekmez.
• Son odaklanılan öğe belleği: Bir kullanıcı odaklanma grubundan ayrılıp geri döndüğünde odak, ayrıldığı öğeye geri yüklenir.
• ARIA semantiği: Tarayıcı, genel öğeler kullanıldığında seçilen davranışa göre uygun rolleri (ör. role="toolbar") sağlar.

Geliştiriciler yalnızca özelliklerine özgü mantığı (ör. basılı durumu değiştirme, menüleri açma, seçimi yönetme veya özel komutlar) korur.

API'ye genel bakış

focusgroup özelliği, boşlukla ayrılmış bir jeton listesi alır. İlk jeton her zaman widget kalıbını bildiren bir davranış jetonudur. İsteğe bağlı değiştirici jetonlar şunlardır: focusgroup="<behavior> [inline|block] [wrap] [nomemory]".

Davranış jetonları

Davranış jetonu gereklidir (none kullanılarak üst odak grubunun kapsamı dışında bırakılmadığı sürece). Birleşik widget kalıbını bildirerek başka şekilde belirtilmediğinde doğru rollerin çıkarılmasını sağlar. Jetonlar, Aria Authoring Practices Guide'da açıklanan ve aşağıdaki tabloda listelenen kalıplara uyar:

Rol eşlemenin işleyiş şekliyle ilgili tüm ayrıntılar için açıklayıcı metne bakın.

Eksen kısıtlaması (inline ve block)

Seçilen davranışın varsayılan değiştiricileri yoksa odak taşımak için dört ok tuşunun tümü kullanılabilir. inline veya block değiştiricisini kullanarak gezinmeyi tek bir mantıksal eksenle kısıtlayabilirsiniz:

• inline: focusgroup yalnızca satır içi eksendeki ok tuşlarına yanıt verir. Çoğu İngilizce bağlamda bu tuşlar sola ve sağa (yatay, yukarıdan aşağıya) hareket ettirir.
• block: Odak grubu yalnızca blok eksenindeki ok tuşlarına yanıt verir. Çoğu İngilizce bağlamda yukarı ve aşağı (yatay, yukarıdan aşağıya).

Eksen kısıtlaması, CSS mantıksal özellikleriyle uyumludur ve yazma moduna ve yönüne göre otomatik olarak uyarlanır.

Sarmalama navigasyonu

Varsayılan olarak, ok tuşlarıyla gezinme odak grubunun kenarlarında durur. Son öğeden ilk öğeye (ve ilk öğeden son öğeye) döngü oluşturmak için wrap değiştiricisini ekleyin. Varsayılan olarak sarmalama davranışına sahip bir davranışta bu davranışı devre dışı bırakmak için nowrap değiştiricisini kullanın.

Canlı olarak deneyin: Tablist Pattern > Horizontal Tablist with Wrapping. Bu örnekte, odak SSS sekmesindeyken kullanıcı sağ ok tuşuna bastığında odak Genel Bakış sekmesine geri döner.

focusgroupstart özelliği

focusgroupstart özelliği, odaklanma grubuna ilk kez (veya bellek devre dışı bırakıldığında her seferinde) sekme tuşuyla geçiş yapıldığında hangi öğenin odaklanacağını işaretler:

<div focusgroup="toolbar nomemory" aria-label="Entry point demo">
  <button type="button">First</button>
  <button type="button" focusgroupstart>Middle (Entry)</button>
  <button type="button">Last</button>
</div>

Sekme ve Üst Karakter+Sekme tuşları, focusgroupstart içerdiğinden "Orta (Giriş)"e odaklanır ve nomemory değiştiricisiyle bellek devre dışı bırakılır. Canlı olarak deneyin: Toolbar Pattern > Entry Point with focusgroupstart.

Hafızayı devre dışı bırakma (nomemory)

Varsayılan olarak, focusgroups son odaklanılan öğeyi hatırlar ve Tab tuşuyla yeniden girildiğinde geri yükler. Odağın her zaman sabit bir giriş noktasına döndürülmesi gereken desenler (ör. önceki demoda olduğu gibi) için, devre dışı bırakmak üzere focusgroup özelliğinde nomemory değiştiricisini kullanın.

Bu değiştirici, focusgroupstart öğesinin programatik hareketiyle de birleştirilerek gruba girildiğinde odaklanan öğe üzerinde tam kontrol sahibi olmanızı sağlayabilir. Hatırlanan öğe kullanılamaz hale geldiğinde (ör. kaldırılırsa, gizlenirse, devre dışı bırakılırsa, etkisiz hale getirilirse veya odak grubundan hariç tutulursa) bellek temizlenir.

Kapsam dışında kalma (focusgroup="none")

Bir öğeyi ve alt ağacını üst odak grubunun okla gezinme özelliğinden hariç tutmak için focusgroup="none" öğesini kullanın. Kapsama alınmayan öğe ve alt ağacına Sekme tuşuyla erişilebilir ancak ok tuşlarıyla bu öğeler atlanır:

<div focusgroup="toolbar" aria-label="Segmented toolbar">
  <button type="button">New</button>
  <button type="button">Open</button>
  <button type="button">Save</button>
  <span focusgroup="none">
    <button type="button">Help</button>
    <button type="button">Shortcuts</button>
  </span>
  <button type="button">Close</button>
  <button type="button">Exit</button>
</div>

Sağ ok tuşuyla Yeni, Aç, Kaydet, Kapat ve Çıkış'a gidilirken Yardım ve Kısayollar düğmeleri tamamen atlanıyor. Ancak kullanıcılar, bu düğmelere erişmek için yardım bölümüne sekme tuşuyla gidebilir. Canlı olarak deneyin: Ek Kavramlar > focusgroup="none" parametresine sahip segmentleri devre dışı bırakma.

Sık kullanılan desenler

Tablist

Sekmeler arasında ok tuşlarıyla gezinme özelliği olan bir sekme kontrolü.

<div focusgroup="tablist nomemory" aria-label="Sections">
  <button type="button" aria-selected="true" aria-controls="panel-overview" id="tab-overview" focusgroupstart>Overview</button>
  <button type="button" aria-selected="false" aria-controls="panel-features" id="tab-features">Features</button>
  <button type="button" aria-selected="false" aria-controls="panel-pricing" id="tab-pricing">Pricing</button>
  <button type="button" aria-selected="false" aria-controls="panel-faq" id="tab-faq">FAQ</button>
</div>
<div role="tabpanel" id="panel-overview" aria-labelledby="tab-overview" tabindex="0">...</div>
<div role="tabpanel" id="panel-features" aria-labelledby="tab-features" tabindex="0">...</div>
<div role="tabpanel" id="panel-pricing" aria-labelledby="tab-pricing" tabindex="0">...</div>
<div role="tabpanel" id="panel-faq" aria-labelledby="tab-faq" tabindex="0">...</div>

Canlı olarak deneyin: Tablist Pattern > Horizontal Tablist with Wrapping.

Dikkat edilmesi gerekenler:

• focusgroupstart özelliği seçili sekmede olduğundan odak her zaman buraya girer.
• nomemory değiştiricisi, kullanıcı daha önce farklı bir sekmeye odaklanmış olsa bile yeniden girişin her zaman seçilen sekmeye yapılmasını sağlar.
• inline değiştiricisi, okla gezinmeyi yalnızca sol ve sağ tuşlarla sınırlar. Bu, APG Tabs pattern tarafından belirtilen beklenen davranışla eşleşir.
• wrap değiştiricisi, kullanıcıların tüm sekmelerde ok tuşlarını sürekli olarak kullanmasına olanak tanır.
• Kısa olması için atlanan geliştirici kodu, gerçek seçimi işler: aria-selected güncelleme, panel görünürlüğünü değiştirme ve seçim değişikliğinde focusgroupstart özelliğini taşıma.

Menü ve menü çubuğu

Yukarı ve aşağı oklarla gezinilen basit bir dikey menü.

<div focusgroup="menu" aria-label="File actions" class="menu-vertical">
    <button type="button" class="menu-item">New</button>
    <button type="button" class="menu-item">Open…</button>
    <button type="button" class="menu-item">Save</button>
    <button type="button" class="menu-item">Exit</button>
</div>

Canlı olarak deneyin: Menü ve Menü Çubuğu Deseni > Basit Dikey Menü. block değiştiricisiyle yalnızca yukarı ve aşağı ok tuşları öğeler arasında gezinmek için kullanılır. Sol ve sağ ok tuşları, tanımladığınız davranışlar (ör. alt menüleri açma) için ücretsizdir. İç içe yerleştirilmiş alt menüleri olan bir menü çubuğunda her seviye bağımsız bir odak grubudur. Canlı olarak deneyin: Menü ve menü çubuğu deseni > Popover alt menüleri olan menü çubuğu

<ul role="menubar" focusgroup="menubar"
     aria-label="Application Menu" class="menubar">
    <li role="none">
        <button role="menuitem" type="button" class="menubar-item"
             aria-haspopup="menu" aria-expanded="false"
             popovertarget="filemenu">File</button>
        <ul role="menu" focusgroup="menu"
             id="filemenu" popover aria-label="File submenu" class="submenu">
            <li role="none"><button type="button" class="submenu-item"
                 autofocus>New</button></li>
            <li role="none"><button type="button" class="submenu-item">Open</button></li>
            <li role="none"><button type="button" class="submenu-item">Save</button></li>
        </ul>
    </li>
    <!-- More menu items... -->
</ul>

Canlı olarak deneyin: Menü ve menü çubuğu deseni > Popover alt menüleri olan menü çubuğu. Menü çubuğunda sol ve sağ gezinme için inline değiştiricisi kullanılırken alt menülerde yukarı ve aşağı gezinme için block değiştiricisi kullanılır. İç içe yerleştirilmiş odak grupları tamamen bağımsızdır ve birbirini etkilemez.

Radiogroup

Ok tuşuyla gezinme ve tam stil kontrolü içeren özel bir radyo grubu.

<div focusgroup="radiogroup" aria-label="Favorite color">
  <span aria-checked="false" tabindex="0">Red</span>
  <span aria-checked="false" tabindex="0">Green</span>
  <span aria-checked="true" tabindex="0" focusgroupstart >Blue</span>
  <span aria-checked="false" tabindex="0">Purple</span>
</div>

Canlı olarak deneyin: Radyo düğmesi grubu deseni > Karşılaştırma: Yerel ve odak grubu.

focusgroup özelliği ok tuşuyla gezinmeyi sağlarken seçim kodunu uygulamanız gerekir. Bu demoda, JavaScript kodu işaretli durumu (aria-checked özelliği kullanılarak) yönetir.

Temel kavramlar

Focusgroup öğe katılımı

Geçerli bir davranışa ayarlanmış focusgroup özelliğine sahip öğenin tüm sırayla odaklanılabilir alt öğeleri, bu odaklanma grubuna katılıyor olarak kabul edilir. Bu, negatif tabindex değerine sahip öğelerin dikkate alınmadığı ancak <button> gibi doğal olarak odaklanılabilir öğelerin ve negatif olmayan bir tabindex değeri belirttiğiniz öğelerin dikkate alındığı anlamına gelir.

Sekme durağı

tabindex değerlerini yönetmeniz gerekmez. Birden fazla alt öğe doğal olarak sekmeyle gezilebilir olsa bile (örneğin, birkaç <button> öğesi), focusgroup bunları tek bir sekme durağına daraltır. Tarayıcı, herhangi bir zamanda hangi öğenin sekme ile erişilebilir olduğunu belirler. Canlı olarak deneyin: Araç çubuğu deseni > tabindex yönetimi gerekmez.

Son odaklanılan bellek

Varsayılan olarak, bir kullanıcı odak grubundan ayrılmak için Sekme tuşuna bastığında ve daha sonra tekrar Sekme tuşuna bastığında odak, son odaklanılan öğeye döner. Bu, kullanıcıların yerlerini kaybetmemesi için büyük listeler ve araç çubukları açısından kritik öneme sahiptir. Odak her zaman ilk öğeye geri yüklensin istediğinizde veya focusgroupstart kullanıyorsanız başlangıçta odaklanan öğeyi kontrol etmek için nomemory değiştiricisini kullanarak bu davranışı devre dışı bırakın.

İç içe yerleştirilmiş odak grupları

Her odak grubu bildirimi bağımsız bir kapsam oluşturur. İç içe yerleştirilmiş bir odak grubu, üst öğesinin okla gezinme özelliğini otomatik olarak devre dışı bırakır. Odak grupları arasında geçiş yapmak için Sekme tuşunu, geçerli odak grubu içinde gezinmek için ok tuşlarını kullanın. Canlı olarak deneyin: Ek Kavramlar > İç İçe Odak Grupları.

Shadow DOM desteği

Focusgroup, varsayılan olarak gölge DOM sınırları arasında geçerlidir. Bir gölge ana makinesinde bildirilen bir focusgroup, bu ana makinenin gölge ağacında odaklanılabilir öğeler içerir. Kapsam dışında kalmak istiyorsanız bileşeninizin gölge ağacında focusgroup="none" kullanabilirsiniz.

Anahtar çakışmasını yönetme

Bir focusgroup içindeki bazı öğeler (ör. <input>, <textarea> ve diğer kontroller) kendi amaçları için ok tuşlarını kullanır. Odak grubunun gezinme tuşları ile yerel bir öğenin ok tuşu davranışı arasında çakışma olduğunda:

• Etkileşimli öğe (örneğin, metin imlecinin hareketi için) ok tuşlarını kullanır ve focusgroup buna müdahale etmez.
• Sekme veya Üst Karakter+Sekme, kullanıcının odak grubuna "yeniden girmesine" olanak tanıyan varsayılan bir çıkış mekanizması sağlar.

Bu kaçış davranışları yalnızca gerçek bir tuş çakışması olduğunda geçerlidir. Çakışmayan eksenler etkilenmez. Ayrıca, belirli öğeler için focusgroup'un ok tuşu davranışını geçersiz kılmak üzere preventDefault() on keydown etkinliklerini de çağırabilirsiniz. Bu, her iki davranışı da bozmadan bir focusgroup'un içine girişler ve metin alanları ekleyebileceğiniz anlamına gelir.

Odak grubuna katılan kendi öğelerinize tuş işleyiciler ekliyorsanız kullanıcıların grubun geri kalanına erişebilmesi için benzer bir kaçış mekanizması sağladığınızdan emin olun.

Derin alt öğe keşfi

Focusgroup öğelerinin, focusgroup kapsayıcısının doğrudan alt öğeleri olması gerekmez.

Tarayıcı, iç içe yerleştirilmiş bir focusgroup içinde olmadıkları veya focusgroup="none" ile devre dışı bırakılmadıkları sürece, odak grubuna katılmak için tüm sırayla odaklanılabilir alt öğeleri (negatif olmayan tabindex) dikkate alır.

<div focusgroup="toolbar" aria-label="Nested wrappers">
  <div>
    <span>
      <button type="button">Alpha</button>
    </span>
    <span>
      <button type="button">Beta</button>
    </span>
    <span>
      <button type="button">Gamma</button>
    </span>
  </div>
</div>

Düğmeler <div> ve <span> sarmalayıcılarının içine yerleştirilmiş olsa bile ok tuşlarıyla gezinme çalışır. Düz liste şartı olmadığından stil oluşturma için sarmalayıcı öğeler kullanılabilir.

Canlı olarak deneyin: Ek Kavramlar > Derin Alt Öğeler.

reading-flow mülküyle entegrasyon

Hem sıralı (Tab) hem de yönlü (ok tuşu) gezinme, varsa CSS reading-flow özelliğine uyar ve DOM kaynak sırası yerine görsel okuma sırasını takip eder.

Bu sayede ok tuşuyla gezinme, kullanıcıların ekranda gördüğü düzenle eşleşir.

<div focusgroup="toolbar" aria-label="Visual order"
     style="display: flex; flex-direction: row-reverse; reading-flow: flex-visual;">
  <button type="button">A (DOM first)</button>
  <button type="button">B (DOM second)</button>
  <button type="button">C (DOM third)</button>
</div>

DOM sırası A, B, C iken düzen flex-direction: row-reverse kullandığı için görsel sıra C, B, A'dır. Ancak kodda reading-flow: flex-visual da kullanıldığından okuma sırası tekrar A, B, C olarak değişir ve focusgroup bu sıraya uyar.

Sekme tuşuna basıldığında önce C'ye, ardından sağ tuşuna basıldığında sırasıyla B'ye ve A'ya odaklanılır. Canlı olarak deneyin: Ek Kavramlar > CSS okuma akışı entegrasyonu.

Erişilebilirlik

ARIA Rolü Çıkarımı

Bir odak grubunda, tarayıcı hem kapsayıcı hem de katılımcı öğeler için minimum bir rolü tahmin etmek üzere davranış jetonunu kullanır. Bu, genel bir role sahip bir öğede focusgroup özelliği ayarlandığında, seçilen davranışa göre doğru rolün uygulanacağı anlamına gelir. Öğenin, genel bir role sahip olan katılımcı öğelerinin veya belirttiğiniz role sahip olmayan düğmelerinin rolleri buna göre çıkarılır. Örneğin, aşağıdaki HTML:

<div focusgroup="tablist">
  <button>Tab 1</button>
  <button>Tab 2</button>
  <button>Tab 3</button>
</div>

Düğmelerde rol tanımlanmamış olsa bile aşağıdaki erişilebilirlik ağacını oluşturur:

+   tablist
  |
  +   tab
  |
  +   tab
  |
  +   tab

Rolü doğrudan ayarlayarak davranışı istediğiniz zaman kontrol edebilirsiniz.

Erişilebilirlikle ilgili dikkat edilmesi gereken noktalar

Bir odak grubu oluştururken seçtiğiniz davranışa uymaya özen gösterin.

Focusgroup kullanımı, belirttiğiniz davranışla mümkün olduğunca uyumlu olmalıdır. Bu, erişilebilirlik araçlarını kullanan kullanıcıların içerikte gezinmesini ve özel kontrolleri kullanmasını sağlamak için önemlidir.

Rol çıkarımı iyi varsayılanlar sağlasa da genel olmayan rollere sahip öğeler kullanırken sağladıkları işlev için uygun rolün ayarlandığından emin olun.

focusgroup özelliğini kullanırken kullanıcıların içeriğinizi görüntülemek için ok tuşlarıyla kaydırma yapması gerekebileceğini unutmayın. Klavye kullanıcıları, sayfanızdaki içeriği her zaman okuyabilmeli ve içeriğe erişebilmelidir.

Özellik algılama

focusgroup'u tarayıcılarda tam olarak desteklenmeden önce kullanmaya başlamak için JavaScript'te focusgroup desteğini algılayabilirsiniz:

if ('focusgroup' in HTMLElement.prototype) {
  // focusgroup is supported.
} else {
  // fall back to manual roving tabindex.
}

Sonuç

focusgroup özelliği, standart kuruluşlar tarafından değerlendirilmektedir. Bu nedenle, Chromium'da prototipi aktif olarak oluşturuyor ve API'yi iyileştiriyoruz.

Deneyin ve Open-UI GitHub Issue Tracker'da bir odak grubu sorunu bildirin. Özellikle aşağıdaki konulardaki görüşlerinizi merak ediyoruz:

• API yüzeyi, oluşturduğunuz kalıplar için uygun mu?
• Gözden kaçırdığımız kalıplar veya senaryolar var mı?
• focusgroup özelliğinin kullanılmasına izin verilmemesi gereken öğeler var mı?
• Erişilebilirlik hikayesi, kullanım alanlarınızda nasıl işe yarar?

İnternette klavye ile gezinmeyi daha iyi hale getirmemize yardımcı olduğunuz için teşekkür ederiz.

Daha fazla bilgi

• Focusgroup Explainer
• Etkileşimli Demolar (kaynak)
• WHATWG HTML Sorunu
• Open UI Focusgroup Issues
• ARIA Authoring Practices Guide (ARIA İçerik Oluşturma Uygulamaları Kılavuzu)

focusgroup'u geri getirmemize yardımcı olan Mason Freed, Sara Higley, Scott O'Hara ve Open-UI topluluğunun diğer üyelerine teşekkür ederiz.