Odak Sırası

Kısaca

Tab'a bastığınızda odak mantıklı bir sırayla ilerlemelidir: genellikle yukarıdan aşağıya ve soldan sağa, içeriği izleyerek. Odak ilk alandan sonuncuya ya da sayfanın başındaki bir menüye atlıyorsa klavye kullanıcıları yerlerini kaybeder ve formları yanlış verilerle gönderebilir.

Bu kriter, bir sayfada sıralı gezinme yapılabiliyorsa ve sıralar anlamı ya da işleyişi etkiliyorsa, odaklanabilir bileşenlerin anlamı ve işletilebilirliği koruyan bir sırayla odak almasını ister. Birden çok geçerli sıra olabilir, ama bir tanesi sağlanmalıdır.

Neleri kapsar?

• Sıralı gezinme: Odağı Tab ve Shift+Tab ile öğeden öğeye taşımak. Ağaç ya da menü gibi bir bileşenin içindeki ok tuşlu gezinme, bu kriterin kapsadığı sıra değildir.
• Anlam ve işletilebilirlik: Sıra içeriğin mantıksal ilişkilerini izlemelidir. Kullanıcılar sayfayı hâlâ anlayıp işletebiliyorsa odak sırası okuma sırasından farklı olabilir.
• DOM sırası: Doğru yapmanın en basit yolu DOM sırasını görsel sırayla eşleştirmektir (C27).
• İletişim kutuları ve menüler: Kipli olmayan bir iletişim kutusu ya da menü odak sırasında tetikleyicisinin hemen ardından gelmelidir. Kipli bir iletişim kutusu açıldığında odağı alır, geri kalanı etkisiz tutar ve kapandığında odağı tetikleyiciye geri verir.
• Dinamik içerik: Bir eylemden sonra eklenen içerik, onu tetikleyen kontrolün yanına eklenmeli (SCR26) ya da odak ona taşınmalıdır.
• İhlaller: Sırayı karıştıran pozitif tabindex değerleri (F44) ve tetikleyicilerine bitişik olmayan iletişim kutuları ya da menüler (F85).
• Kapsam dışı notlar: Okuma sırası 1.3.2'dir. Odağı görünür kılmak 2.4.7'dir. Klavyeyle işletme 2.1.1'dir.

Kimleri etkiler?

Odak sırasını izleyen yalnızca klavye ve anahtar kullanıcıları. Sayfada sıralı gezen ekran okuyucu kullanıcıları. Büyüteç kullanıp sayfanın yalnızca bir bölümünü gördükleri için ani bir atlamanın odağı görüş dışına taşıdığı az gören kişiler. Öngörülebilir bir sıraya ihtiyaç duyan bilişsel engelli kişiler.

EAA ve EN 301 549'da

Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. Mantıksal odak sırası, "işletilebilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 2.4.3'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

Kriterin web dışı dokümanlara uygulanıp uygulanmadığı ve nasıl uygulandığı standardın 10. maddesinde belirtilir. Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür. Kaynak gösterirken tam numaraları standarttan kontrol edin.

Standart sürümü: EN 301 549 V4.1.1 (Eylül 2026), WCAG 2.2'yi esas alan ve EAA için hazırlanan ilk sürümdür. Henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında EAA ile ilgili uygunluk karinesi sağlayacaktır. 2.4.3 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır.

EAA bağlamında dikkat: Yasanın Madde 2/4 hükmü bazı içerikleri gereksinimlerin dışında bırakır; örneğin 28 Haziran 2025'ten önce yayımlanmış ofis dosya biçimleri ve bu tarihten sonra güncellenmeyen arşivler. Bu tarihten sonra yayımladığınız ya da değiştirdiğiniz içerik bu istisnaların kapsamında değildir.

Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır

Web için kod örnekleri

1. DOM sırasını görsel sırayla eşleştirin

CSS bir şeyleri odak sırasını değiştirmeden görsel olarak taşıyabilir.

.form { display: flex; flex-direction: column-reverse; }
/* Tab önce son alana gider */

.form { display: flex; flex-direction: column; }
/* DOM sırası ve görsel sıra aynı */

2. Pozitif tabindex kullanmayın

0'ın üstündeki tabindex değerleri öğeleri doğal sıradan çıkarır ve sürdürmesi çok zordur (F44).

<input tabindex="3">
<input tabindex="1">
<input tabindex="2">

<input>
<input>
<input>

3. tabindex="-1" değerini yalnızca betikle odak için kullanın

-1 değeri, bir betiğin bir öğeye, örneğin bir başlığa, onu Tab sırasına eklemeden odaklanmasını sağlar.

<div tabindex="0">Statik paragraf</div>

<h2 id="sonuclar" tabindex="-1">Sonuçlar</h2>
<script>document.getElementById("sonuclar").focus();</script>

4. Kipli bir iletişim kutusu

Açıldığında odağı iletişim kutusuna taşıyın, arkasındaki sayfayı etkisiz tutun ve kapandığında odağı tetikleyiciye geri verin (H102).

<div class="modal">…</div> <!-- sayfanın sonuna eklenmiş, odak arkada kalır -->

<button id="ac">Profili düzenle</button>
<dialog id="profil">
  <h2>Profili düzenle</h2>
  …
  <button type="button" id="kapat">Kapat</button>
</dialog>
<script>
ac.onclick = () => profil.showModal();
kapat.onclick = () => { profil.close(); ac.focus(); };
</script>

5. Bir eylemden sonra beliren içerik

Tab'ın doğrudan içine girmesi için dinamik içeriği tetikleyicisinin yanına ekleyin.

document.body.appendChild(panel); // tetikleyiciden uzakta

tetikleyici.insertAdjacentElement("afterend", panel);

6. Çift odak olmasın

Odaklanabilir bir kontrolü başka bir odaklanabilir öğeyle sarmayın. Kontrol o zaman iki kez odak alır.

<div tabindex="0" onclick="git()"><button>Aç</button></div>

<button onclick="git()">Aç</button>

Mobil için kod örnekleri

Mobilde de ekran okuyucular ve anahtar erişimi bir dolaşım sırası izler. Bu sıra normalde yerleşimi izler ve yalnızca görsel yerleşim ile mantıksal sıra farklı olduğunda ayarlarsınız.

iOS (SwiftUI)

import SwiftUI

struct FiyatKarti: View {
    var body: some View {
        ZStack {
            // Görsel olarak fiyat üstte, ama önce ad okunmalı
            Text("Patika koşu ayakkabısı")
                .accessibilitySortPriority(2)
            Text("₺2.499")
                .accessibilitySortPriority(1)
        }
        // VoiceOver kartı tek bir kapsayıcı olarak ele alsın diye gruplayın
        .accessibilityElement(children: .contain)
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Box
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.isTraversalGroup
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.traversalIndex

@Composable
fun FiyatKarti() {
    Box(modifier = Modifier.semantics { isTraversalGroup = true }) {
        // Görsel konum ve okuma sırası farklı olduğundan sırayı açıkça belirleyin
        Text("₺2.499", modifier = Modifier.semantics { traversalIndex = 1f })
        Text("Patika koşu ayakkabısı", modifier = Modifier.semantics { traversalIndex = 0f })
    }
}

Nasıl test edilir?

• Sayfada Tab ile gezinin: Üstten Tab'a basın ve odağı izleyin. İçerikle uyuşan mantıklı bir sırayla mı ilerliyor?
• Geriye gidin: Shift+Tab'a basın. Ters sıra da mantıklı mı?
• Formları kontrol edin: Odak, alanlardan kullanıcıların dolduracağı sırayla mı geçiyor?
• İletişim kutularını ve menüleri kontrol edin: Biri açıldığında odak içine taşınıyor mu? Kapandığında odak tetikleyiciye dönüyor mu?
• Dinamik içeriği kontrol edin: Bir bölümü genişlettikten ya da sonuçları yükledikten sonra sonraki Tab yeni içeriğe mi gidiyor?
• Pozitif tabindex arayın: Kodda 0'ın üstündeki tabindex değerlerini ve içeriği görsel olarak yeniden sıralayan CSS'i arayın.
• Mobili kontrol edin: Bir ekran okuyucuyla ekranlarda kaydırarak gezinin. Sıra, kullanıcının bekleyeceği sırayı izliyor mu?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar pozitif tabindex değerlerini işaretleyebilir, ama bir sıranın mantıklı olup olmadığını söyleyemez. Bir kişi gezinmelidir.

Sık yapılan hatalar

• Pozitif tabindex değerleri: Kimsenin sürdürmediği özel bir sıra oluştururlar.
• İçeriği yeniden sıralayan CSS: order, column-reverse ve mutlak konumlandırma odağı görsel yerleşimden ayırır.
• Odağı taşımadan DOM'un sonuna eklenen kipli iletişim kutuları: Odak iletişim kutusunun arkasında kalır.
• Kapandıktan sonra odağın geri verilmemesi: Kullanıcılar sayfanın başından yeniden başlar.
• Tetikleyicisinden uzağa eklenen dinamik içerik: Tab onu atlar ya da en son ulaşır.
• Sarılmış kontrollerde çift odak: Bir düğmenin çevresindeki odaklanabilir div.
• Odaklanabilir kalan gizli öğeler: Odak almaya devam eden ekran dışı menüler.
• DOM'da ilk sırada duran sabit banner ya da sohbet bileşeni: Her sayfada ilk durağı o alır.

Kaynaklar

• Understanding SC 2.4.3: Focus Order (W3C), İngilizce, yeni sekmede açılır
• F44: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability (W3C), İngilizce, yeni sekmede açılır
• H102: Creating modal dialogs with the HTML dialog element (W3C), İngilizce, yeni sekmede açılır
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), İngilizce, yeni sekmede açılır
• EN 301 549 V4.1.1 (ETSI), İngilizce, yeni sekmede açılır
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), İngilizce, yeni sekmede açılır

Standart sürümü: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz; bağlayıcı metin için Avrupa Erişilebilirlik Yasası'nın (Direktif (AB) 2019/882) ve EN 301 549 standardının resmî metinlerini esas alın.