WCAG 2.1.1: Klavye

Bu Kuralın Anlamı

WCAG 2.1.1 (Klavye), bir web sayfası veya uygulamadaki her bir işlevin klavye arayüzü kullanılarak çalıştırılabilir olmasını zorunlu kılar. Bu, bir kullanıcı bir düğmeye tıklayabiliyorsa, bir öğeyi sürükleyebiliyorsa, bir menüyü göstermek için üzerine gelebiliyorsa veya fareyle herhangi bir öğeyle etkileşime girebiliyorsa, aynı işlemi yalnızca klavye girdileriyle — genellikle Tab, Shift+Tab, Enter, Space ve ok tuşlarıyla — gerçekleştirebilmesi gerektiği anlamına gelir.

Bu ölçüt tüm etkileşimli öğelere uygulanır: bağlantılar, düğmeler, form kontrolleri, özel bileşenler (widget), modal diyaloglar, açılır menüler (dropdown), akordeonlar, karuseller, tarih seçiciler, sürükle-bırak arayüzleri, canvas tabanlı etkileşimler ve kullanıcı girdisine yanıt veren diğer tüm bileşenler. İçerik, kullanıcının bir çizim yolu gerçekleştirmesini gerektiriyorsa (girdinin yalnızca bitiş noktası değil, bizzat yolun kendisi olduğu durumlarda), bu WCAG’de resmi olarak tanınan tek istisnadır. Bu dar istisna dışında, diğer tüm işlevler klavye ile erişilebilir olmalıdır.

Başarılı sayılması, yalnızca klavye kullanan bir kullanıcının Tab veya ok tuşu gezintisiyle her etkileşimli öğeye ulaşabilmesi, Enter veya Space ile onu etkinleştirebilmesi ve hiçbir adımda fare gerektirmeden amaçlanan işlemi tamamlayabilmesi demektir. Başarısızlık ise şu durumlardan herhangi biri gerçekleştiğinde söz konusudur: etkileşimli bir öğe hiç odak alamıyorsa; odak alıyor ancak etkinleştirilemiyorsa; bir işlev yalnızca onmouseover veya ondblclick gibi bir fare olayıyla tetikleniyor ve klavye eşdeğeri yoksa; ya da kaydırılabilir bir konteyner klavye ile erişilebilir değilse ve içindeki içeriği tuzağa düşürüyorsa.

WCAG 2.1.1 ile WCAG 2.1.2 (Klavye Tuzağı Yok) arasındaki farkı ayırt etmek önemlidir. 2.1.1 ölçütü, klavye kullanıcılarının her şeye ulaşabilmesini ve kullanabilmesini sağlar; 2.1.2 ölçütü ise klavye kullanıcılarının hiçbir bileşenin içinde sıkışıp kalmamasını güvence altına alır. Tam Seviye A uyumu için her ikisinin de karşılanması gerekir.

Neden Önemlidir

Klavye erişilebilirliği niş bir konu değildir. Amerika Birleşik Devletleri’nde tahminen her 4 yetişkinden 1’i bir tür engelle yaşamaktadır ve Parkinson hastalığı, multipl skleroz, omurilik yaralanmaları, tekrarlayan zorlanma yaralanması (RSI), uzuv farklılıkları ve titremeler gibi durumları içeren motor bozukluklar, kullanıcıların standart bir fare veya dokunmatik ekranı kullanmasını sıklıkla engeller. Bu kullanıcılar tamamen klavyelere, anahtarlı kontrol cihazlarına, nefesle çalışan (sip-and-puff) cihazlara, baş işaretleyicilere veya nihayetinde işletim sistemi düzeyinde klavye girdisini taklit eden diğer yardımcı teknolojilere güvenirler.

NVDA, JAWS veya VoiceOver gibi ekran okuyuculara güvenen görme engelli ve az gören kullanıcılar tamamen klavye ile gezinirler. Bir öğe klavye ile erişilebilir değilse, ekran okuyucu onu asla duyurmaz ve içerik o kullanıcı için tamamen görünmez hale gelir. Dünya Sağlık Örgütü’ne göre, dünya genelinde en az 2,2 milyar insan bir tür yakın veya uzak görme bozukluğuna sahiptir.

Somut bir senaryo düşünün: Her iki elinde ileri düzey romatoid artrit olan bir kullanıcı bir e-ticaret ödeme sayfasını ziyaret ediyor. Sitenin özel olarak geliştirilmiş ödeme yöntemi seçicisi, yalnızca fare tıklamalarına yanıt veren stil verilmiş <div> öğeleri serisi olarak uygulanmış. Kullanıcı konteynere Tab ile gelebiliyor, ancak hiçbir bireysel seçenek odak almıyor ve Enter’a basmak hiçbir şey yapmıyor. Satın alma işlemini tamamlayamıyor. Bu küçük bir rahatsızlık değil — ticari bir işlemden tamamen dışlanma anlamına geliyor ve hem yasal risk hem de işletme için önemli bir gelir kaybı senaryosu oluşturuyor.

Engellilik bağlamının ötesinde, klavye erişilebilirliği hız için klavye kısayollarını tercih eden ileri düzey kullanıcılar, fare kullanımının politika gereği kısıtlandığı kurumsal veya kamu ortamlarındaki kullanıcılar ve standart dışı giriş cihazları kullanan kullanıcılar için de faydalıdır. Ayrıca, arama motorlarının daha güvenilir şekilde ayrıştırdığı temiz, semantik HTML yapılarıyla pozitif korelasyon gösterir; bu da daha iyi SEO performansına ve kod tabanının uzun vadeli sürdürülebilirliğine katkıda bulunur.

İlgili Axe-core Kuralları

• scrollable-region-focusable: Bu kural, taşan içeriğe sahip (yani kaydırılabilir) herhangi bir öğenin klavye ile erişilebilir olup olmadığını kontrol eder. Bir konteynerde overflow: auto veya overflow: scroll gibi CSS özellikleri olduğunda, gören fare kullanıcıları fare tekerleği veya trackpad ile kaydırabilir. Ancak klavye kullanıcılarının, konteynere Tab ile girebilmesi veya ok tuşlarıyla kaydırabilmesi gerekir. Kural, tabindex özniteliği olmayan ve doğal olarak odaklanabilir bir alt öğesi bulunmayan kaydırılabilir bölgeleri işaretler; bu, yalnızca klavye kullanan bir kullanıcının taşan içeriğe erişemeyeceği anlamına gelir. Otomatik tespit burada güvenilirdir çünkü axe, hesaplanmış stilleri ve DOM ağacını inceleyerek kaydırılabilir taşmaya sahip olup klavye odak yeteneği olmayan öğeleri belirleyebilir.
• server-side-image-map: Bu kural, sunucu tarafı resim haritalarının kullanımını işaretler — ismap özniteliğine sahip HTML <img> öğeleri. Sunucu tarafı resim haritaları, hangi bağlantının etkinleştirildiğini belirlemek için fare tıklamasının ham piksel koordinatlarını sunucuya gönderir. İşlem tamamen bir işaretçi cihazından elde edilen piksel koordinatlarına bağlı olduğundan, klavye eşdeğeri bir mekanizma yoktur. (Klient tarafı resim haritaları <map> ve <area> öğelerini kullanır ve klavye ile erişilebilir hale getirilebilir.) Sunucu tarafı resim haritaları, yalnızca klavye ile gezinme ile temelden uyumsuzdur. Axe, herhangi bir <img ismap> öğesini klavye erişilebilirliği hatası olarak işaretler. Manuel doğrulama, resim haritasının alttaki gezinme veya işlevselliğe erişmenin tek yolu olup olmadığını teyit etmelidir.

axe-core gibi otomatik araçların, klavye erişilebilirliği hatalarının yalnızca bir alt kümesini yakalayabildiğini anlamak kritik önemdedir. Birçok ihlal, özel JavaScript olay dinleyicilerini, dinamik odak yönetimini veya statik analizle tam olarak değerlendirilemeyen karmaşık etkileşim kalıplarını içerdiği için manuel test gerektirir. Örneğin, click olay dinleyicisine sahip bir <div> olarak uygulanmış bir düğme, tabindex='0' ile odak alabilir ancak Enter veya Space tuşlarına yanıt veremeyebilir — bu, etkileşim yürütülmeden axe’in her zaman tespit edemeyeceği bir hatadır.

Nasıl Test Edilir

1. axe DevTools veya Lighthouse ile otomatik tarama: Chrome veya Firefox için axe DevTools tarayıcı uzantısını yükleyin. Test edilecek sayfaya gidin ve tam sayfa taraması çalıştırın. Sonuçları wcag2a ve keyboard etiketli kurallara göre filtreleyin. Özellikle scrollable-region-focusable ve server-side-image-map ihlallerine bakın. Lighthouse’ta (Chrome DevTools) bir Erişilebilirlik denetimi çalıştırın ve “Keyboard” kategorisini inceleyin. Bu araçların bariz yapısal hataları ortaya çıkaracağını, ancak tüm özel bileşen sorunlarını yakalamayacağını unutmayın.
2. Manuel klavye gezinme testi: Farenizi tamamen çıkarın veya bir kenara koyun. Tarayıcı adres çubuğundan başlayarak, sayfadaki tüm odaklanabilir öğeler arasında ileri gitmek için art arda Tab tuşuna basın. Geri gitmek için Shift+Tab kullanın. Her etkileşimli öğe — bağlantılar, düğmeler, giriş alanları, özel açılır listeler, modallar, kaydırıcılar — için şu noktaları doğrulayın: (a) görünür bir odak göstergesi alıyor; (b) Enter veya Space tuşuna basmak beklenildiği gibi onu etkinleştiriyor; (c) ortaya çıkan herhangi bir diyalog veya panel de klavye ile gezilebilir ve kapatılabilir. Bileşik kalıpları (menüler, sekme listeleri, radyo grupları, liste kutuları) uygulayan bileşenlerin içinde ok tuşlarını kullanın.
3. NVDA ve Firefox ile ekran okuyucu + klavye testi: NVDA’yı (ücretsiz, Windows) başlatın ve Firefox’u açın. Sayfayı okumak ve tüm etkileşimli öğeleri belirlemek için NVDA’nın Göz Atma Modunu (ok tuşları) kullanın. Kontrollerle etkileşim kurmak için Odak Moduna geçin (Insert+Space veya form alanlarında otomatik). Özel bileşenlerin rol, durum ve adlarını duyurduğunu ve tüm işlevselliğin fare olmadan tamamlanabildiğini doğrulayın. Kaydırılabilir konteynerleri, onlara Tab ile girmeye çalışarak ve kaydırmak için ok tuşlarını kullanarak test edin.
4. VoiceOver ve Safari (macOS/iOS) ile ekran okuyucu testi: VoiceOver’ı etkinleştirin (macOS’ta Command+F5). Sayfada satır satır gezinmek için VO+Sağ ok tuşunu kullanın. Etkileşimli öğeler arasında geçiş yapmak için Tab tuşunu kullanın. Kaydırılabilir bölgelerin erişilebilir olduğunu ve hiçbir işlevselliğin klavye ile erişilebilir bir alternatif olmadan yalnızca kaydırma hareketi veya işaretçi etkileşimi gerektirmediğini doğrulayın.
5. JAWS ve Chrome testi: JAWS çalışırken Chrome’u açın ve sayfaya gidin. İçeriğe göz atmak için JAWS Sanal İmlecini ve etkileşimli öğeler arasında geçiş yapmak için Tab tuşunu kullanın. Özellikle akordeonlar, karuseller, modal diyaloglar, özel seçim kutuları gibi özel JavaScript bileşenlerini, onlara Tab ile gelerek ve tamamen klavye ile çalıştırmayı deneyerek test edin. Odak alan ancak etkinleştirilemeyen her öğeyi veya yalnızca fareyle üzerine gelme (hover) ile erişilebilen herhangi bir işlevselliği not edin.
6. Kaydırılabilir bölgeye özel test: Sayfadaki tüm görünür kaydırma çubuklarına sahip veya görünür alanından daha fazla içerik barındıran konteynerleri belirleyin. Her bir konteynere Tab ile girmeyi deneyin. Tab, odağı konteynerin içine taşımıyorsa ve odaklanabilir alt öğe yoksa, konteyner muhtemelen bir klavye erişilebilirliği hatasıdır. Konteyner veya yakınındaki bir öğe odak halindeyken kaydırmanın mümkün olup olmadığını görmek için ok tuşlarına basmayı deneyin.

Nasıl Düzeltilir

Senaryo 1: Kaydırılabilir Konteyner — Hatalı

<!-- Scrollable div with no tabindex: keyboard users cannot scroll this content -->
<div style='height: 200px; overflow-y: auto;'>
  <p>Long list of terms and conditions text...</p>
  <p>More text that overflows the container...</p>
</div>

Senaryo 1: Kaydırılabilir Konteyner — Doğru

<!-- Adding tabindex='0' makes the container focusable so keyboard users
     can scroll it with arrow keys once it receives focus -->
<div
  tabindex='0'
  role='region'
  aria-label='Terms and Conditions'
  style='height: 200px; overflow-y: auto;'
>
  <p>Long list of terms and conditions text...</p>
  <p>More text that overflows the container...</p>
</div>

Senaryo 2: Sunucu Tarafı Resim Haritası — Hatalı

<!-- ismap sends pixel coordinates to the server — no keyboard equivalent exists -->
<a href='/map-handler'>
  <img src='navigation-map.png' ismap alt='Site navigation map' />
</a>

Senaryo 2: Sunucu Tarafı Resim Haritası — Doğru

<!-- Replace with a client-side image map using <map> and <area> elements.
     Each <area> is focusable and activatable by keyboard. -->
<img
  src='navigation-map.png'
  alt='Site navigation map'
  usemap='#site-nav'
/>
<map name='site-nav'>
  <area shape='rect' coords='0,0,100,50' href='/home' alt='Home' />
  <area shape='rect' coords='100,0,200,50' href='/about' alt='About Us' />
  <area shape='rect' coords='200,0,300,50' href='/contact' alt='Contact' />
</map>

Senaryo 3: Yalnızca Fare Olayları Kullanan Özel Bileşen — Hatalı

<!-- div acting as a button with only onclick: keyboard users pressing Enter
     or Space will get no response -->
<div onclick='submitForm()'>Submit Order</div>

Senaryo 3: Yalnızca Fare Olayları Kullanan Özel Bileşen — Doğru

<!-- Option A: Use a native <button> — it handles keyboard activation natively -->
<button type='submit' onclick='submitForm()'>Submit Order</button>

<!-- Option B: If a custom element is required, add tabindex, role, and
     a keydown listener for Enter (13) and Space (32) -->
<div
  role='button'
  tabindex='0'
  onclick='submitForm()'
  onkeydown='if(event.key==="Enter"||event.key===" "){submitForm();}'
>
  Submit Order
</div>

Senaryo 4: Yalnızca Hover ile Açılan Açılır Menü — Hatalı

<!-- Menu only appears on CSS :hover — keyboard focus on the parent
     does not reveal the submenu -->
<nav>
  <ul>
    <li class='has-dropdown'>
      <a href='/products'>Products</a>
      <ul class='dropdown'> <!-- only visible on :hover in CSS -->
        <li><a href='/products/a'>Product A</a></li>
        <li><a href='/products/b'>Product B</a></li>
      </ul>
    </li>
  </ul>
</nav>

Senaryo 4: Yalnızca Hover ile Açılan Açılır Menü — Doğru

<!-- Use a button to toggle the dropdown and manage aria-expanded.
     CSS shows the submenu when the button has aria-expanded='true'.
     Keyboard users press Enter/Space on the button to open the menu. -->
<nav>
  <ul>
    <li class='has-dropdown'>
      <button
        aria-expanded='false'
        aria-controls='products-submenu'
        onclick='toggleMenu(this)'
      >
        Products
      </button>
      <ul id='products-submenu' hidden>
        <li><a href='/products/a'>Product A</a></li>
        <li><a href='/products/b'>Product B</a></li>
      </ul>
    </li>
  </ul>
</nav>

Yaygın Hatalar

• Doğal olmayan bir öğe üzerinde tek olay işleyicisi olarak onclick kullanmak ve buna karşılık gelen bir onkeydown veya onkeyup işleyicisi eklememek — fare tıklamaları onclick olayını tetikler, ancak bir <div> veya <span> üzerinde klavye ile etkinleştirme tetiklemez.
• Özel bir etkileşimli öğeye tabindex='0' eklemek ancak role='button' (veya uygun rol) eklemeyi unutmak; bu durumda ekran okuyucular öğenin amacını kullanıcıya iletmez.
• Açılır gezinmeyi, JavaScript destekli bir klavye geçişi olmadan yalnızca CSS :hover pseudo-class’ına dayandırmak; bu da alt menüleri klavye kullanıcıları için görünmez ve erişilemez hale getirir.
• Sıralama listeleri, kanban panoları, dosya yükleme alanları gibi sürükle-bırak arayüzlerini, klavye ile erişilebilir alternatif bir mekanizma (klavye ile tetiklenen taşıma komutları veya ayrı bir yeniden sıralama kontrolü gibi) olmadan uygulamak.
• Hizmet şartları kutuları, sohbet pencereleri veya sabit yükseklikli kaplar içindeki veri tabloları gibi kaydırılabilir konteynerleri tabindex='0' olmadan oluşturmak; bu da klavye kullanıcılarının tüm içeriği görmek için kaydırma yapmasını engeller.
• Eski kod tabanlarından devralınan gezinme bileşenleri için <img ismap> kullanmak ve bunları istemci tarafı resim haritaları veya standart gezinme bağlantılarıyla değiştirmemek.
• Etkileşimli öğeleri doğal Tab sırasından çıkarmak için tabindex='-1' uygulamak, ancak programatik bir odak yönetimi stratejisi sağlamamak; bu da kontrolleri klavye ile kalıcı olarak erişilemez hale getirir.
• İşlevselliği yalnızca mouseenter, mouseleave veya mousemove olaylarıyla (araç ipuçları, önizlemeler, bağlam menüleri) tetiklemek ve eşdeğer focus, blur veya klavye olayı alternatifleri sunmamak.
• Bir modal diyalogun odağı otomatik olarak yönettiğini varsaymak — açıldığında odağı diyalog içine taşımamak ve kapandığında odağı tetikleyici öğeye geri döndürmemek; bu da klavye kullanıcılarını sayfada yönlerini kaybetmiş halde bırakır.
• Klavye ile erişilebilir olması gereken bir öğede CSS’te pointer-events: none kullanmak; bu doğrudan klavye davranışını etkilemese de, genellikle klavye etkileşimini de engelleyen JavaScript kalıplarıyla birlikte kullanılır.

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

Türkiye’nin 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, 21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete’de yayımlanarak WCAG 2.1 Seviye AA ile uyumlu zorunlu web erişilebilirliği gerekliliklerini belirlemiştir. WCAG 2.1.1 (Klavye), Seviye A ölçütüdür ve bu da onu uyulması gereken en yüksek öncelikli katmana yerleştirir. Seviye A uyumu mutlak asgari eşiği temsil eder — bir site Seviye A ölçütlerini karşılamıyorsa, diğer iyileştirmelerden bağımsız olarak erişilebilir kabul edilmez.

Genelge kapsamında, uyum takvimleri kurum türüne göre farklılaştırılmıştır: kamu kurum ve kuruluşları genelgenin yayım tarihinden itibaren bir yıl içinde uyumu sağlamakla yükümlüyken, düzenleme kapsamındaki özel sektör kuruluşlarının uyum için iki yılı bulunmaktadır.

2025/10 sayılı Cumhurbaşkanlığı Genelgesi kapsamındaki kuruluşlar, Türkiye’deki dijital hizmetlerin geniş bir kesimini içerir: e-ticaret platformları, kamu kurumları ve bakanlıklar, bankalar ve finans kuruluşları, hastaneler ve sağlık hizmeti sağlayıcıları, 200.000 ve üzeri abonesi olan telekomünikasyon şirketleri, yetkili seyahat acenteleri, özel ulaşım şirketleri ve Millî Eğitim Bakanlığı (MEB) tarafından yetkilendirilmiş özel okullar.

Bu kuruluşların tamamı için, WCAG 2.1.1’in karşılanmaması, klavyeye bağımlı kullanıcıların — motor engelli vatandaşlar, yaşlı kullanıcılar ve ekran okuyucu kullanıcıları dahil — temel dijital hizmetlerine erişememesi anlamına gelir. Bu, doğrudan bir mevzuat ihlalidir. Pratikte, ödeme akışı klavye ile tamamlanamayan bir e-ticaret sitesi veya randevu almanın fare etkileşimi gerektirdiği bir hastane hasta portalı, genelge gerekliliklerini ihlal ediyor olacaktır.

Genelgeye tabi kuruluşlar, erişilebilirlik iyileştirme programlarının ilk adımı olarak bir klavye erişilebilirliği denetimi gerçekleştirmelidir. WCAG 2.1.1 ihlalleri çoğu zaman mimariseldir — seçilen HTML öğeleri, olay bağlama kalıpları ve bileşen çerçevesi varsayılanlarından kaynaklanır — bu nedenle bunların giderilmesi, yalnızca yapılandırma ayarlarıyla değil, kod düzeyinde değişiklikler gerektirebilir. Accsible’ın overlay SDK’sı, JavaScript katmanında yaygın klavye erişilebilirliği boşluklarını tespit etmeye ve yamamaya yardımcı olabilir, ancak ekipler aynı zamanda kaynak kodlarında yapısal düzeltmeler yaparak, mevzuat denetimini karşılayacak sağlam ve denetlenebilir bir uyum düzeyine ulaşmaya çalışmalıdır.