Mit der Tab-Taste kann man sich auf der Seite bewegen. Dabei sieht man immer, wo man ist. Die Markierung verschwindet nicht.
Der Fokus-Anzeiger zeigt, auf welchem Teil der Seite man mit der Tastatur ist. Am Anfang ist das oft eine dünne, blaue Linie. Manche Designs nehmen diese Linie weg, weil sie sie nicht schön finden. Dann kann man die Seite nicht mehr mit der Tastatur benutzen.
Es gibt eine Regel, die klare Markierungen verlangt. Die Markierung muss mindestens 2 Mal so dick sein wie ein Punkt auf dem Bildschirm. Es muss ein starker Kontrast zum Hintergrund da sein. Ohne diese Markierung weiß man nicht, wohin man springt. Auch wichtig: Der Mauszeiger braucht keine Markierung, die Tastatur schon.
Wir bieten ein erstes Gespräch an. Wir finden heraus, ob das Thema wichtig für Ihre Seite ist. Weitere Infos: Übersicht über Barrierefreiheit, unsere Leistungen, Förderung, Antworten auf häufige Fragen.
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
