Görünür Klavye Odağı ve ADA

Bu sayfada neredeyim?

Klavye odağı, klavye kullanıcısının imlecidir. Görülemiyorsa Enter'a basmak bir kumardır. Motor engeli nedeniyle klavye kullananlar, anahtar cihazı kullananlar ve net bir gösterge gerektiren az gören kişiler etkilenir; dikkat ya da bellek güçlüğü olanlar da öyle.

2.4.7 başarı ölçütü, klavyeyle işletilebilen her arayüzün, klavye odak göstergesinin görünür olduğu bir işletim kipine sahip olmasını ister. Tarayıcının varsayılan dış çizgisi, arka planlarınızda açıkça görünür olduğu sürece bunu karşılar. Sorun çoğunlukla onu kaldırmaktan ya da görülemeyen bir şeyle değiştirmekten gelir. Gösterge fare kullanıcıları için her zaman görünür olmak zorunda değildir, ancak klavye odağı bir kez gösterildiğinde, öğe odaktayken görünür kalmalıdır.

Göstergenin çevresiyle ne kadar güçlü karşıtlık oluşturduğu 1.4.11, Metin Dışı Kontrast kapsamındadır ve burada yinelenmez.

Kamu siteleri odak halkasını nasıl kaybeder

• Bağlantılardan ve düğmelerden dış çizgileri kaldıran genel bir sıfırlama.
• Klavye karşılığı olmayan üzerine gelme stilleri.
• Gerçek girdiyi gizleyen özel onay kutuları ve filtre çipleri.
• İçerideki bağlantının dış çizgisinin overflow: hidden ile kırpıldığı kartlar.

Bir site fareyle şık görünürken klavye kullanıcısına hiçbir şey vermeyebilir. Özel filtreli kütüphane katalogları ve park rezervasyon sayfaları yaygın örneklerdir.

Üzerine gelme stillerinin odak karşılığı olmalı

Arayüz üzerine gelince bir durum gösteriyorsa, klavye odağına da aynı ipucunu verin.

.nav a:hover { background: #ffe9a8; text-decoration: underline; }
.nav a { outline: 0; }

.nav a:hover,
.nav a:focus-visible {
  background: #ffe9a8;
  text-decoration: underline;
}
.nav a:focus-visible { outline: 3px solid #0b3d91; outline-offset: 2px; }

Özel filtre çipleri ve onay kutuları

Yerel girdiyi display: none ile gizlemek, onu klavye gezintisinden de çıkarır. Görsel olarak gizleyin, odaklanabilir tutun ve odağı etiketinde gösterin.

.chip input { display: none; }
.chip span { border: 1px solid #555; padding: 4px 10px; }

.chip { position: relative; }
.chip input {
  position: absolute; opacity: 0;
  width: 1px; height: 1px;
}
.chip span { border: 1px solid #555; padding: 4px 10px; }
.chip input:focus-visible + span {
  outline: 3px solid #0b3d91; outline-offset: 2px;
}

Bağlantı içeren kartlar

Kart dış çizgiyi kırpıyorsa, odağı bunun yerine kartın tamamında gösterin.

.card { overflow: hidden; }
.card a:focus-visible { outline: 2px solid #0b3d91; }  /* kırpılıyor */

.card { overflow: hidden; }
.card:has(a:focus-visible) {
  outline: 3px solid #0b3d91;
  outline-offset: 2px;
}

:has() güncel tarayıcılarda desteklenir. Eski tarayıcıları desteklemeniz gerekiyorsa, odak halkasını box-shadow: inset ile kartın içinde uygulayın.

Mobil uygulamalarda odak

Donanım klavyeleri ve anahtar kontrolü yerel uygulamalarda da odağı gösterir. Sistem göstergesini yerine bir şey koymadan kapatmayın (focusEffectDisabled() iOS 17 gerektirir). SwiftUI:

Button("Ayır") { reserve() }
    .focusEffectDisabled()

Button("Ayır") { reserve() }
    .focused($reserveFocused)
    .overlay(
        RoundedRectangle(cornerRadius: 8)
            .stroke(Color.blue, lineWidth: reserveFocused ? 3 : 0)
    )

Jetpack Compose:

Modifier.clickable(
    interactionSource = source,
    indication = null,
    onClick = { reserve() }
)

Modifier.clickable(onClick = { reserve() })
// varsayılan gösterge genellikle odağı gösterir; açıkça görünür olduğunu doğrulayın (1.4.11)

Nasıl test edilir

1. Fareyi bırakın ve her şablonda Tab'a basarak ilerleyin. Her durakta, aramadan odağın nerede olduğunu görebiliyor musunuz?
2. Her arka planda kontrol edin: açık, koyu, görsel ve banner içleri.
3. Özel denetimleri kontrol edin: çipler, anahtarlar, sekmeler, kartlar, açılır listeler.
4. Zorlanmış renk kipini (Windows yüksek karşıtlık gibi) açın ve tekrarlayın.

Stil dosyalarında outline: none ve outline: 0 arayın ve her birinin görünür bir yedeği olduğunu doğrulayın. Otomatik araçlar bunu çoğu zaman yakalar, ancak yedeğin gerçek bir arka planda görünüp görünmediğini göremez.

Hatalar ve yayın öncesi liste

• Bir sıfırlamada dış çizgileri kaldırıp daha sonra geri ekleme sözü vermek.
• Düşük karşıtlıklı bir denetimde odak ipucu olarak yalnızca renk değişimini kullanmak.
• Odaklanınca blur() çağırmak.
• Odağı yalnızca bağlantılar için stilleyip düğmeleri, girdileri ve özel bileşenleri unutmak.

Her etkileşimli öğe, görünebileceği her arka planda görünür bir odak göstergesi gösteriyorsa ve gösterge öğe odaktayken kalıyorsa yayına alın.

DOJ, fareyle gezinmeyi yaygın engeller arasında sayar; yaygın engeller sayfasına bakın.

Kaynaklar

• Understanding SC 2.4.7: Focus Visible (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.