WCAG 2.4.13: Odak Görünümü

Bu Kuralın Anlamı

WCAG 2.4.13 Focus Appearance, WCAG 2.2 ile tanıtılan ve klavye odak göstergelerinin görsel görünümü için kesin, ölçülebilir gereksinimler belirleyen Seviye AAA bir ölçüttür. Daha düşük seviyedeki 2.4.11 (Focus Not Obscured, Seviye AA) ölçütü odaklanmış öğenin tamamen gizlenmemesini sağlarken ve 2.4.7 (Focus Visible, Seviye AA) yalnızca bir odak göstergesinin var olmasını gerektirirken, 2.4.13 bu göstergenin ne kadar görünür olması gerektiğini tanımlayarak daha ileri gider.

Bu ölçütten geçmek için, klavye odak göstergesi aşağıdaki koşulların tümünü sağlamalıdır:

• Asgari alan: Odak göstergesi, odaklanmamış bileşenin çevresi çarpı 2 CSS pikseline eşit veya daha büyük bir alana sahip olmalıdır. Pratikte, tipik dikdörtgen bir düğme için bu, odak çizgisinin alanının düğmenin çevresi × 2px değerine eşit veya ondan büyük olması gerektiği anlamına gelir — tüm sınır boyunca en az 2px kalınlığında bir odak halkası bu gereksinimi karşılar.
• Odak göstergesinin kontrast oranı: Odak göstergesini oluşturan pikseller, odaklanmış ve odaklanmamış durumları arasında en az 3:1 kontrast oranına sahip olmalıdır. Yani bir düğmenin varsayılan durumda beyaz arka planı varsa, etrafına çizilen odak halkası bu beyaz arka plana karşı en az 3:1 kontrast sağlamalıdır.
• İçerideki içeriğin kontrastının azaltılmaması: Odak göstergesi, odaklanmış bileşenin içindeki metnin veya diğer içeriğin kontrastını 4.5:1’in (18pt / 14pt kalın altı metin için) veya 3:1’in (büyük metin ve metin dışı içerik için) altına düşürmemelidir.

Bir bileşenin geçmesi için bu üç koşulun aynı anda karşılanması gerekir. Yeterince büyük ama yetersiz kontrasta sahip bir odak göstergesi başarısız olur. Aynı şekilde, yüksek kontrastlı ama çok küçük bir gösterge de başarısız olur.

WCAG spesifikasyonu önemli bir istisna tanımlar: Tarayıcının varsayılan odak göstergesi (user-agent varsayılanı) gereksinimleri karşılıyorsa, yazarın özel bir stil eklemesi gerekmez. Ancak tarayıcı varsayılanları önemli ölçüde değişir — Chromium tabanlı tarayıcılar genellikle mavi bir dış çizgi sağlar, Safari ise bazı renk şemalarında yeterli kontrastı olmayan bir halka oluşturabilir. Yazarlar, varsayılan göstergenin eşiği karşıladığını doğrulamalı veya sağlam bir özel stil sunmalıdır.

Bu ölçüt, tüm etkileşimli ve odaklanabilir bileşenlere uygulanır: bağlantılar, düğmeler, form girdileri, seçim menüleri, onay kutuları, radyo düğmeleri, ARIA rolleriyle oluşturulmuş özel bileşenler ve tabindex ile odaklanabilir hale getirilen herhangi bir öğe. Ayrıca yalnızca CSS ile pseudo-elementler üzerinden veya JavaScript kontrollü sınıf değişiklikleriyle oluşturulan odak göstergeleri için de geçerlidir.

Neden Önemlidir

Odak görünürlüğü, geniş bir kullanıcı kitlesi için kritik bir gezinme ipucudur. Odak göstergeleri ince, düşük kontrastlı veya tamamen yok olduğunda, bu kullanıcılar sayfa içindeki mekânsal yönelimlerini kaybeder — nerede olduklarını veya sırada nereye gidebileceklerini anlayamazlar.

Yalnızca klavye kullanan kullanıcılar — titreme, felç veya tekrarlayan zorlanma yaralanmaları gibi motor bozuklukları olan kişiler de dahil — gezinmek için tamamen klavyeye güvenir. Bu kullanıcılar için görünmez veya zar zor görülebilen bir odak göstergesi sadece bir rahatsızlık değildir; tüm arayüzü kullanılamaz hale getirir. Dünya Sağlık Örgütü’ne göre, yaklaşık 1.3 milyar insan bir tür engelle yaşamaktadır ve motor bozukluklar, fare kullanmaktan kaçınan veya kullanamayan kişiler arasında en büyük kategorilerden birini temsil eder.

Düşük görme yetisine sahip kullanıcılar tam ekran okuyucu kullanmayıp büyütme yazılımı kullananlar, yönlerini bulmak için odak halkasına da güvenirler. Yüksek yakınlaştırma seviyelerinde, 1px’lik varsayılan dış çizgi görünüm alanı tarafından kırpılabilir veya benzer renkte bir arka plana karşı basitçe görünmez olabilir. Bu kullanıcılar, tam da yüksek büyütmede hassas fare hedeflemesi zor olduğu için genellikle klavye ile gezinirler.

Bilişsel ve dikkatle ilgili engeller (DEHB, anksiyete bozuklukları ve travmatik beyin yaralanmaları gibi) sayfa boyunca görsel bilgiyi takip etmeyi zorlaştırabilir. Son derece görünür, açıkça ayırt edilebilir bir odak göstergesi, kullanıcının mevcut konumu için tartışmasız bir sabitleyici sağlayarak gezinmenin bilişsel yükünü azaltır.

Durumsal engeller de önemlidir: dışarıda düşük parlaklıklı bir dizüstü bilgisayar ekranında test yapan bir geliştirici veya yaşa bağlı kontrast duyarlılığı azalmış yaşlı bir kullanıcı, klinik bir tanı olmasa bile ince veya düşük kontrastlı odak halkalarıyla zorlanabilir.

Gerçek bir senaryoyu düşünün: bir bankanın para transferi için çevrimiçi formunda on giriş alanı ve dört eylem düğmesi bulunuyor. Parkinson hastalığı olan bir kullanıcı formda klavyeyle sekme yaparak ilerliyor. Odak göstergesi, beyaz arka plan üzerinde açık gri renkte varsayılan 1px noktalı bir dış çizgi ise, kullanıcı şu anda hangi alanı düzenlediğini güvenilir şekilde takip edemez. Alıcının alanını geçtiğini göremediği için yanlış hesaba transfer gönderme riski vardır. Sağlam, yüksek kontrastlı bir odak dış çizgisi bunu tamamen önlerdi.

Erişilebilirliğin ötesinde, net bir odak göstergesi tüm kullanıcılar için bir kullanılabilirlik iyileştirmesidir. Formlar ve menülerde sık sık klavye ile gezinmeyi tercih eden güç kullanıcıları — geliştiriciler, veri girişi profesyonelleri ve ekran okuyucu kullanıcıları arasında yaygın bir model — hızlı ve güvenilir yönelimden fayda sağlar. Ayrıca dolaylı bir SEO sinyali de vardır: güçlü erişilebilirliğe sahip siteler genellikle daha düşük hemen çıkma oranlarına ve daha yüksek görev tamamlama oranlarına sahiptir; bunların her ikisi de olumlu sıralama faktörleriyle ilişkilidir.

İlgili Axe-core Kuralları

WCAG 2.4.13, manuel test gerektirir çünkü otomatik araçlar, her olası tarayıcı işleme bağlamında bir odak göstergesinin boyutunu ve kontrastını tam olarak değerlendiremez. Axe-core’un 2.4.13 ihlallerini doğrudan işaretleyen tek bir otomatik kuralı yoktur. Nedenler tekniktir:

• Neden otomasyon yetersizdir: Bir odak göstergesinin tam piksel alanını hesaplamak, her etkileşimli öğede klavye odağını simüle etmeyi, işlenen dış çizgi geometrisini (tarayıcıya, işletim sistemine, yakınlaştırma seviyesine ve CSS’e bağlıdır) ölçmeyi, gösterge piksellerinin komşularına karşı kontrast oranını hesaplamayı ve bunların hiçbirinin içeriği kapsayan kontrast gereksinimini ihlal etmediğini doğrulamayı gerektirir. Mevcut hiçbir otomatik erişilebilirlik motoru, tüm bileşenler için bu adımların tümünü güvenilir şekilde gerçekleştirmez. Axe-core, herhangi bir odak stilinin yokluğunu (2.4.7 ile ilişkili) işaretleyebilir, ancak var olan stilin 2.4.13’teki alan ve kontrast eşiklerini karşılayıp karşılamadığını ölçemez.
• Odakla ilgili kurallar üzerinden kısmi kapsama: Axe-core’un focus-visible kuralı, öğelerin hiç görünür odak göstergesi olup olmadığını kontrol eder. Bir öğede outline: none veya outline: 0 varsa ve alternatif bir görsel gösterge yoksa, bu kural bunu işaretler. Ancak bu kuraldan geçmek, 2.4.13 ile uyumu garanti etmez — teknik olarak görünür bir dış çizgiye sahip bir öğe, yine de çok ince veya çok düşük kontrastlı olabilir.
• Manuel test yetkili yöntemdir: Test uzmanları, odaklanmış durumda her etkileşimli bileşeni görsel olarak incelemeli, dış çizgi boyutlarını ölçmeli veya tahmin etmeli ve kontrast oranlarını bir renk kontrast analizörü kullanarak doğrulamalıdır. Bu nedenle WCAG, axe-core bağlamında 2.4.13’ü yalnızca manuel test gerektiren bir ölçüt olarak listeler.

Nasıl Test Edilir

1. Otomatik tarama (yalnızca kısmi sinyal): Sayfada axe DevTools veya Lighthouse çalıştırın. focus-visible veya focus-order-semantics ile ilgili herhangi bir hata olup olmadığına bakın. Bunlar doğrudan 2.4.13 ihlallerini işaretlemese de, odak stilinin tamamen bastırıldığı öğeleri ortaya çıkarabilir; bu da ön koşul niteliğinde bir başarısızlıktır. Chrome DevTools’ta, Accessibility panelini açın ve odaklanabilir öğeler arasında gezinmek için "Tab" inceleme modunu kullanın.
2. Görsel klavye gezinme testi: Farenizi çıkarın veya bir kenara koyun. Sayfadaki her etkileşimli öğe arasında ilerlemek için Tab tuşuna basın. Her odaklanmış öğe için odak göstergesini görsel olarak inceleyin. Şunu sorun: Açıkça görülebilen bir halka veya başka bir gösterge var mı? En az 2px kalınlığında görünüyor mu? Çevresindeki arka plana karşı güçlü bir kontrast oluşturuyor mu? Odak noktasını görmekte tereddüt ettiğiniz veya zorlandığınız öğeleri not edin.
3. Kontrast ölçümü: WebAIM Contrast Checker veya Colour Contrast Analyser masaüstü aracını kullanın. Odak bir bileşendeyken ekran görüntüsü alın. Odak göstergesi piksellerinin rengini ve hemen bitişiğindeki arka planın rengini örnekleyin. Kontrast oranının en az 3:1 olduğunu doğrulayın.
4. Boyut ölçümü: Tarayıcı DevTools’unu (Chrome veya Firefox) kullanın. Odaklanmış bir öğe seçin ve hesaplanmış stillerini inceleyin. outline-width, outline-offset ve odak halkası olarak kullanılan herhangi bir box-shadow değerini kontrol edin. Öğenin çevresini (2 × genişlik + 2 × yükseklik) 2px ile çarparak asgari alanı hesaplayın. Göstergenin işlenen alanının bu değeri karşıladığını veya aştığını doğrulayın.
5. Ekran okuyucu + klavye testi (NVDA + Firefox): Sayfayı Firefox’ta NVDA açıkken açın. Tab ve ok tuşlarıyla gezin. Görsel odak göstergesinin NVDA’nın duyurduğu odakla senkronize hareket ettiğini doğrulayın. Özellikle odağın JavaScript ile yönetildiği özel bileşenlere (karuseller, modallar, akordeonlar) dikkat edin.
6. VoiceOver + Safari (macOS/iOS): Command + F5 ile VoiceOver’ı etkinleştirin. Etkileşimli öğeler arasında gezinmek için Tab tuşunu kullanın. VoiceOver imlecinin (siyah dış çizgi kutusu) uygun bir CSS odak göstergesinin yerine geçmediğini doğrulayın — sayfanın kendisi bağımsız bir odak göstergesi sağlamalıdır.
7. Yüksek kontrast modu testi: Windows’ta Yüksek Kontrast modunu etkinleştirin (Ayarlar → Kolay Erişim → Yüksek Kontrast). Sayfayı yeniden yükleyin ve klavye gezinme testini tekrarlayın. Bazı CSS odak stilleri, yüksek kontrast modunda işletim sistemi tarafından geçersiz kılınır; görünür bir göstergenin hâlâ göründüğünü doğrulayın. Gerekirse stilleri koşullu olarak ayarlamak için forced-colors: active CSS medya sorgusunu kullanın.

Nasıl Düzeltilir

Varsayılan tarayıcı dış çizgisi kaldırılmış — Hatalı

<!-- Birçok stil sayfası varsayılan odak dış çizgisini global olarak bastırır -->
<style>
  * {
    outline: none; /* Sitedeki TÜM odak göstergelerini kaldırır */
  }
  a:focus, button:focus {
    outline: 0; /* Yedekleme olmadan yapılan gereksiz kaldırma */
  }
</style>
<button>Submit Payment</button>

Varsayılan tarayıcı dış çizgisi kaldırılmış — Doğru

<!-- Varsayılanı yalnızca daha iyi bir özel gösterge sağlarken kaldırın -->
<style>
  /* Yalnızca :focus-visible geçerliyken varsayılan dış çizgiyi bastırın, ardından güçlü bir yedek sağlayın */
  :focus-visible {
    outline: 3px solid #0057b8; /* 3px, tipik öğeler için alan gereksiniminin karşılanmasını sağlar */
    outline-offset: 2px;       /* Ofset, göstergeyi öğe kenarından ayırarak netlik sağlar */
  }
  /* Windows Yüksek Kontrast modunda sistem anahtar sözcüklerini kullanarak forced-colors’a saygı gösterin */
  @media (forced-colors: active) {
    :focus-visible {
      outline: 3px solid ButtonText;
    }
  }
</style>
<button>Submit Payment</button>

Renkli arka planda düşük kontrastlı odak halkası — Hatalı

<style>
  .cta-button {
    background-color: #0057b8;
    color: #ffffff;
  }
  .cta-button:focus {
    outline: 2px solid #3399ff; /* Koyu mavi arka planda açık mavi dış çizgi: kontrast oranı ~1.4:1 — başarısız */
  }
</style>
<button class='cta-button'>Book Now</button>

Renkli arka planda düşük kontrastlı odak halkası — Doğru

<style>
  .cta-button {
    background-color: #0057b8;
    color: #ffffff;
  }
  .cta-button:focus-visible {
    /* Beyaz dış çizgi, koyu mavi düğmeye karşı güçlü bir kontrast oluşturur (kontrast ~8:1) */
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    /* Beyaz halkanın arkasındaki koyu ofset box-shadow, açık sayfa arka planlarına karşı kontrastı garanti eder */
    box-shadow: 0 0 0 5px #0057b8;
  }
</style>
<button class='cta-button'>Book Now</button>

Odak stili olmayan özel div tabanlı etkileşimli bileşen — Hatalı

<style>
  .tab-item { cursor: pointer; padding: 12px 20px; }
  /* Özel sekme için tanımlanmış herhangi bir :focus veya :focus-visible stili yok */
</style>
<div role='tab' tabindex='0' class='tab-item'>Reservations</div>

Odak stili olmayan özel div tabanlı etkileşimli bileşen — Doğru

<style>
  .tab-item {
    cursor: pointer;
    padding: 12px 20px;
    border-radius: 4px;
  }
  /* Açık :focus-visible stili — 3px outline-width ve ofset alan eşiğini karşılar */
  .tab-item:focus-visible {
    outline: 3px solid #d4550a; /* Beyaz arka plana karşı 3:1+ kontrast */
    outline-offset: 3px;
  }
</style>
<div role='tab' tabindex='0' class='tab-item'>Reservations</div>

Odak göstergesi olarak kullanılan ince box-shadow — Hatalı

<style>
  .form-input:focus {
    outline: none;
    /* 1px box-shadow yayılması: çoğu giriş boyutu için muhtemelen çok küçük bir alan */
    box-shadow: 0 0 0 1px #005fcc;
  }
</style>
<input type='text' class='form-input' placeholder='Your email' />

Odak göstergesi olarak kullanılan ince box-shadow — Doğru

<style>
  .form-input:focus-visible {
    outline: none;
    /*
      3px yayılma, tipik 300px genişliğindeki bir giriş alanı için yeterli alan sağlar.
      Beyaz arka planda #005fcc yaklaşık 5.9:1 kontrast verir — hem 2.4.13 (3:1) hem de 1.4.3 (4.5:1) için geçer.
    */
    box-shadow: 0 0 0 3px #005fcc;
  }
</style>
<input type='text' class='form-input' placeholder='Your email' />

Yaygın Hatalar

• Herhangi bir yedek odak göstergesi sağlamadan bir CSS reset içinde outline: none kullanmak. Birçok popüler CSS reset’i (eski Normalize.css sürümleri, özel reset’ler) dış çizgileri toptan kaldırır. Kaldırmayı, boyut ve kontrast gereksinimlerini karşılayan bir :focus-visible yedeğiyle her zaman eşleştirin.
• Yalnızca :focus için odak stili sağlamak, ancak :focus-visible için sağlamamak; bu da düğmelerde fare tıklamasıyla görünen odak halkalarının gören fare kullanıcılarını rahatsız etmesine ve geliştiricilerin doğru pseudo-class ayrımını kullanmak yerine bunları tamamen kaldırmasına yol açar.
• Bileşenin arka plan rengine çok yakın bir odak halkası rengi seçmek. Örneğin, beyaz #ffffff arka plan üzerinde açık mavi #99ccff halka, yaklaşık 1.5:1 kontrast oranına sahiptir; bu da gerekli 3:1’in çok altındadır.
• Simge düğmeleri veya onay kutuları gibi küçük bileşenlerde outline-width: 1px kullanmak. 24×24px’lik bir simgenin etrafındaki 1px’lik halka yaklaşık 96 kare piksel alana sahiptir, ancak 24×24’lük bir öğe için gereken asgari alan (24+24+24+24) × 2 = 192 kare pikseldir — tam olarak 2px kalınlık. 1px’lik dış çizgi bu hesaplamada başarısız olur.
• role='combobox', role='listbox' veya role='slider' gibi özel ARIA bileşenlerinde odak görünümünü test etmeyi unutmak. Bu bileşenler, açıkça ele alınmadıkça yerel CSS pseudo-class’larını atlayan, JavaScript ile yönetilen odağa sıklıkla sahiptir.
• Yalnızca a ve button etiketlerine odak stili uygulamak ve input, select, textarea ve tabindex='0' olan herhangi bir öğeyi ihmal etmek.
• Bir bileşen kütüphanesinde veya üçüncü taraf bileşende derinlerde odak stillerini geçersiz kılmak ve bu geçersiz kılmanın görünür göstergeyi kaldırdığını fark etmemek. Yaygın suçlular arasında, 2.4.13 eşiğini karşılamayabilecek hafif bir parıltı için box-shadow ayarlayan Bootstrap 4 gibi UI kit’leri bulunur.
• Windows Yüksek Kontrast modunda odak görünümünü test etmemek. Bazı CSS outline ve box-shadow teknikleri, Yüksek Kontrast modunda görünmez şekilde işlenir. Sistem rengi tabanlı görünür bir yedek sağlamak için @media (forced-colors: active) bloğunu kullanın.
• Dış çizgiyi öğenin kenarlığı içine taşımak için çok büyük negatif değerli outline-offset kullanmak. Bu, göstergenin öğenin arka planıyla üst üste binmesine neden olarak etkin kontrastı 3:1’in altına düşürebilir.
• Üst kapsayıcıdaki odak göstergesinin, içindeki alt etkileşimli öğeler için yeterli olduğunu varsaymak. Her odaklanabilir öğe, ölçütü bağımsız olarak karşılamalıdır; bir tablodaki vurgulanmış satır, o satır içindeki bağlantı hücresi için gereksinimi karşılamaz.

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

21 Haziran 2025’te 32933 sayılı Resmî Gazete’de yayımlanan Türkiye Cumhurbaşkanlığı Genelgesi 2025/10, Türkiye’de faaliyet gösteren geniş bir kurum yelpazesi için bağlayıcı web ve mobil erişilebilirlik gereksinimleri getirir. Genelge, teknik referans standardı olarak WCAG 2.2’yi benimser ve kapsanan kurumlar için Seviye AA uyumunu zorunlu kılar. WCAG 2.4.13 Focus Appearance, Seviye AAA bir ölçüttür ve bu nedenle genelge tarafından standart uyum için doğrudan zorunlu tutulmamaktadır.

Bununla birlikte, genelgenin kapsamı oldukça geniştir. Kapsanan kurumlar arasında kamu kurum ve kuruluşları, bankalar ve finansal hizmet sağlayıcıları, hastaneler ve sağlık kuruluşları, 200.000 veya daha fazla abonesi olan telekomünikasyon operatörleri, e-ticaret platformları, seyahat acenteleri, özel ulaşım şirketleri ve Millî Eğitim Bakanlığı (MoNE) tarafından yetkilendirilmiş özel okullar yer alır. Bu kuruluşların tümü için, 2.4.13 de dahil olmak üzere uygulanabilir ölçütlerde Seviye AAA uyumunu göstermek, yasal tabanı aşan birinci sınıf erişilebilirliğe bağlılığı ifade eder.

Kapsanan Türk kurumlarının 2.4.13’ü gönüllü olarak uygulaması için pratik ve itibarla ilgili nedenler vardır. Özellikle bankalar ve finansal hizmet sağlayıcıları, güvenli işlemler için klavye ile gezinmeye güvenen motor bozuklukları olan müşterilere hizmet verir. 2.4.13’ü karşılayan bir Türk bankasının çevrimiçi bankacılık portalı, yalnızca düzenleyici gereksinimleri aşmakla kalmaz, aynı zamanda kullanıcı hatası riskini azaltır ve kurumsal sosyal sorumluluk sergiler. Benzer şekilde, hastaneler ve hastaların randevu aldığı veya tıbbi kayıtlara eriştiği sağlık portalları, ince motor kontrolü azalmış veya düşük görme yetisine sahip yaşlı hastalar da dahil olmak üzere tüm kullanıcıların bu arayüzlerde güvenle gezinebilmesini sağlamalıdır.

Geniş abone tabanına sahip telekomünikasyon operatörleri, Türkiye’deki en yüksek trafikli dijital hizmetler arasındadır. Müşteri portalları ve self-servis uygulamaları, yaşlı yetişkinler ve engelli kullanıcıların önemli bir bölümünü de içeren milyonlarca kullanıcıya ulaşır. Bu platformlarda 2.4.13’ün gönüllü olarak uygulanması, tüm aboneler için eşit erişim sağlar ve AAA ölçütlerine yönelik zorunlu uyumun genişletilebileceği olası gelecekteki düzenleyici sıkılaştırmalarda operatörü avantajlı konuma getirir.

WCAG 2.2 AAA’ya tam uyum sağlamayı hedefleyen kuruluşlar için — ister tedarik gereksinimleri, ister Avrupa Erişilebilirlik Yasası’na tabi AB pazarlarına ihracat, ister iç erişilebilirlik politikaları tarafından yönlendirilsin — 2.4.13’ün uygulanması gerekli bir bileşendir. Accsible’ın overlay SDK’sı, bu makalede açıklanan yazar düzeyindeki CSS düzeltmelerini tamamlayarak, kuruluşların arayüzleri genelinde güçlü ve uyumlu odak göstergeleri sunmasına yardımcı olabilecek yapılandırılabilir odak geliştirme özellikleri sağlar.