Odak Görünür

Kısaca

Klavye kullanırken odak göstergesi sizin imlecinizdir. Odağın nerede olduğunu göremiyorsanız bir tuşa basmanın ne yapacağını bilemezsiniz. outline: none ile dış çizgiyi kaldırmak, web'deki en yaygın erişilebilirlik hatalarından biridir.

Bu kriter, klavyeyle işletilebilen her kullanıcı arayüzünün, klavye odak göstergesinin görünür olduğu bir işletim kipine sahip olmasını ister. Kriter göstergenin nasıl görüneceğini belirtmez. Tarayıcı varsayılanı kabul edilir; özel bir stil de öyle.

Neleri kapsar?

• Görünür odak: Bir öğe klavye odağı aldığında görünür bir şey değişmelidir: bir dış çizgi, kenarlık, arka plan ya da benzeri.
• Varsayılan uygundur: Kullanıcı aracının varsayılan göstergesi kriteri karşılar (G149, G165). İhlal, onun kaldırılması ya da gizlenmesiyle olur.
• Özel göstergeler: Kendi göstergenizi CSS ile (C15, C45), her arka planda çalışan iki renkli bir göstergeyle (C40) ya da betikle (SCR31) tasarlayabilirsiniz.
• Bir işletim kipi: Gösterge, görünür olduğu bir kip bulunduğu sürece :focus-visible örneğinde olduğu gibi yalnızca klavye kullanımında belirebilir.
• Kalıcı olmalı: Öğe hâlâ odaktayken gösterge bir gecikmeden sonra kaybolmamalıdır.
• İhlaller: Betikle odağı kaldırmak (F55) ve yerine bir şey koymadan dış çizgileri ya da kenarlıkları kaldırmak (F78).
• Kapsam dışı notlar: Göstergenin çevresine karşı kontrastı 1.4.11'dir. Odaktaki öğenin başka içeriğin arkasında gizlenmemesi 2.4.11'dir. Gösterge için boyut ve kalınlık gereksinimleri 2.4.13'tür (AAA düzeyi).

Kimleri etkiler?

Klavye kullanıcıları, anahtar kullanıcıları ve klavye gibi davranan ses denetimi ya da başka cihazlar kullananlar. Nerede olduklarını görmesi gereken dikkat, kısa süreli bellek ya da yürütücü işlev güçlüğü olan kişiler. Net bir göstergeye ihtiyaç duyan az gören kişiler. Fare kullanıcıları da yararlanır.

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. Nerede olduğunuzun görünür bir göstergesi, "işletilebilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 2.4.7'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.7 kriterinin metni WCAG 2.1 ve 2.2'de aynıdı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. Dış çizgiyi kaldırmayın

Bu tek satır, tüm bir sitede klavye kullanımını bozar.

*:focus { outline: none; }

/* Varsayılanı koruyun ya da açıkça görünür bir şeyle değiştirin */
:focus-visible {
  outline: 3px solid #0b5fff;
  outline-offset: 2px;
}

2. Klavye kullanıcıları için özel bir odak stili

:focus-visible göstergeyi klavye kullanımında gösterir, fare tıklamalarında göstermez.

button:focus { outline: 0; }

button:focus-visible {
  outline: 3px solid #0b5fff;
  outline-offset: 2px;
}

3. Her arka planda çalışan iki renkli bir gösterge

Tek bir renk bazı arka planlarda kaybolabilir. İki renk her zaman en az birine karşı kontrast oluşturur (C40).

a:focus-visible { outline: 2px solid #ffffff; } /* beyaz sayfada görünmez */

a:focus-visible {
  outline: 2px solid #ffffff;
  box-shadow: 0 0 0 4px #000000;
}

4. Özel bileşenler

Özel kontroller kendi odak stillerine ihtiyaç duyar. Yerel kontrolü gizlediyseniz varsayılana güvenmeyin.

.anahtar input { position: absolute; opacity: 0; } /* odağı hiçbir şey göstermez */

.anahtar input { position: absolute; opacity: 0; }
.anahtar input:focus-visible + .iz {
  outline: 3px solid #0b5fff;
  outline-offset: 2px;
}

5. Odağı betikle kaldırmayın

Odakta blur() çağırmak klavye kullanımını geçersiz kılar (F55).

el.addEventListener("focus", () => el.blur());

// Odağın öğede kalmasına izin verin ve onu biçimlendirin

6. Zorlanmış renklere saygı gösterin

Windows Yüksek Kontrast modunda yazar renkleri geçersiz kılınır. Saydam bir dış çizgi orada görünür kalır.

.btn:focus-visible { box-shadow: 0 0 0 3px #0b5fff; } /* zorlanmış renklerde kaybolur */

.btn:focus-visible {
  box-shadow: 0 0 0 3px #0b5fff;
  outline: 3px solid transparent; /* zorlanmış renklerde görünür */
}

Mobil için kod örnekleri

Yerel uygulamalar donanım klavyeleri, anahtar denetimi ve tam klavye erişimiyle kullanılır. Sistem kontrolleri odağı varsayılan olarak gösterir. Özel kontrollerin kendi odak göstergesine ihtiyacı vardır.

iOS (SwiftUI)

import SwiftUI

struct EtiketKapsulu: View {
    let baslik: String
    @FocusState private var odakta: Bool

    var body: some View {
        Text(baslik)
            .padding(8)
            .focusable()
            .focused($odakta)
            // Özel bir kapsülün kendi görünür odak göstergesine ihtiyacı vardır
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(odakta ? Color.blue : Color.clear, lineWidth: 3)
            )
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.border
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun EtiketKapsulu(baslik: String) {
    var odakta by remember { mutableStateOf(false) }
    Text(
        text = baslik,
        modifier = Modifier
            .onFocusChanged { odakta = it.isFocused }
            .focusable()
            // Özel bir kapsülün kendi görünür odak göstergesine ihtiyacı vardır
            .border(if (odakta) 3.dp else 0.dp, Color(0xFF0B5FFF), RoundedCornerShape(8.dp))
            .padding(8.dp)
    )
}

Nasıl test edilir?

• Sayfada Tab ile gezinin: Odağın nerede olduğunu her zaman görebiliyor musunuz? Bağlantıları, düğmeleri, form alanlarını, menüleri, özel bileşenleri ve kartları kontrol edin.
• CSS'i kontrol edin: outline: none, outline: 0 ve :focus { ... } sıfırlamalarını arayın ve her birinin görünür bir stille değiştirildiğini doğrulayın.
• Özel bileşenleri kontrol edin: Anahtarlar, onay kutuları ve özel seçim kutuları sık sık yerel girdiyi gizler. Odak hâlâ görünüyor mu?
• Her arka planda kontrol edin: Bir odak göstergesi koyu ya da görsel arka planlarda kaybolabilir. Orada test edin.
• Zorlanmış renkleri kontrol edin: Tarayıcı geliştirici araçlarında Windows Yüksek Kontrast ya da zorlanmış renkler modunu açın.
• Kalıcı olduğunu kontrol edin: Gösterge, öğe odaktayken bir gecikmeden sonra kaybolmadan görünür kalıyor mu?
• Mobili kontrol edin: Bir klavye ya da anahtar denetimi bağlayın. Özel olanlar dahil her kontrolde odak görünür mü?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar dış çizgileri kaldıran CSS'i bulabilir, ama yerine konan şeyin görünür olup olmadığını göremez.

Sık yapılan hatalar

• Yerine bir şey koymadan outline: none: Web'deki en yaygın erişilebilirlik hatası.
• * { outline: 0 } ile stilleri sıfırlamak: Genel bir sıfırlama odağı her yerde kaldırır.
• Çok silik bir özel gösterge: 1 piksellik açık gri bir çizgi görünmez.
• Özel kontrolde gizlenmiş yerel girdi: Odak görünmez bir öğeye gider.
• Odağı betikle kaldırmak: Odakta blur().
• Yalnızca üzerine gelince çıkan gösterge: Klavye kullanıcıları üzerine gelmez.
• Tek renkli gösterge: Yanlış arka planda kaybolur.
• Zorlanmış renkleri yok saymak: Gösterge yüksek kontrast modunda kaybolur.

Kaynaklar

• Understanding SC 2.4.7: Focus Visible (W3C), İngilizce, yeni sekmede açılır
• F78: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator (W3C), İngilizce, yeni sekmede açılır
• C40: Creating a two-color focus indicator to ensure sufficient contrast with all components (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.