Erişilebilir Odak Durumları: Görünür Klavye Odağını Tasarlama
WCAG 2.2'yi karşılayan görünür klavye odağı nasıl tasarlanır: 2.4.7 ve 2.4.13'ün gerektirdiği şeyler, :focus-visible'ın nasıl çalıştığı ve odak halkaları için tasarım ipuçları.
Ana nokta
Her etkileşimli öğenin, klavye kullanıcıları için açıkça görülebilen bir odak göstergesine ihtiyacı vardır; WCAG 2.2, AA (2.4.7) düzeyinde gerektirir. Güçlü bir gösterge için, WCAG'in AAA kılavuzunu (2.4.13) hedefleyin: en azından odaklanmış ve odaklanmamış durumlar arasında 3:1 kontrasta sahip öğenin etrafındaki 2 CSS piksel taslağının alanı. Klavye kullanıcıları için halkaları her fare tıklamasında göstermeden göstermek için :focus-visible kullanın.
Odaklanma durumları neden önemlidir?
Klavye, cihaz değiştirme veya ekran büyüteci kullanan kişiler, sayfada her defasında bir öğe olarak hareket ederler. Odak göstergesi, nerede olduklarını bilmelerinin tek yoludur. Tarayıcı anahattını değiştirmeden kaldırmak, en yaygın erişilebilirlik hatalarından biridir.
WCAG 2.2'nin gerektirdiği şeyler
Başarı kriteri 2.4.7 Görünür Odak (AA düzeyi), klavyeyle çalıştırılabilen herhangi bir arayüzün odak göstergesinin görünür olduğu bir moda sahip olmasını gerektirir. WCAG 2.2, güçlü bir göstergeyi tanımlayan 2.4.13 Odak Görünümü'nü (AAA düzeyi) ekledi: odaklanmış ve odaklanmamış durumlar arasında en az 3:1 kontrast oranına sahip, en azından bileşenin 2 CSS piksel kalınlığındaki çevre alanı kadar büyük.
:odak-görünür
MDN şunu açıklıyor :focus-visible, bir öğenin odağı olduğunda ve tarayıcı buluşsal yöntemi kullanarak bu odağın tipik olarak klavye kullanımı için gösterilmesi gerektiğine karar verdiğinde uygulanır. Bu, birisi fareyle bir düğmeye her tıkladığında bunları göstermeden, klavye kullanıcıları için güçlü odak halkaları göstermenize olanak tanır. Ana hatları kaldırmak yerine bunu kullanın.
Yüzüğü tasarlamak
Pratik rehberlik:
- Öğeye karışmaması için ofsetli bir taslak veya halka kullanın.
- Öğenin görünebileceği her arka planın kontrastını kontrol edin; iki renkli bir yüzük yardımcı olur.
- Tasarım sisteminizde belirteç olarak tanımlanan bileşenler arasında tutarlı olmasını sağlayın.
- Asla yalnızca hafif bir renk değişikliğine güvenmeyin.
- Odaklanılan öğenin yapışkan başlıkların arkasında gizli olmadığından emin olun.
Odaklanma ve hareket
Odak halkası çok kısa bir geçişle görünebilir, ancak anında hissedilmesi gerekir. Halkayı geciktiren veya öğeyi hareket ettiren animasyonlardan kaçının ve özel tuvalle çizilmiş bileşenler için, klavye kullanıcılarının ona ulaşabilmesi için sayfada hâlâ gerçekten odaklanabilen bir öğe olduğundan emin olun.
Hatırlanacak temel ilkeler
- WCAG AA'da (2.4.7) görünür odaklama gereklidir
- 2.4.13 (AAA): 2 piksel çevre alanı ve 3:1 kontrast değişimi
- Ana hatları kaldırmak yerine :focus-visible kullanın
- Odak halkasını tasarım simgesi olarak tanımlayın
- Kanvasla oluşturulmuş kullanıcı arayüzünün gerçekten odaklanabilir öğelere ihtiyacı var
Sık sorulan sorular
Kaynaklar
- Understanding SC 2.4.7: Focus Visible — W3C WAI
- Understanding SC 2.4.13: Focus Appearance — W3C WAI
- :focus-visible — MDN Web Belgeleri