Odaklama Sırası

Kısaca

Klavye kullanıcısı sayfada Tab ile ilerlerken odak bir bağlantıdan, düğmeden veya form alanından diğerine geçer. Bu sıra ekrandaki düzenle çelişirse, örneğin form alanlarından sonra birden menüye atlar ya da görünmeyen bir öğeye giderse, kullanıcı ne yaptığını takip edemez.

Bu kriter, odağın anlamı ve kullanımı koruyan mantıklı bir sırayla ilerlemesini ister. Çoğu durumda bunun en kolay yolu, HTML'deki sıranın görsel sırayla aynı olması ve tabindex değerleriyle oynanmamasıdır.

Neleri kapsar?

• Kaynak sırası: Odaklanılabilir öğelerin koddaki sırasının görsel ve mantıksal sırayla uyumu.
• tabindex kullanımı: Pozitif tabindex değerlerinin doğal sırayı bozması.
• Dinamik içerik: Diyalog, açılır menü veya yeni eklenen içerik açıldığında odağın oraya taşınması, kapandığında geri dönmesi.
• Gizli öğeler: Ekranda görünmeyen menü veya panellerdeki öğelerin odak sırasından çıkarılması.
• Mobil: Ekran okuyucu ve harici klavye ile gezinirken odak sırasının görsel düzene uyumu.
• Kapsam dışı notlar: Tüm içeriğin okunma sırası Anlamlı Sıralama kriterinin, öğelerin klavyeyle ulaşılabilir olması Klavye Erişimi kriterinin konusudur.

Kimleri etkiler?

Yalnızca klavye kullanan gören kullanıcılar, odağın ekranda beklenmedik yerlere atlamasıyla kafa karışıklığı yaşar. Ekran okuyucu kullanan kör kullanıcılar, form alanlarının sırası bozuksa yanlış bilgiyi yanlış alana girebilir. Anahtar cihazı kullanan motor engelli kişiler için her gereksiz odak adımı ek çaba demektir. Ekranı büyüten kullanıcılar da odak görüş alanının dışına atladığında nerede olduklarını kaybeder.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 86–87 numaralı soruları kapsar. Yönlendirme soruları sayfada ilgili içerik olup olmadığını belirler; yoksa liste sizi sonraki soruya geçirir. Aşağıdaki açıklamalar sorulardan alıntı değil, özetidir. Soruların tam metni için resmî listeye bakın.

Resmî kontrol listesini indirin (PDF), yeni sekmede açılır

Web için kod örnekleri

1. Pozitif tabindex

Pozitif tabindex değerleri, sayfadaki diğer tüm öğelerden önce odaklanır ve sırayı öngörülemez hâle getirir. Doğal sırayı HTML ile kurun.

<label for="ad">Ad Soyad</label>
<input id="ad" tabindex="2">
<label for="tckn">T.C. Kimlik No</label>
<input id="tckn" tabindex="1">
<button tabindex="3">Devam</button>

<label for="tckn">T.C. Kimlik No</label>
<input id="tckn">
<label for="ad">Ad Soyad</label>
<input id="ad">
<button>Devam</button>

tabindex="0" (odak sırasına doğal yerinde ekler) ve tabindex="-1" (yalnızca betikle odaklanabilir yapar) güvenle kullanılabilir.

2. CSS ile ters çevrilmiş düğmeler

Görsel olarak "Geri" solda, "Devam" sağda görünürken odak önce "Devam"a gidiyorsa, kullanıcı hangi düğmede olduğunu karıştırır.

<div style="display:flex; flex-direction:row-reverse">
  <button>Devam</button>
  <button>Geri</button>
</div>

<div style="display:flex; justify-content:space-between">
  <button>Geri</button>
  <button>Devam</button>
</div>

3. Diyalog açılıp kapanırken odak

Diyalog açıldığında odak içine taşınmalı, kapandığında onu açan düğmeye dönmelidir. Aksi hâlde odak sayfanın başına veya görünmeyen bir yere düşer.

const acmaDugmesi = document.getElementById("adres-degistir");
const diyalog = document.getElementById("adres-diyalog");

acmaDugmesi.addEventListener("click", () => {
  diyalog.showModal(); // odak diyalogun ilk odaklanılabilir öğesine gider
});

diyalog.addEventListener("close", () => {
  acmaDugmesi.focus(); // odak geri döner
});

4. Gizli mobil menü

Ekran dışına kaydırılmış ama gizlenmemiş bir menü, kullanıcı Tab'a bastığında görünmeyen bağlantılara odaklanılmasına neden olur.

.yan-menu {
  transform: translateX(-100%);
}
/* Bağlantılar görünmüyor ama Tab ile odaklanıyor */

<nav id="yan-menu" class="yan-menu" aria-label="Menü" inert>…</nav>

<script>
  function menuyuAc(acik) {
    const menu = document.getElementById("yan-menu");
    menu.inert = !acik;          // kapalıyken odak sırasından çıkar
    menu.classList.toggle("acik", acik);
  }
</script>

5. Sonradan eklenen içerik

Kullanıcının eylemiyle eklenen içerik (örneğin "Yeni kişi ekle" ile açılan alanlar) DOM'da tetikleyen öğenin hemen arkasına eklenmeli; gerekirse odak yeni içeriğe taşınmalıdır.

document.getElementById("kisi-ekle").addEventListener("click", (e) => {
  const grup = kisiAlanlariOlustur(); // Kendi fonksiyonunuz: fieldset döndürür
  e.currentTarget.before(grup);       // sayfanın sonuna değil, düğmenin önüne
  grup.querySelector("input").focus();
});

Mobil için kod örnekleri

iOS (SwiftUI)

Bir sayfa (sheet) kapandığında veya hata oluştuğunda VoiceOver odağını anlamlı bir öğeye taşımak için AccessibilityFocusState kullanılabilir.

import SwiftUI

struct AdresFormu: View {
    @State private var adres = ""
    @State private var hata: String?
    @AccessibilityFocusState private var hataOdakta: Bool

    var body: some View {
        Form {
            if let hata {
                Text(hata)
                    .foregroundStyle(.red)
                    .accessibilityFocused($hataOdakta)
            }
            TextField("Açık adres", text: $adres)
            Button("Kaydet") {
                if adres.isEmpty {
                    hata = "Hata: Açık adres boş bırakılamaz."
                    hataOdakta = true // VoiceOver odağı hata mesajına gider
                }
            }
        }
    }
}

Android (Jetpack Compose)

Compose'da odak sırası varsayılan olarak yerleşimi izler. Gerektiğinde FocusRequester ile odak belirli bir öğeye taşınabilir; klavye odak sırası focusProperties ile düzenlenebilir.

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester

@Composable
fun KisiEkleFormu() {
    var ekBolum by remember { mutableStateOf(false) }
    var ad by remember { mutableStateOf("") }
    val yeniAlan = remember { FocusRequester() }

    Column {
        Button(onClick = { ekBolum = true }) { Text("Yeni kişi ekle") }

        if (ekBolum) {
            OutlinedTextField(
                value = ad,
                onValueChange = { ad = it },
                label = { Text("Kişinin adı soyadı") },
                modifier = Modifier.focusRequester(yeniAlan)
            )
            LaunchedEffect(Unit) { yeniAlan.requestFocus() }
        }
    }
}

Nasıl test edilir?

• Tab ile baştan sona gezinin: Sayfanın başından sonuna Tab'a basarak ilerleyin, sonra Shift+Tab ile geri dönün. Odak ekrandaki düzene uygun mu ilerliyor?
• Görünmeyen odakları arayın: Odak göstergesinin kaybolduğu anlar var mı? Bu genellikle gizli bir öğeye odaklanıldığını gösterir.
• Dinamik içerikleri tetikleyin: Diyalogları, açılır menüleri ve sonradan eklenen alanları açıp kapatın; odak her seferinde mantıklı bir yere gidiyor mu?
• Mobilde iki yöntemle deneyin: Ekran okuyucuyla kaydırarak ve harici klavyeyle Tab'a basarak gezinin.
• Otomatik araçların sınırı: Otomatik araçlar pozitif tabindex değerlerini ve gizli ama odaklanılabilir bazı öğeleri bulabilir. Odak sırasının anlamlı olup olmadığını ise yalnızca elle test belirleyebilir.

Sık yapılan hatalar

• tabindex ile sıra düzeltmeye çalışmak: Pozitif değerler bir sorunu çözerken sayfanın geri kalanında yenilerini yaratır.
• Diyalog kapanınca odağı kaybetmek: Odak sayfanın başına döner ve kullanıcı kaldığı yeri arar.
• Diyalogu sayfanın sonuna eklemek ve odağı taşımamak: Kullanıcı diyaloga ulaşmak için tüm sayfayı geçer.
• Ekran dışı menüleri gizlememek: Kapalı menü bağlantıları görünmez odak noktaları oluşturur.
• Tablo veya ızgara düzeninde satır/sütun karışıklığı: Görselde sütun sütun okunan kartların kodda satır satır sıralanması.

Kaynaklar

• Understanding SC 2.4.3: Focus Order (W3C), İngilizce, yeni sekmede açılır
• Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
• Erişilebilirlik kütüphanesi — Odak sırası, tabindex, odak yönetimi ve diğer terimler.

Kontrol listesi sürümü: V2.2.30.01 (2026). Bu sayfa bilgilendirme amaçlıdır; bağlayıcı metin için Aile ve Sosyal Hizmetler Bakanlığı'nın resmî kontrol listesini esas alın.