Web sitelerinde ve uygulamalarda gezinmek, fare veya dokunmatik ekran kullanmayan milyonlarca kullanıcı için farklı bir deneyimdir. Klavyeleri, yardımcı teknolojileri (ekran okuyucular, anahtar kontrol cihazları) veya alternatif giriş yöntemlerini kullanan bu kullanıcılar için, sayfada nerede olduklarını anlamak hayati önem taşır. İşte tam bu noktada odak göstergeleri (focus indicators) devreye girer.

Odak göstergeleri, bir web sayfasında klavye odağının o anda hangi etkileşimli öğe (bağlantı, buton, form alanı vb.) üzerinde bulunduğunu belirgin bir görsel işaretle gösteren stillerdir. Tarayıcıların varsayılan olarak sunduğu mavi veya turuncu çerçeveler tanıdık gelse de, bu göstergeler her zaman yeterli değildir ve genellikle tasarımcılar tarafından kaldırılırlar – bu da erişilebilirlik açısından ciddi sorunlara yol açar.

Web İçeriği Erişilebilirlik Yönergeleri'nin (WCAG) en son sürümü olan WCAG 2.2, odak göstergelerinin önemini vurgularken, bunların yeterli görünürlüğe ve belirli özelliklere sahip olmasını şart koşan yeni kriterler getirmiştir.

Bu blog yazısında, WCAG 2.2 standartlarını karşılayan, görsel olarak çekici ve en önemlisi her arka plana karşı her zaman yeterli kontrasta sahip olan iki renkli odak göstergelerini nasıl tasarlayıp uygulayabileceğinizi detaylı bir şekilde inceleyeceğiz.

 

Odak Göstergeleri Nedir ve Neden Hayati Önem Taşır?

Odak göstergesi, klavyeyle (Tab, Shift+Tab tuşları veya yön tuşları) etkileşimli bir öğeye geldiğinizde, o öğenin etrafında, altında veya üzerinde beliren görsel işarettir. Bu, bir form alanına yazmaya başladığınızda, bir butona basmaya hazır olduğunuzda veya bir bağlantıya tıklayabileceğinizde size "buradasınız" diyen işarettir.

Odak göstergeleri neden sadece bir "ekstra özellik" değil, temel bir gerekliliktir?

1. Klavye Kullanıcıları İçin Navigasyon Pusulası: Fare imleci gibi sürekli takip edebileceğiniz bir işaretçisi olmayan klavye kullanıcıları için odak göstergesi, sayfadaki konumlarını ve bir sonraki etkileşimin nerede gerçekleşeceğini anlamanın tek yoludur. Gösterge olmadan, kullanıcılar "kör uçuş" yapar gibi sayfada gezinmeye çalışırlar.
2. Yasal ve Standart Gereklilik: WCAG 2.2 Başarı Kriteri 2.4.7 Odak Görünür (Focus Visible - AA Seviyesi), klavye odağının her zaman görsel olarak belirgin olmasını zorunlu kılar. Bu, web sitenizin yasal erişilebilirlik standartlarına uyumu için temel bir şarttır.
3. Genel Kullanılabilirlik İyileştirmesi: Sadece klavye kullanıcıları değil, geçici olarak klavye kullananlar (örneğin form doldururken), motor becerileri kısıtlı olanlar veya sadece sayfayı klavyeyle taramayı tercih eden güç kullanıcılar için de iyi tasarlanmış odak göstergeleri, kullanım deneyimini önemli ölçüde iyileştirir.
    

Kimler Odak Göstergelerine Kritik Derecede İhtiyaç Duyar?

Odak göstergeleri, geniş bir kullanıcı kitlesi için faydalı olsa da, belirli gruplar için vazgeçilmezdir:

• Ekran Okuyucu Kullanıcıları (Görme Engelli): Ekran okuyucular genellikle klavye komutları ile kontrol edilir. Gösterge, kullanıcının ekran okuyucunun o anda hangi öğe üzerinde "durduğunu" ve etkileşimde bulunmaya hazır olduğunu anlamasına yardımcı olur (her ne kadar ekran okuyucu metinsel olarak bilgi verse de, görsel işaret de destekleyicidir).
• Motor Becerileri Kısıtlı Kullanıcılar: Fareyi hassas bir şekilde kontrol etmekte zorlanan (tremor, kas distrofisi gibi durumlar) kullanıcılar için klavye veya baş/ağız çubukları gibi alternatif giriş cihazları birincil navigasyon aracıdır. Bu kullanıcılar odak göstergesine tamamen bağımlıdır.
• Klavyeye Bağlı Yardımcı Teknoloji Kullanıcıları: Konuşma-metin yazılımları, tek anahtar kontrol cihazları gibi klavyeyi taklit eden araçları kullananlar da odak göstergeleriyle yönlenir.
• Güç Kullanıcılar ve Verimlilik Odaklı Kullanıcılar: Şifre yöneticileri kullananlar, formları hızla dolduranlar veya arayüzde klavye kısayollarıyla gezmeyi tercih edenler için belirgin odak göstergeleri iş akışını hızlandırır.
   

WCAG 2.2 Odak Gereksinimleri Detaylı İnceleme

WCAG 2.2, odak göstergelerinin sadece var olmasını değil, aynı zamanda belirli görsel özelliklere sahip olmasını şart koşarak çıtayı yükseltmiştir:

 

2.4.7 Odak Görünür (Focus Visible) - Seviye AA

Bu kriterin özü şudur: Bir kullanıcı klavyeyle etkileşimli bir öğeye (bağlantı, buton, form kontrolü vb.) odaklandığında, bu odağın görsel olarak fark edilebilir bir şekilde gösterilmesi ZORUNLUDUR. Tarayıcının varsayılan odak stili genellikle bu gereksinimi karşılar, ancak tasarımcılar outline: none; gibi kodlarla bu varsayılan stili kaldırdığında veya kendi özel stillerini yeterince belirgin yapmadığında sorunlar ortaya çıkar.

 

2.4.13 Odak Görünümü (Focus Appearance) - Seviye AAA

Bu daha yüksek seviyeli kriter, odak göstergesinin görsel özelliklerine odaklanır. AAA seviyesi genellikle tüm siteler için zorunlu olmasa da, bu kriteri karşılamak en iyi pratik olarak kabul edilir ve daha geniş bir kullanıcı kitlesi için erişilebilirliği artırır.

Kriterin temel şartları şunlardır:

• Yeterli Alan: Odak göstergesinin alanı, odaklanan bileşenin 2 CSS piksel kalınlığındaki bir çevresinin alanına eşit veya daha büyük olmalıdır. Basitçe ifade etmek gerekirse, odak göstergesi belirgin bir kalınlığa sahip olmalıdır (örneğin, 2px veya daha kalın bir çizgi).
• Yeterli Kontrast (3:1): Odak göstergesinin bir alanı (tamamı değil, bir kısmı yeterli) şunlardan birine karşı en az 3:1 kontrast oranına sahip olmalıdır:
  • Odaklanmamış durumdaki bileşenin kendisi (varsa rengi/deseni).
  • Odaklanmamış durumdaki bileşenin hemen bitişiğindeki renkler (arka plan rengi, etrafındaki metin veya öğeler).

İşte bu 3:1 kontrast şartı, farklı arka plan renklerine sahip web sitelerinde sorun yaratır. Tek renkli bir odak göstergesi (örneğin sadece mavi bir çerçeve), hem beyaz hem de koyu gri bir arka plana karşı yeterli kontrasta sahip olmayabilir.

 

İki Renkli Odak Göstergeleri: Her Arka Plana Meydan Okuyan Kontrast

İki renkli odak göstergesi tekniği, WCAG 2.4.13'ün kontrast gereksinimini, sitenin arka planı ne olursa olsun garantili bir şekilde karşılamak için ortaya çıkmıştır.

Çalışma Prensibi:

Bu teknik, yüksek derecede zıt iki renk kullanır – biri çok açık (örneğin beyaz #FFFFFF) ve biri çok koyu (örneğin siyah #000000). Bu iki renk arasındaki kontrast oranı en az 9:1'dir (aslında siyah-beyaz 21:1'dir).

Mantık şudur: Eğer bir odak göstergesi bu iki renkten oluşuyorsa ve bu renkler kendi aralarında 9:1'den yüksek kontrasta sahipse, o göstergenin en az bir rengi, herhangi bir arka plan rengine karşı (siyah, beyaz veya aradaki herhangi bir renk) en az 3:1 kontrast oranını yakalayacaktır.

Örneğin:

• Arka plan beyazsa, açık renkli odak çizgisi görünmez, ama koyu renkli çizgi beyazla yüksek (21:1) kontrasta sahip olur.
• Arka plan siyahsa, koyu renkli odak çizgisi görünmez, ama açık renkli çizgi siyahla yüksek (21:1) kontrasta sahip olur.
• Arka plan orta gri ise, hem açık hem de koyu çizginin griye karşı kontrasta sahip olma olasılığı yüksektir.

Bu teknik, odak göstergesinin her zaman bir bölümünün arka plana karşı yeterince görünür olmasını sağlar.

 

CSS ile İki Renkli Odak Göstergesi Uygulaması

İki renkli odak göstergesi oluşturmak için en yaygın yöntem, :focus veya :focus-visible sözde sınıfıyla outline ve box-shadow özelliklerini bir arada kullanmaktır.

• outline: Öğenin kendi kutu modelinin dışında çizilir ve düzeni etkilemez. Tarayıcının zorlanmış renk modlarına genellikle uyum sağlar.
• box-shadow: Öğenin etrafına veya altına bir gölge ekler. 0 0 0 Xpx Color formatı, öğenin etrafına yayılmış düz renkli bir çerçeve gibi görünmesini sağlar.

Aşağıdaki CodePen örneğinde, farklı arka plan renklerine sahip butonlar üzerinde iki renkli odak göstergesinin nasıl çalıştığını görebilirsiniz. Denemek için "Run" butonuna basıp çıkan alanda Tab tuşu ile butonlar arasında gezinin:

See the Pen CSS ile İki Renkli Odak Göstergesi Uygulaması by Volkan İnanç (@Volkan-nan-) on CodePen.

Kod Açıklaması:

• :focus selectors, bir öğe odaklandığında çalışır (hem klavye hem de fare ile).
• :focus-visible selectors ise sadece klavyeyle veya odaklanmanın görsel bir işarete ihtiyaç duyduğu durumlarda çalışır. Bu, fareyle tıkladığınızda genellikle odak göstergesinin görünmemesini sağlar, bu da bazı tasarımcılar tarafından tercih edilir. WCAG 2.2 uyarınca :focus-visible kullanımı önerilir.
• outline: Öğenin etrafına bir çizgi çizer. outline-offset ile öğeden ne kadar uzakta çizileceğini belirlersiniz.
• box-shadow: 0 0 0 4px #000000 formatı, öğenin etrafında 4 piksel kalınlığında, kenarları yumuşatılmamış (yayılma yok) siyah bir çizgi gibi davranır. box-shadow'un avantajı, border-radius gibi özellikleri takip edebilmesidir (ancak outline bunu yapamaz).
• Örnekte, içteki 2px outline ve dıştaki 4px box-shadow birleşerek belirgin bir gösterge oluşturur. Her bir katman tek başına 2.4.13'ün "alan" gereksinimini (2px çevre alanı) karşılar.
• Beyaz (#FFFFFF) ve siyah (#000000) renkleri arasındaki kontrast oranı 21:1'dir. Bu, iki renkten birinin herhangi bir arka plana karşı en az 3:1 kontrast oranını karşılayacağını garanti eder.
   

Dikkat Edilmesi Gereken Ek Noktalar

• Varsayılanı Kaldırma: outline: none; veya outline: 0; kullanarak tarayıcının varsayılan odak stilini kaldırırsanız, MUTLAKA yerine WCAG gereksinimlerini karşılayan kendi özel odak stilinizi eklemelisiniz. Aksi takdirde erişilebilirlik ihlali yapmış olursunuz.
• Zorlanmış Renk Modları (Forced Colors): Yüksek Kontrast Modu gibi zorlanmış renk modları, box-shadow dahil bazı CSS özelliklerini geçersiz kılabilir. Bu nedenle, odak stilinde sadece box-shadow kullanmak yerine, outline özelliğini de dahil etmek önemlidir. outline: 2px solid transparent; gibi saydam bir outline ekleyerek, zorlanmış renk modlarında tarayıcının bu saydamlığı algılayıp kendi yüksek kontrastlı outline'ını çizmesini sağlayabilirsiniz.
• Karmaşık Arka Planlar: İki renkli odak göstergesi tekniği, arka planın düz bir renk olduğu durumlarda kontrastı garantiler. Eğer öğenin arkasında bir resim, gradyan veya başka bir UI bileşeni varsa, göstergenin o pikseldeki arka plan rengine karşı kontrastı manuel olarak veya otomatik araçlarla test etmek gerekebilir.
• outline-offset Kullanımı: Odak göstergesinin öğeye yapışık olmasını istemiyorsanız, outline-offset ile araya boşluk ekleyebilirsiniz. Bu, özellikle form alanları gibi zaten kenarlığı olan öğelerde faydalıdır. Ancak, göstergenin alanını hesaplarken outline-offset'in dahil edilmediğini unutmayın; göstergenin kendi alanı yeterli olmalıdır.
• Farklı Bileşen Türleri: Örnekte butonlar için gösterildi. Form alanları, linkler, checkbox/radio butonları gibi diğer etkileşimli öğeler için de benzer CSS kuralları tanımlayarak sitenizde tutarlı bir odak stili sağlayabilirsiniz.
   

Farklı Bileşenler İçin Örnek Odak Stilleri 

Farklı HTML öğelerinin şekilleri ve kullanımları farklı olduğundan, her biri için odak stilini biraz özelleştirmek iyi bir fikirdir. İşte daha kapsamlı bir form örneği üzerinde çeşitli bileşenlere uygulanmış iki renkli odak stilleri:

See the Pen Farklı Bileşenler İçin Örnek Odak Stilleri by Volkan İnanç (@Volkan-nan-) on CodePen.

focus-visible Polyfill Hakkında

:focus-visible sözde sınıfı modern tarayıcılarda (Chrome, Firefox, Edge, Safari) iyi desteklenir. Ancak Internet Explorer gibi daha eski tarayıcılar için destek sağlamak isterseniz, web sitenizin veya sonuna focus-visible polyfill betiğini ekleyebilirsiniz:

See the Pen ornekkod1 by Volkan İnanç (@Volkan-nan-) on CodePen.

Bu betik, klavye kullanıldığında odaklanılan öğelere .focus-visible sınıfı ekler. Ardından CSS'inizde :focus-visible yerine .focus-visible sınıfını hedefleyebilirsiniz veya yukarıdaki örnekte gösterildiği gibi :focus:not(:focus-visible) kullanarak sadece klavye odakları için stilleri :focus-visible'a taşıyabilirsiniz. Modern sitelerde bu polyfill genellikle gerekli değildir.

 

Test Etme

Uyguladığınız odak göstergelerini test etmek için:

1. Klavye ile Gezinme: Sadece Tab ve Shift+Tab tuşlarını kullanarak sitenizdeki tüm etkileşimli öğeler arasında gezinin. Odak göstergesinin her zaman görünür, belirgin ve öğeyi net bir şekilde çevrelediğinden emin olun.
2. Fare ile Tıklama: Bir öğeye fareyle tıklayın ve ardından Tab tuşuna basın. Eğer :focus-visible kullandıysanız, fareyle tıkladıktan sonra odak göstergesinin hemen kaybolduğunu, ancak Tab'a bastıktan sonra bir sonraki öğede tekrar göründüğünü doğrulayın.
3. Farklı Arka Planlarda Kontrol: Odak göstergelerinizin farklı arka plan renkleri (beyaz, siyah, gri, renkli, resimli) üzerinde yeterli kontrasta sahip olduğunu görsel olarak veya bir kontrast analiz aracı kullanarak kontrol edin.
4. Tarayıcı Yeniden Boyutlandırma ve Yakınlaştırma: Tarayıcı penceresinin boyutunu değiştirin ve metni %200'e kadar yakınlaştırın. Odak göstergelerinin doğru boyutta kaldığından ve öğelerden taşmadığından emin olun.
    

Erişilebilir Odak, Daha İyi Kullanıcı Deneyimi

WCAG 2.2 standartlarını karşılayan, iyi tasarlanmış odak göstergeleri, web sitenizi klavye kullanıcıları için çok daha kullanılabilir ve erişilebilir hale getirir. İki renkli odak göstergesi tekniği, farklı arka plan renkleri arasında tutarlı ve yeterli kontrast sağlamak için güçlü bir yöntem sunar.

Odak göstergeleri sadece bir teknik gereklilik değil, aynı zamanda kullanıcılara değer verdiğinizi ve onlara sorunsuz bir deneyim sunmak istediğinizi gösteren bir işarettir. Tasarım ve geliştirme süreçlerinizde odak göstergelerine öncelik vererek, daha kapsayıcı ve kullanıcı dostu dijital ürünler yaratabilirsiniz. Unutmayın, erişilebilirlik herkes için daha iyi bir web demektir!