Tanım

Odak göstergesi, klavye girdisi alan kullanıcı arayüz öğesinin çevresinde beliren (genellikle belirgin düz veya noktalı çerçeve, dış hat veya vurgu şeklinde) kritik bir görsel işarettir. Yalnızca klavye kullanan kullanıcılar için temel bir görsel sinyal görevi görerek, hangi etkileşimli öğenin (bağlantı, buton, form alanı veya başlık gibi) sonraki eyleme (Enter veya boşluk tuşuna basma gibi) yanıt vereceğini net şekilde gösterir.

Açıklama

Farenizin aniden çalışmadığı ve yedeğinizin olmadığı bir gün hayal edin. Çalışmaya devam etmek için bilgisayarınızla yalnızca klavyeyle etkileşim kurmak zorunda kalırdınız. Bu varsayımsal senaryo, aslında pek çok kişi için kalıcı bir gerçektir. Motor engelli bireyler (fare kullanmakta zorlanan veya kullanamayan) için dijital içerikle etkileşimin birincil yolu klavye navigasyonudur. Benzer şekilde, bilişsel engelli veya dikkat eksikliği olan bazı kişiler de -özellikle uzun metinler okurken- karmaşık bir web sayfasındaki konumlarını görsel olarak takip etmekte zorlanabilir.

Bu sorunun basit ama güçlü çözümü, tutarlı odak göstergesi kullanımıdır. Tipik bir web sayfası; atlanabilir başlıklar, diğer sayfalara yönlendiren bağlantılar, eylem tetikleyen butonlar ve girdi gerektiren form alanları gibi çok sayıda etkileşimli öğeden oluşur. Kullanıcı klavye tuşlarıyla (Tab veya yön tuşları gibi) bu öğeler arasında gezinirken, odak göstergesi o an "seçili" olan öğeyi görsel olarak vurgular.

Örneğin, bir sayfadaki dördüncü başlığa hızlıca gitmek istediğinizde, Tab tuşuna her bastığınızda odak göstergesi sırayla her etkileşimli öğeyi vurgular. Dördüncü başlığa ulaştığında, çevresinde belirgin bir çerçeve veya parlama belirerek o öğenin seçili olduğunu anında belli eder. Böylece kolayca etkinleştirebilir veya gezinmeye devam edebilirsiniz. Bu net görsel geri bildirim vazgeçilmezdir; olmasaydı, klavye kullanıcıları etkin bir şekilde "kör" kalır ve girdilerinin nereye uygulanacağını bilemezdi. Bu nedenle güçlü odak göstergeleri uygulamak yalnızca bir erişilebilirlik iyi uygulaması değil, aynı zamanda tüm kullanıcıların web içeriğini verimli ve güvenle gezinebilmesini, ihtiyaç duydukları bilgilere hızla ulaşabilmesini sağlayan kapsayıcı web tasarımının temel bir gereğidir. Web sitenizdeki etkileşimli öğelerin kullanılabilirliğini ve keşfedilebilirliğini önemli ölçüde artırır.

Teknik Not: WCAG 2.1 AA standardı, odak göstergelerinin en az 3:1 kontrast oranına sahip olmasını ve öğenin görünür alanının %100'ünü çevrelemesini şart koşar. CSS'de :focus-visible pseudo-class'ı kullanılarak klavye odak durumları özelleştirilebilir.