Görünür odak göstergesi
Sekmeleri kullanarak gezinen kullanıcılar her zaman nerede olduklarını bilirler. Kaybolan çerçeve yok.
"Görünür Odak Göstergesi" ne anlama geliyor?
Odak göstergesi, klavye aracılığıyla hangi öğenin seçili olduğunu gösteren görünür işarettir. Tarayıcının varsayılan ayarı genellikle ince mavi bir çerçevedir. Birçok tema bu çerçeveyi kaldırır ("çirkin görünüyor") ve böylece fare kullanmayan herkes için klavye navigasyonunu bozar.
Yükümlülük ve Fayda — WCAG 2.4.11.
WCAG 2.4.11 (Odak Görünümü) Net bir görsel ayrım sağlayan odak göstergesi gereklidir; en az 2 CSS piksel kalınlığında ve çevresiyle 3:1 kontrast oranına sahip olmalıdır. Görünür bir odak olmadan, klavye ile gezinme neredeyse imkansızdır (Enter tuşuna basmanın sizi nereye götüreceğini bilemezsiniz). Ayrıca şunlar da gereklidir: :odak-görünür Fare tıklamasını (çerçeve gerekmez) sekme odağından (çerçeve gereklidir) ayırır — temiz kullanıcı deneyimi.
Bunu tam olarak nasıl çözeceğiz?.
- Küresel odak stili: 3 piksel düz marka rengi + 3 piksel ofset, 6 piksel kenar yarıçapı — yüksek görünürlük, AAA kontrast.
:odak-görünüryerine:odakFare tıklamaları çerçevelenmez, ancak sekme odağı çerçevelenir.- Asla küresel
özet: yokDeğiştirme yapılmadan. - Özel bileşenlere (döngüsel slayt gösterileri, özel açılır menüler) açıkça kendi odak durumları atanır.
- Doğrulama: Klavye ile adım adım inceleme — her etkileşimli öğe, odak noktasındayken açıkça tanımlanabilir olmalıdır.
Modül paketimizin ilgili yapı taşları
-
Erişilebilir formlar
WCAG 3.3.1Net etiketler, programatik hata yönetimi, doğrulama — tarayıcıda açılır pencereler yok, "lütfen doldurun" gibi şeyler yok.
-
AAA kontrastları, bileşen başına test edilmiştir.
WCAG 1.4.6Metin için ≥ 7:1, büyük yazı tipi için ≥ 4,5:1 — sayfa örneği başına değil, bileşen başına test edilmiştir.
-
Bağlantıları atla ve anlamsal işaretler
WCAG 2.4.1Klavye, gezinme menüsü ve başlık menüsünden geçmeye gerek kalmadan doğrudan ana içeriğe atlar.
-
Sade dil (yapay zeka destekli)
WCAG 3.1.5Okuma güçlüğü çekenler, dil öğrenenler ve acelesi olanlar için tek tuşla basitleştirilmiş içerik.
Tam olarak bu modüle mi ihtiyacınız var?
15 dakikalık ön görüşme — siteniz için uygun olup olmadığını netleştireceğiz.
Daha fazla bilgi:
BFSG genel bakışı ·
Performans genel bakışı ·
BAFA fonlaması ·
Sıkça Sorulan Sorular