Odak Gizlenmez (Asgari)

Kısaca

Sabit bir üst bilgi, bir çerez bannerı ya da bir sohbet bileşeni, klavye odağı olan öğeyi örtebilir. Kullanıcı Tab'a basar ve odak taşınır, ama odaktaki öğe sabit bir çubuğun arkasında gizlidir. Neyi etkinleştireceğini göremez.

WCAG 2.2'ye yeni olan bu kriter, bir kullanıcı arayüzü bileşeni klavye odağı aldığında bileşenin yazar tarafından oluşturulan içerik yüzünden tamamen gizlenmemesini ister. Bu düzeyde kısmi örtüşmeye izin verilir, ama en aza indirilmelidir.

Neleri kapsar?

• Ne test edilir: Odak göstergesi değil, odaktaki bileşen. Gösterge tamamen gizliyse sayfa büyük olasılıkla 2.4.7'yi de karşılamaz.
• Tamamen gizli: Bu düzeyde bileşen tümüyle örtülmemelidir. Kısmen görünür bir bileşen geçer, ama örtüşmeden kaçınmak daha iyidir.
• Tipik nedenler: Sabit ya da yapışkan üst ve alt bilgiler, çerez bannerları, sohbet bileşenleri, yüzen eylem düğmeleri ve kalıcı paneller.
• Kullanıcının açtığı içerik: Kullanıcının açtığı içerik, kullanıcı onu odağı taşımadan, örneğin Escape'e basarak ya da kaydırarak ortaya çıkarabiliyorsa odaktaki bileşeni örtebilir.
• Kalıcı olmayan içerik: Menüler, açılır listeler, tarih seçiciler ve ipuçları, kullanımdan sonra kapandıklarında ya da odak onlardan ayrıldığında ihlal oluşturmaz.
• Kipli iletişim kutuları: Doğru yapılmış bir kipli iletişim kutusu, açıldığında odağı aldığı için ihlal oluşturmaz.
• Çözümler: Odaktaki öğelerin yapışkan çubukların altından çıkacak biçimde kaymasını sağlamak için scroll-padding kullanın (C43). Odaktaki öğeleri tamamen gizleyen yapışkan bir üst ya da alt bilgi ihlaldir (F110).
• Kapsam dışı notlar: Bileşenin hiçbir kısmının gizlenemediği AAA düzeyi sürüm 2.4.12'dir. Odağın görünürlüğü 2.4.7'dir.

Kimleri etkiler?

Etkinleştirecekleri öğeyi görmesi gereken yalnızca klavye ve anahtar kullanıcıları. Büyütme kullanan ve sayfanın küçük bir görünümü olan az gören kişiler. Odağı ekranda tutması gereken ekran büyüteci kullanıcıları. Yerlerini odakla koruyan 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. Odağı görünümde tutmak, "işletilebilirlik" ilkesinin parçasıdır.

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

Bu kriter yeni olduğu için, dokümanlar ve yazılım için geçerli satırları V4.1.1'in 10. ve 11. maddelerinden kontrol edin. 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ü: 2.4.11 kriteri WCAG 2.2'ye yenidir; bu yüzden WCAG 2.1'i esas alan EN 301 549 V3.2.1'in parçası değildir. EAA için hazırlanan ilk sürüm olan EN 301 549 V4.1.1'de (Eylül 2026) yer alır. V4.1.1 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 uygunluk karinesi sağlayacaktır. AA düzeyinde bir kriterdir.

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. Odaktaki öğeleri örten yapışkan üst bilgi

Tab odağı sabit bir üst bilginin altına taşıdığında tarayıcı öğeyi yalnızca üst kenara kadar kaydırabilir; orada üst bilgi onu gizler. Üst bilgi yüksekliğine eşit bir kaydırma dolgusu ekleyin (C43).

.site-ust { position: sticky; top: 0; height: 72px; }

.site-ust { position: sticky; top: 0; height: 72px; }
html { scroll-padding-top: 88px; } /* üst bilgi yüksekliği artı boşluk */

2. Yapışkan alt bilgi

Altta sabit çubuklar için de aynısını yapın.

.yapiskan-cta { position: fixed; bottom: 0; height: 64px; }

.yapiskan-cta { position: fixed; bottom: 0; height: 64px; }
html { scroll-padding-bottom: 80px; }

3. Çerez bannerı

Sayfayı örten bir banner, odaktaki öğeyi gizlememelidir. Odağı alan kipli bir pencere yapın ya da sayfaya yeterli dolgu verin.

.cerez-banner { position: fixed; inset: auto 0 0 0; } /* odaktaki bağlantıları örter */

<div role="dialog" aria-modal="true" aria-labelledby="ck" class="cerez-banner">
  <h2 id="ck">Çerezler</h2>
  <button>Kabul et</button> <button>Reddet</button>
</div>
<!-- Odak banner'a taşınır ve arkadaki sayfa etkisiz olur -->

4. Sohbet bileşeni ya da yüzen düğme

Bir köşeye sabitlenmiş bir düğme içeriği örtebilir. Boşluk bırakın ya da kullanıcıların taşımasına izin verin.

.sohbet { position: fixed; right: 0; bottom: 0; width: 320px; height: 400px; }

.sohbet { position: fixed; right: 1rem; bottom: 1rem; }
.sohbet[hidden] { display: none; } /* varsayılan olarak kapalı; isteyince açılır */

5. Kullanıcının kapatabildiği bir panel

Kullanıcının açtığı bir panel, odağı kaybetmeden Escape ile kapatılabiliyorsa içeriği örtebilir.

<div class="panel">…</div> <!-- kapatmanın yolu yok -->

panel.addEventListener("keydown", e => {
  if (e.key === "Escape") { panel.hidden = true; tetikleyici.focus(); }
});

6. Odakta görünüme kaydırma

Kaydırmayı bir betik yönetiyorsa, odaktaki öğenin sabit bir çubuktan uzakta bittiğinden emin olun.

el.focus({ preventScroll: true }); // üst bilginin altında kalır

el.focus();
el.scrollIntoView({ block: "center" });

Mobil için kod örnekleri

Mobilde ekran klavyesi, bir alt çubuk ya da yüzen bir düğme odaktaki alanı örtebilir. Odaktaki alanın görünümde kaldığından emin olun.

iOS (SwiftUI)

import SwiftUI

struct YorumFormu: View {
    @FocusState private var odaktakiAlan: Alan?
    enum Alan: Hashable { case ad, yorum }
    @State private var ad = ""
    @State private var yorum = ""

    var body: some View {
        ScrollViewReader { proxy in
            ScrollView {
                VStack(spacing: 16) {
                    TextField("Ad", text: $ad)
                        .id(Alan.ad)
                        .focused($odaktakiAlan, equals: .ad)
                    TextEditor(text: $yorum)
                        .id(Alan.yorum)
                        .frame(height: 120)
                        .focused($odaktakiAlan, equals: .yorum)
                }
                .padding()
            }
            // Odaktaki alanı klavyeden ve çubuklardan uzağa kaydırın
            .onChange(of: odaktakiAlan) { alan in
                if let alan { withAnimation { proxy.scrollTo(alan, anchor: .center) } }
            }
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.relocation.BringIntoViewRequester
import androidx.compose.foundation.relocation.bringIntoViewRequester
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.OutlinedTextField
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import kotlinx.coroutines.launch

@OptIn(androidx.compose.foundation.ExperimentalFoundationApi::class)
@Composable
fun YorumFormu() {
    var yorum by remember { mutableStateOf("") }
    val istekci = remember { BringIntoViewRequester() }
    val kapsam = rememberCoroutineScope()

    Column(
        Modifier.verticalScroll(rememberScrollState()).imePadding() // klavyeden uzak tutun
    ) {
        OutlinedTextField(
            value = yorum,
            onValueChange = { yorum = it },
            modifier = Modifier
                .bringIntoViewRequester(istekci)
                .onFocusChanged { if (it.isFocused) kapsam.launch { istekci.bringIntoView() } }
        )
    }
}

Nasıl test edilir?

• Uzun bir sayfada Tab ile gezinin: Sayfada aşağı Tab ile ilerlerken odağın nereye indiğini izleyin. Odaktaki öğe yapışkan bir üst bilginin, alt bilginin, bannerın ya da bileşenin arkasında hiç tamamen gizleniyor mu?
• Geriye doğru da Tab'a basın: Shift+Tab bir öğeyi üstteki bir üst bilginin altına kaydırabilir.
• Banner açıkken kontrol edin: Sayfayı çerez bannerı ve varsa sohbet bileşeni görünürken yükleyip Tab ile gezinin.
• Küçük boyutlarda ve yakınlaştırmada test edin: Dar pencereler ve %200 ya da %400 yakınlaştırma, sabit çubukların sayfanın daha fazlasını örtmesine yol açar.
• İletişim kutularını ve menüleri kontrol edin: Kipli bir pencere odağı alıyor mu? Kullanıcı, kullanıcının açtığı içeriği Escape ile kapatabiliyor mu?
• CSS'i kontrol edin: position: sticky ve position: fixed öğelerini ve scroll-padding ayarlı olup olmadığını arayın.
• Mobili kontrol edin: Ekranın altına yakın alanlara odaklanın. Klavye ya da bir alt çubuk onları örtüyor mu?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar odak taşınırken neyin neyi örttüğünü göremez. Bir kişi sayfada Tab ile gezinmelidir.

Sık yapılan hatalar

• Kaydırma dolgusu olmayan yüksek bir yapışkan üst bilgi: Başarısızlığın en yaygın nedeni (F110).
• Sayfayı örten ve odak almayan bir çerez bannerı: Kullanıcılar onun arkasında Tab ile gezinir.
• Varsayılan olarak içeriğin üzerinde açılan sohbet bileşeni: Bağlantıları ve alanları gizler.
• Küçük ekranlarda hem üstte hem altta yapışkan çubuklar: Sayfadan çok az şey kalır.
• preventScroll özensiz kullanımı: Odak taşınır ama sayfa kaymaz.
• Yalnızca masaüstü genişliğinde test etmek: Mobil yerleşimler daha fazla örter.
• Kısmi örtüşmenin her zaman sorun olmadığını varsaymak: AA düzeyinde geçer ama yine de kullanıcılara zarar verir; AAA düzeyindeki 2.4.12 bunu yasaklar.
• Kapatılamayan bir iletişim kutusu: Kullanıcının açtığı içerik, odağı taşımadan kapatılabilir olmalıdır.

Kaynaklar

• Understanding SC 2.4.11: Focus Not Obscured (Minimum) (W3C), İngilizce, yeni sekmede açılır
• C43: Using CSS scroll-padding to un-obscure content (W3C), İngilizce, yeni sekmede açılır
• F110: Failure of Success Criterion 2.4.11 Focus Not Obscured (Minimum) due to a sticky footer or header completely hiding focused elements (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.