WCAG 2.4.7: Odak Görünür

Bu Kuralın Anlamı

WCAG 2.4.7 Focus Visible, bir web sayfasındaki her etkileşimli öğenin — bağlantılar, butonlar, form girdileri, özel bileşenler ve klavye ile kullanılabilen diğer tüm bileşenler — klavye odağı aldığında görünür bir odak göstergesi sergilemesini gerektirir. Basitçe söylemek gerekirse, bir kullanıcı sayfada gezinmek için Tab tuşuna bastığında, şu anda hangi öğenin etkin olduğunu net bir şekilde görebilmelidir.

Bu ölçüt, odak göstergesi için belirli bir görsel stil zorunlu kılmaz. Yalnızca bir tür görünür değişiklik olmasını şart koşar. Bununla birlikte, neredeyse fark edilmeyen bir gösterge — örneğin arka planla kaynaşan tek piksellik noktalı bir çerçeve — teknik olarak 2.4.7’yi karşılayabilir, ancak WCAG 2.2 ile gelen daha katı WCAG 2.4.11 (Focus Appearance) ölçütünde başarısız olabilir. Yalnızca 2.4.7 açısından bakıldığında, algılanabilir herhangi bir görsel değişiklik yeterlidir.

Geçer sayılan durumlar: Bir odak göstergesi, sayfada Tab ile gezen görebilen bir kullanıcının, ekran okuyucu anonslarına veya diğer görsel olmayan ipuçlarına ihtiyaç duymadan hangi öğenin odakta olduğunu tespit edebilmesi halinde geçer sayılır. Yaygın kabul gören uygulamalar arasında tarayıcı varsayılan çerçeveleri, özel CSS outline veya box-shadow kuralları, alt çizgi değişiklikleri ya da :focus veya :focus-visible durumunda uygulanan arka plan rengi değişimleri bulunur.

Başarısız sayılan durumlar: Geliştiricinin varsayılan tarayıcı odak halkasını — genellikle CSS’te outline: none veya outline: 0 ile — kaldırıp bunun yerine eşdeğer bir özel gösterge koymaması durumunda başarısızlık oluşur. Ayrıca, <div> veya <span> öğeleriyle oluşturulmuş özel bir bileşen tabindex ile klavye odağı alabilir hale getirilmiş, ancak odaklandığında görünür bir stil değişikliği almıyorsa da başarısızlık söz konusudur.

Resmî istisnalar: WCAG, bu ölçütün yalnızca klavye ile kullanılabilen arayüzler için geçerli olduğunu belirtir. Tamamen dekoratif olan veya sekme sırasından açıkça çıkarılmış (örneğin tabindex='-1' ile) bileşenlerin odak göstergesi göstermesi gerekmez; çünkü normal klavye gezinimiyle odak alamazlar.

Neden Önemlidir

Odak görünürlüğü, klavye erişilebilirliğinin temelidir ve klavye erişilebilirliği de çok geniş bir engelli kullanıcı grubuna erişimin kapısını açar. CDC’ye göre Amerika Birleşik Devletleri’ndeki yetişkinlerin %26’sı bir tür engelle yaşamaktadır ve bu kişilerin birçoğu işaretçi aygıtlar yerine klavye veya klavye taklidi yapan yardımcı teknolojilere güvenir.

Motor beceri kısıtlı kullanıcılar — ALS, serebral palsi, tekrarlayan zorlanma yaralanmaları veya Parkinson hastalığı gibi durumları olan kişiler dahil — sıklıkla klavyelere, anahtarlı cihazlara, nefesle çalışan kumandalara veya göz izleme yazılımlarına dayanır. Bu giriş yöntemlerinin tamamı tarayıcının klavye odak modeline bağlıdır. Odak göstergesi görünmezse, bu kullanıcılar sayfada nerede olduklarını belirleyemez, doğru kontrolü etkinleştiremez ve form gönderme, satın alma tamamlama veya menüde gezinme gibi kritik görevlerden tamamen dışlanabilirler.

Düşük görme yetisine sahip kullanıcılar ekran okuyucu kullanmasalar da ekranı büyütebilir ve görünür odağa ihtiyaç duyarlar. Sayfanın bir bölümüne yakınlaştıklarında, görünür odak halkası hangi öğenin etkin olduğunu gösterir ve etkileşimlerini yönlendirir.

Bilişsel ve dikkatle ilgili engeller de net odak göstergelerinden fayda sağlar. Dikkat eksikliği (ADHD) veya hafıza güçlüğü olan kullanıcılar, karmaşık bir sayfada konumlarını sık sık kaybeder; belirgin bir odak göstergesi güvenilir bir görsel referans noktası sunar.

Somut bir gerçek dünya senaryosu: Sadece klavye kullanarak bir e-ticaret sitesinde gezen, multipl sklerozlu bir kullanıcıyı düşünün; fareyi hassas kullanmak zorlaştığı için klavyeye güvenmektedir. Ürün sayfasında Tab ile “Sepete Ekle” butonuna ulaşmaya çalışır. Geliştirici odak halkasını bastırmışsa, kullanıcı odak konumuna dair hiçbir işaret görmez. Enter’a basar ve ya hiçbir şey olmaz (odak etkileşimli olmayan bir öğeye gelmiştir) ya da yanlış eylem tetiklenir. Sonuç; hayal kırıklığı, görevin yarım bırakılması ve işletme için kaybedilen gelirdir — üstelik tek bir CSS kuralıyla tamamen önlenebilir bir durumdur.

Engellilik bağlamının ötesinde, odak göstergeleri fare kullanımının zahmetli olduğu durumlarda tüm kullanıcılara fayda sağlar: klavye kısayollarıyla gezen ileri düzey kullanıcılar, harici faresi olmayan dizüstü bilgisayar kullanıcıları ve uzun formlar dolduran kişiler. Görünür odak, semantik HTML ve doğru sekme sırasını teşvik ederek dolaylı olarak SEO’yu da iyileştirir; arama motoru tarayıcıları bu uygulamaları ödüllendirir.

İlgili Axe-core Kuralları

WCAG 2.4.7, odak göstergesinin görünür olup olmadığını otomatik araçların güvenilir biçimde tespit edememesi nedeniyle manuel test gerektirir. Axe-core ve benzeri motorlar, outline: none gibi bir CSS kuralının varlığını saptayabilir; ancak tüm temalar, yüksek karşıtlık modları ve tarayıcı işleme motorları boyunca ortaya çıkan görsel sonucu değerlendiremez. Aşağıda test ortamı açıklanmaktadır:

• Manuel test gerekli — focus-visible bastırılması: Axe-core, 2.4.7 ihlallerini kesin olarak işaretleyen özel bir kural sunmaz; çünkü bunu yapmak, sayfanın işlenmesini, her öğe üzerinden Tab ile geçilmesini ve odak göstergesi üzerinde piksel düzeyinde karşıtlık analizi yapılmasını gerektirir — bu da statik veya yalnızca DOM düzeyinde analizle mümkün değildir. Bunun yerine, test uzmanlarının sayfada Tab ile gezinerek her etkileşimli öğede odak değişiminin görsel olarak gerçekleştiğini doğrulaması gerekir.
• css-orientation-lock ve stil kontrollerinden gelen kısmi sinyal: Bazı axe-core yapılandırmaları, stil sayfalarında outline: 0 veya outline: none bulunmasını en iyi uygulama uyarısı olarak işaretler; ancak bu, kesin bir ihlal kontrolü değil, sezgisel bir yaklaşımdır; çünkü bu kural, stil kademesinde başka bir yerde tanımlanmış geçerli bir özel odak stiliyle geçersiz kılınmış olabilir.
• Otomasyonun neden yetersiz kaldığı: Bir odak göstergesi yalnızca belirli durumlarda (örneğin bir modal açıkken), yalnızca belirli öğe türleri için veya yalnızca belirli renk temalarında gizlenmiş olabilir. Bu koşullu hatalar, gerçek işlenmiş ortamda her etkileşimli öğede gezinip görünürlüğü doğrulayacak bir insan test uzmanı gerektirir. Axe DevTools Pro gibi araçlar, outline: none uygulanmış öğeleri vurgulayarak yardımcı olabilir; ancak nihai geçer/kalır kararı insan tarafından verilmelidir.

Nasıl Test Edilir

1. Otomatik ön tarama: Sayfada axe DevTools’u (tarayıcı eklentisi veya CLI) ya da Google Lighthouse’u çalıştırın. Odak stilleriyle ilgili en iyi uygulama veya deneysel uyarıları arayın. Bunlar 2.4.7 ihlalini kesin olarak doğrulamaz; ancak incelenmeye değer öğeleri ortaya çıkarır. Lighthouse’ta “Accessibility” kategorisinde odakla ilgili bulguları kontrol edin. Raporu dışa aktarın ve işaretlenen tüm etkileşimli öğeleri not alın.
2. Manuel klavye Tab testi: Farenizi çıkarın veya kenara koyun. Sayfanın en üstünden başlayarak Tab tuşuna tekrar tekrar basın ve tüm etkileşimli öğeler — bağlantılar, butonlar, girdiler, açılır listeler, modallar, sekmeler, akordeonlar ve tarih seçiciler — arasında gezinin. Her durakta, odaktaki öğenin odakta olmayan komşularından görsel olarak ayırt edilebilir olduğunu doğrulayın. Odak geldiğinde hiçbir görünür değişiklik üretmeyen her öğeyi kaydedin.
3. Ters Tab testi: Sayfada geriye doğru gezinmek için Shift+Tab kullanın ve görsel kontrolü tekrarlayın. Bazı uygulamalarda, CSS özgüllüğü sorunları nedeniyle odak görünürlüğü yalnızca tek yönde bozulur.
4. NVDA + Firefox testi: NVDA çalışırken Firefox’u açın. Göz Atma Modu’nu (yön tuşları) kullanın ve ardından form kontrolleriyle etkileşim kurmak için Form Modu’na (Enter) geçin. NVDA’nın odakta olduğunu duyurduğu her öğenin ekranda da görünür bir göstergeye sahip olduğunu doğrulayın — bu, yardımcı teknoloji odağı ile tarayıcı odağı arasındaki tutarsızlıkları yakalamak için faydalıdır.
5. VoiceOver + Safari testi (macOS/iOS): VoiceOver’ı etkinleştirin ve etkileşimli öğeler arasında gezinmek için Tab veya VO+Sağ Ok tuşlarını kullanın. Ekrandaki odak halkasının VoiceOver’ın duyurduklarıyla eşleştiğini görsel olarak doğrulayın.
6. JAWS + Chrome testi: JAWS’ı sanal imleç modunda ve ardından uygulama modunda kullanın. Etkileşimli kontroller arasında Tab ile gezin ve odaklanan her öğede görünür odak göstergesinin belirdiğini doğrulayın.
7. Yüksek karşıtlık modu testi: Windows High Contrast Mode’u (veya macOS Increase Contrast’ı) etkinleştirin ve Tab testini tekrarlayın. Bazı odak göstergeleri, yüksek karşıtlık temalarında kaybolan renklere dayanır; gösterge bu modlarda da görünür kalmalıdır.
8. CSS incelemesi: Tarayıcı Geliştirici Araçlarını açın, etkileşimli bir öğe seçin, Tab tuşuna basarak odaklanana kadar ilerleyin ve hesaplanmış stilleri inceleyin. Hiçbir kuralın, telafi edici bir odak stili olmadan outline: none veya outline: 0 ayarlamadığını doğrulayın. Ayrıca klavye ile tetiklenen odağın kapsandığından emin olmak için :focus-visible ile :focus kullanımını da kontrol edin.

Nasıl Düzeltilir

Yerine koyma olmadan global outline bastırma — Hatalı

<!-- Tüm odak göstergelerini global olarak kaldıran CSS reset -->
<style>
  * {
    outline: none; /* Her öğeden odak halkasını kaldırır */
  }
</style>

<a href='/products'>View Products</a>
<button type='submit'>Buy Now</button>

Yerine koyma olmadan global outline bastırma — Doğru

<!-- Global outline: none reset'ini kaldırın.
     Görsel olarak net bir özel odak stili sağlayın. -->
<style>
  /* Azaltılmış hareketi tercih eden kullanıcılara saygı gösterin */
  :focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
</style>

<a href='/products'>View Products</a>
<button type='submit'>Buy Now</button>
<!-- Artık her iki öğe de klavye ile odaklandığında yüksek karşıtlıklı mavi bir çerçeve gösterir -->

Odak stili olmayan özel div tabanlı buton — Hatalı

<!-- Buton gibi stillenmiş, odaklanabilir yapılmış, ancak :focus CSS'i eksik bir div -->
<style>
  .fake-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #e00;
    color: #fff;
    cursor: pointer;
  }
  /* Tanımlanmış bir :focus veya :focus-visible kuralı yok */
</style>

<div class='fake-btn' tabindex='0' role='button'
     onclick='addToCart()' onkeydown='handleKey(event)'>
  Add to Cart
</div>

Odak stili olmayan özel div tabanlı buton — Doğru

<!-- Klavye kullanıcıları bu öğe odaklandığında net bir gösterge
     görsün diye özel bileşene :focus-visible ekleyin -->
<style>
  .fake-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #e00;
    color: #fff;
    cursor: pointer;
  }
  .fake-btn:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 3px;
  }
</style>

<div class='fake-btn' tabindex='0' role='button'
     onclick='addToCart()' onkeydown='handleKey(event)'>
  Add to Cart
</div>
<!-- Sarı çerçeve yalnızca klavye odağında görünür, fare tıklamasında değil -->

Modal örtüsü içinde gizlenen odak halkası — Hatalı

<!-- Modal, varsayılan outline'ı kırpan ve görünmez kılan
     overflow:hidden ve bir stacking context uygular -->
<style>
  .modal-body {
    overflow: hidden; /* Öğenin dışına taşan outline'ları kırpar */
    border-radius: 8px;
  }
</style>

<div class='modal-body'>
  <button>Confirm Order</button>
  <button>Cancel</button>
</div>

Modal örtüsü içinde gizlenen odak halkası — Doğru

<!-- Outline yerine box-shadow kullanın; böylece stacking context içinde
     işlenir ve asla kırpılmaz -->
<style>
  .modal-body {
    overflow: hidden;
    border-radius: 8px;
  }
  .modal-body button:focus-visible {
    /* box-shadow, overflow:hidden tarafından kırpılmaz --
       öğenin kendi kutusu içinde kalır -->
    box-shadow: 0 0 0 3px #005fcc;
    outline: none; /* Çift halka oluşmasını önlemek için varsayılanı kaldırın */
  }
</style>

<div class='modal-body'>
  <button>Confirm Order</button>
  <button>Cancel</button>
</div>

Yaygın Hatalar

• Hangi öğeleri etkilediğini denetlemeden temel bir CSS reset’ine outline: none eklemek. normalize.css’in eski sürümleri veya bazı Bootstrap yardımcı sınıfları gibi birçok popüler reset, odak halkalarını global olarak bastırır. Her zaman klavye kullanıcıları için görünürlüğü geri getiren açık bir :focus-visible kuralıyla bunu takip edin.
• :focus-visible daha uygunken yalnızca :focus’a güvenmek — ya da tam tersi. Yalnızca :focus kullanmak, göstergenin fare tıklamalarında da görünmesine neden olur; bu da tuhaf görünebilir. Yalnızca :focus-visible kullanıp bir :focus geri dönüşü sağlamamak ise eski tarayıcılarda hiçbir gösterge olmamasına yol açabilir. Hedeflediğiniz tüm tarayıcılarda test edin.
• Bir bileşen kütüphanesi tema geçersiz kılmasında, kademeyi anlamadan outline: none uygulamak. Tema dosyasındaki tek bir geçersiz kılma, ondan miras alan tüm bileşenler için — üçüncü taraf bileşenler dahil — odak göstergelerini sessizce ortadan kaldırabilir.
• Odak rengi olarak, öğe veya sayfa arka planına karşı yetersiz karşıtlığa sahip bir renk kullanmak. Beyaz arka plan üzerinde açık gri bir çerçeve teknik olarak bir outline ekler; ancak fark edilmesi zor olabilir. 2.4.7 belirli bir karşıtlık oranı zorunlu kılmasa da 2.4.11 bunu yapar — ve geliştiriciler uyduklarını düşünürken bile düşük karşıtlıklı odak göstergeleri denetimlerde sıkça hata kaynağıdır.
• Tarayıcının varsayılan outline’ını kırpan bir kapsayıcıda overflow: hidden veya clip-path kullanmak. Çözüm, odak göstergelerini, öğenin kendi kutusu içinde işlenen ve üst kapsayıcıların overflow kuralları tarafından kırpılmayan box-shadow tabanlı hale getirmektir.
• SVG veya Canvas bileşenleri içindeki etkileşimli öğelerde odak göstergelerini unutmak. Özel grafik araç ipuçları, SVG tabanlı simge butonlar ve canvas tabanlı çizim araçlarının çoğunda yerel odak stili yoktur. Bunlar için açık ARIA rolleri, tabindex ve :focus-visible CSS ya da JavaScript ile tetiklenen görsel geri bildirim gerekir.
• Odak görünürlüğünü yalnızca üretim CSS’inde (örneğin bir post-processor veya build adımıyla) kaldırmak, geliştirme ortamında görünür bırakmak. Bu, geliştirme ekibinin yerel QA’dan geçmesini sağlarken son kullanıcılara bozuk erişilebilirlik sunulmasına neden olur.
• Odak göstergesini yalnızca <a> öğesine uygulayıp, SPA gezinme bağlantıları için kullanılan role='link' span öğelerine uygulamamak. Yerel etiketi ne olursa olsun, klavye ile odaklanabilen her öğenin görünür bir odak durumuna ihtiyacı vardır.
• Odak halkalarını, mobil kullanıcıların her zaman dokunmatik ekran kullanacağı varsayımıyla yalnızca belirli görüntü alanı genişliklerinde medya sorgularıyla gizlemek, Bluetooth klavye kullanan tablet kullanıcılarını ve klavye girdisine güvenen yatay mod kullanıcılarını odak göstergesi olmadan bırakır.
• Odak halkasının görünmesini engellemek için programatik odak sonrasında JavaScript ile hemen .blur() çağırmak. Bu, odak görünürlüğünü tamamen ortadan kaldıran kritik bir hatadır ve asla tasarım kısayolu olarak kullanılmamalıdır.

Türkiye’nin Erişilebilirlik Mevzuatıyla İlişkisi

Türkiye’nin 21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete’de yayımlanan 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, Türkiye’de faaliyet gösteren geniş bir kurum yelpazesi için bağlayıcı web ve mobil erişilebilirlik gereklilikleri getirir. Genelge, kapsamdaki kuruluşlar için WCAG 2.2 Seviye AA’ya uyumu zorunlu kılar; bu da WCAG 2.4.7 Focus Visible ölçütünü, yalnızca iyi uygulama önerisi olmaktan çıkarıp doğrudan uygulanabilir bir yükümlülük haline getirir.

Genelge kapsamındaki kuruluşlar arasında kamu kurum ve kuruluşları, e-ticaret platformları, bankalar ve finansal hizmet sağlayıcıları, hastaneler ve sağlık kuruluşları, 200.000 ve üzeri abonesi olan telekomünikasyon şirketleri, seyahat acenteleri, özel ulaşım şirketleri ve Millî Eğitim Bakanlığı (MEB) tarafından yetkilendirilmiş özel okullar yer alır. Bu kuruluşların tamamı için dijital arayüzlerinde görünür odak göstergeleri sunmamak, yalnızca kullanılabilirlik eksikliği değil, aynı zamanda mevzuata aykırılık sorunudur.

Aile ve Sosyal Hizmetler Bakanlığı tarafından verilen Erişilebilirlik Logosu, kapsamdaki kuruluşların uyumu gösterme amacıyla kullanabildiği resmî sertifikasyon işaretidir. Erişilebilirlik Logosu’nu almak, WCAG 2.2 Seviye AA düzeyinde resmî bir denetimden geçmeyi gerektirir. WCAG 2.4.7, denetçilerin değerlendireceği AA ölçütlerinden biridir ve genellikle yukarıda test bölümünde açıklandığı şekilde manuel klavye testleriyle incelenir. Sitesinde odak halkalarını bastıran veya özel bileşenlerde görünür odak uygulamayan bir kuruluş, logo için gerekli denetimden geçemez.

Özellikle Türk e-ticaret platformları için odak görünürlüğünün doğrudan ticari etkileri vardır: erişilebilir siteler, alışverişlerini yalnızca klavye veya anahtarlı erişimle yapan motor beceri kısıtlı müşteriler dahil daha geniş bir kullanıcı kitlesine ulaşır ve 2025/10 sayılı Cumhurbaşkanlığı Genelgesi’ne uyum, kuruluşları idari yaptırımlardan korur. Odak görünürlüğü olan kalıpları bileşen kütüphanesine en baştan yerleştirmek — bir denetim sonrasında sonradan yamalamak yerine — Erişilebilirlik Logosu’nu sürdürmenin ve Türkiye’nin erişilebilirlik yükümlülüklerini karşılamanın en maliyet etkin yoludur.