Mekanik modülü · WCAG 2.4.11 · Seviye AAA

Görünür odak

Odaklanabilir tüm öğelerde güçlü, her zaman görünür bir odak halkası sağlar — AAA kontrast oranıyla.

Ne işe yarar?

İşlevi tek cümleyle ve üç cümleyle açıklayın

Birçok modern CSS sıfırlama işlemi, tarayıcının varsayılan odak noktasını ("outline: none") kaldırır. Tema bir alternatif sunmuyorsa, klavye kullanıcıları sayfadaki mevcut konumlarını göremezler. Nakavt kriteri WCAG denetimleri sırasında.

Bu modül, temadan bağımsız olarak tüm etkileşimli öğelere AAA kontrastlı (arka plana göre en az 7:1) 3 piksel kalınlığında bir çerçeve halkası uygular.

Eklenti bunu şu şekilde uyguluyor.

Teknik önlemler

3 piksel dış çizgi + 2 piksel ofset — Görsel olarak net, düzeni bozmadan.
Her bir öğe için kontrast hesaplaması: Açık arka plan üzerinde koyu çerçeve veya koyu arka plan üzerinde açık çerçeve seçeneğini otomatik olarak seçer.
`:focus` yerine `:focus-visible` kullanın. — Fare tıklamaları halka şeklinde görünmez (modern davranış), klavye odağı ise her zaman halka şeklinde görünür.
Özel öğeler: `tabindex="0"` özelliği olan div/span etiketleri de halka efekti alır.
Kenar yarıçapı ayarıÇerçeve, yuvarlak şekli takip eder (yuvarlak düğmelerin etrafında keskin kenarlı bir çerçeve yoktur).

Eklenti yönetim panelinde

Bu ayarları modül sekmesinde bulabilirsiniz.

Halka kalınlığı (1–5 piksel, varsayılan 3)
Halka rengi: Otomatik / sabit HEX renk kodu / CSS değişkeni
Ofset (0–6 piksel, Varsayılan 2)
Görünüm animasyonu: kapalı / yumuşak (`prefers-reduced-motion` ayarına uyar)
İstisna seçiciler (CSS): Geçersiz kılma halkası olmayan öğeler

Yönetici panelindeki yol: WP-Admin → Erişilebilirlik → Modüller → Görünür Odak

Modüle ne zaman ihtiyacınız var?

Kullanım senaryosu

Her sayfa için zorunlu bir modül. WCAG 2.4.11 AAA seviyesindedir, ancak AA seviyesindeki 2.4.7 (odak görünür) bile bunu gerektirir.

Bu durum, özellikle agresif CSS sıfırlamaları kullanan temalar veya ` aracılığıyla özel olarak oluşturulmuş düğmeler için kritik öneme sahiptir.

İlgili modüller

Bu, tematik olarak da birbirine uyuyor.

Klavye navigasyonu
WCAG 2.1.1
Her etkileşimli öğeye fare kullanmadan erişilebildiğinden emin olun — Tab, Enter, ok tuşları, Esc.
Tabindex Yöneticisi
WCAG 2.4.3
Sekme sırasını düzeltir, pozitif `tabindex` değerlerini ortadan kaldırır ve hatalı atlamaları giderir.
Bağlantıları ve önemli yerleri atla
WCAG 2.4.1
Klavye kullanıcıları ve ekran okuyucular için anlamsal dönüm noktası rolleri ve görünür atlama bağlantıları ayarlar.

Siteniz için modülü etkinleştirin mi?

İlk 15 dakikalık görüşmede, modülün temanız ve içerik türünüz için uygun olup olmadığını ve kurulumun nasıl göründüğünü açıklığa kavuşturacağız.

15 dakikalık ön görüşme
Tüm modülleri görüntüle