Ana içeriğe geç

2.4.7 Odak Görünür

Klavye odağı görsel olarak belirgin olmalı; kullanıcılar hangi öğenin aktif olduğunu net şekilde görebilmelidir.

SC Kodu: 2.4.7 Seviye: AA
URL: https://www.w3.org/TR/WCAG22/#focus-visible

Genel Tanım​

WCAG SC 2.4.7, kullanıcıların hangi kullanıcı arayüzü bileşeninin klavye odağına sahip olduğunu kolayca belirleyebilmelerini sağlar. Bu kriter, görme engelli klavye kullanıcılarının web içeriğinde verimli bir şekilde gezinmelerine ve etkileşimde bulunmalarına yardımcı olduğu için erişilebilirlik açısından hayati önem taşır. Odaklanması gereken öğelere kenarlık, çerçeve, alt çizgi, arka plan rengi değişikliği veya metin rengi veya stil değişikliği gibi odak göstergeleri sağlamaya odaklanır, böylece görme engelli klavye kullanıcıları bir öğenin odaklandığını belirleyebilirler.

2.4.7.b Faydalar​

  • Geliştirilmiş Görünürlük: Görme engelli kullanıcılar genellikle başlık kısayollarını kullanarak sayfada gezinirler. Net başlıklar ve etiketler, içeriğin yapısını ve düzenini anlamalarına yardımcı olur.
  • Geliştirilmiş Kullanılabilirlik: Net bir odak göstergesi sağlayarak kullanıcı hayal kırıklığını azaltır ve hangi öğenin aktif olduğu konusundaki karışıklığı önler.
  • Daha İyi Kullanıcı Yönlendirmesi: Özellikle engelli kullanıcıların sayfada bağlamı ve yönlendirmeyi korumalarına yardımcı olur.

Ana Amaç​

Klavye odağını alan herhangi bir öğenin görünür şekilde belirtilmesini sağlamak, böylece kullanıcılar her zaman hangi öğenin aktif ve etkileşime hazır olduğunu belirleyebilirler. Tarayıcılar varsayılan olarak odaklanmış öğelere çerçeve ve kenarlık sağlasa da, bunları CSS veya JavaScript kullanarak eklemek ve görünürlük ve kontrastı sağlamak için testler yapmak önemlidir.

En İyi Uygulamalar​

  • Odaklanmış öğeleri vurgulamak için CSS özelliklerini kullanın: Anahat, kenarlık veya arka plan rengi gibi CSS özelliklerini kullanarak odaklanmış öğeleri vurgulayabilirsiniz.
  • Odaklanılan öğelerin görünürlüğünü sağlayın: Klavye odağı aldıklarında tüm öğelerin görünür olduğundan emin olun.
  • Varsayılan odak göstergelerini kaldırmaktan kaçının: Kullanıcı aracıları tarafından sağlanan varsayılan odak göstergelerini kaldırmaktan kaçının.
  • Odak göstergeleri için yeterli kontrast sağlayın: CSS özelliklerini uygularken, gösterge ile bitişik öğeler arasındaki kontrastın başarı kriterine uygun olduğundan emin olun.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Bir yazar, varsayılan çerçeve çizgisini stiliyle uyumlu olmadığı için odaklama anında kaldırır.

Nelerden Kaçınılmalı?

HTML/CSS

<style>​
* :focus {
outline : none ;
}
</style>​​

Açıklama: Tüm öğelere outline: none uygulayarak, odak öğelere geldiğinde tarayıcının varsayılan çerçeve çizgisi görünmez. Yazarlar, web sitesinin tasarımını iyileştirmek için bu kuralı kapatma eğilimindedir. Ancak bu, bu başarı ölçütünün bir ihlalidir.

Ne Yapılmalı?

HTML/CSS

<style> 
  a:focus {
    outline : 2px solid blue ; /* Bitişik öğelerle yüksek kontrast sağlar */ 
    outline-offset : 2px ; /* İsteğe bağlı: Öğe ile çerçeve arasına boşluk ekler */ 
  }

</style>​​

Açıklama: Tüm öğelere uygulanan önceki CSS kuralı kaldırıldı ve varsayılan çerçeve (outline) web sitesindeki öğelere varsayılan olarak geri yüklendi. Çerçeve ile arka plan arasındaki kontrastın 3:1'den fazla olduğundan emin olduğumuz için tüm bağlantıların odağını maviye ayarladık. Bir yazar olarak, arka planlarının görünür olduğundan ve bitişik öğelerle iyi bir kontrast oluşturduğundan emin olmak için tüm odak göstergelerini test ettiğinizden emin olun.