WCAG 2.1.3: Klavye (İstisnasız)

Bu Kuralın Anlamı

WCAG 2.1.3 — Klavye (İstisna Yok) WCAG 2.1 ve 2.2 altında Seviye AAA başarı ölçütüdür ve tüm istisnaları kaldırarak WCAG 2.1.1’i (Klavye, Seviye A) genişletir. Özellikle şunu belirtir: İçeriğin tüm işlevleri, tek tek tuş vuruşları için belirli zamanlamalar gerektirmeden bir klavye arayüzü aracılığıyla çalıştırılabilir olmalıdır. 2.1.1’den kritik fark, temel işlevin yalnızca uç noktalarına değil, kullanıcının hareket yoluna bağlı girdiler gerektirdiği durumları muaf tutan istisna hükmünün olmamasıdır.

2.1.1 kapsamında, geliştiriciler serbest çizim tuvalleri, jest tabanlı boyama araçları veya yol duyarlı sürükleme arayüzleri gibi özellikleri, kullanıcının tam imleç yolunun çıktıyı belirlemesi nedeniyle klavye desteği dışında bırakabilir. WCAG 2.1.3 bu istisnayı tamamen ortadan kaldırır. Bu ölçüte göre, tek bir işlev bile—çizim, sürükleme, yola bağlı jestler ve tarihsel olarak imleç hareketine dayanan tüm etkileşimler dahil—klavye ile erişilebilir olmalıdır. Bu, geliştiricilerin serbest çizim veya yola bağlı görevler için bile alternatif klavye mekanizmaları (örneğin, şekil araçları içeren erişilebilir bir araç çubuğu, klavye kontrollü çizim modları veya form tabanlı girdi alternatifleri) sağlaması gerektiği anlamına gelir.

Başarılı sayılmak için sayfadaki her işlemin yalnızca klavye kullanılarak başlatılabilmesi, içinde gezilebilmesi ve tamamlanabilmesi gerekir. Buna odak yönetimi, modal diyaloglar, sürükle-bırak ile yeniden sıralama, özel kaydırıcılar, tuval çizim araçları, harita etkileşimleri, karusel gezinmesi ve video oynatma kontrolleri dahildir. Klavye tuzağı olmamalıdır (2.1.2’de de ele alınır), yalnızca tıklama, üzerine gelme (hover) veya dokunma tabanlı jestlerle tetiklenebilen ve eşdeğer bir klavye yolu olmayan hiçbir işlev olmamalıdır ve fare imleci yollarına güvenilmemelidir.

Başarısızlık, ne kadar niş veya ikincil görünürse görünsün herhangi bir işlevselliğin yalnızca klavye ile erişilememesi veya tamamlanamaması durumunda ortaya çıkar. Bu ölçütün hiçbir istisnası olmadığından, klavye ile erişilemeyen tek bir işlev bile tam bir başarısızlık anlamına gelir ve bu da onu WCAG içindeki en zorlu standartlardan biri yapar.

Neden Önemli

Klavye erişilebilirliği, işaretleme aygıtı kullanamayan motor engelli kullanıcılar için temel bir gerekliliktir. Parkinson hastalığı, kuadripleji, serebral palsi, tekrarlayan zorlanma yaralanmaları veya uzuv farklılıkları gibi durumlara sahip kişiler çoğu zaman yalnızca fiziksel bir klavye, anahtarlama cihazı, nefesle çalışan kontrolör veya klavye girdisini taklit eden göz takibi teknolojisine güvenir. Dünya Sağlık Örgütü’ne göre, dünya genelinde yaklaşık 1,3 milyar insan önemli bir engellilik biçimiyle yaşamaktadır ve motor veya fiziksel engeller bu nüfusun önemli bir bölümünü temsil etmektedir. Yalnızca Türkiye’de, Türkiye İstatistik Kurumu (TÜİK) verilerine göre 8,5 milyondan fazla kişi en az bir tür işlevsel kısıtlılık bildirmektedir.

Motor engelliliğin ötesinde, klavye erişilebilirliği NVDA, JAWS veya VoiceOver gibi ekran okuyucularla gezinme yapan kör ve az gören kullanıcılara da fayda sağlar; bu araçların tümü, web içeriğinde gezinmek ve etkileşim kurmak için klavye komutlarına dayanır. Işığa duyarlı rahatsızlıkları olan kullanıcılar dokunmatik ekranlardan kaçınabilir ve bilişsel engelli kullanıcılar çoğu zaman klavye etkileşiminin sağladığı öngörülebilir, doğrusal gezinmeden fayda görür.

Somut bir gerçek dünya senaryosunu düşünün: serbest vektör çizim aracı sunan bir grafik tasarım platformu. WCAG 2.1.1 kapsamında, imleç yolu şekli tanımladığı için bu araç muaf tutulabilirdi. WCAG 2.1.3 kapsamında ise platformun bir alternatif sunması gerekir—örneğin bir şekil kütüphanesi, klavye kontrollü bağlantı noktaları dizisi veya metin tabanlı bir SVG yol düzenleyici—böylece motor engelli bir kullanıcı fare kullanmadan da vektör illüstrasyon oluşturabilir. Bunu yapmamak, yalnızca klavye erişimine güvenen yaratıcı profesyonellerin anlamlı bir bölümünü dışarıda bırakır.

Kullanılabilirlik ve SEO açısından bakıldığında, düzgün şekilde klavye erişilebilir arayüzler genellikle daha temiz odak yönetimi, daha mantıklı sekme sırası ve iyi yapılandırılmış DOM hiyerarşileri içerir—bunların tümü daha iyi taranabilirliğe ve herkes için, hız için klavye kısayollarını tercih eden ileri düzey kullanıcılar dahil, daha yüksek kaliteli bir kullanıcı deneyimine katkıda bulunur.

İlgili Axe-core Kuralları

WCAG 2.1.3 manuel test gerektirir. Birçok WCAG ölçütünden farklı olarak, otomatik araçlar bu ölçütün ihlallerini güvenilir şekilde tespit edemez çünkü:

• Yola bağlı işlevselliğin tespiti statik analiz kapsamının ötesindedir: Axe-core ve Lighthouse, DOM’u yapısal kalıplar açısından inceler—eksik tabindex, olmayan role öznitelikleri veya bozuk odak yönetimi—ancak bir kullanıcının sayfadaki her işlevi denemesini ve bir klavye alternatifinin var olup olmadığını belirlemesini simüle edemezler. DOM’da hiçbir ARIA özniteliği olmayan bir canvas öğesi bulunabilir, ancak yakındaki erişilebilir bir klavye araç çubuğu 2.1.3’ü tamamen karşılayabilir. Tersine, normal görünen bir düğme, yalnızca fareyle kullanılabilen bir bileşen başlatan bir JavaScript eylemini tetikleyebilir ve otomatik araçlar bunu asla işaretlemez. Klavye alternatiflerinin fareyle yürütülen yollarla mantıksal eşdeğerliği insan yargısı gerektirir.
• 2.1.3 ile birebir eşleşen özel bir axe-core kuralı yoktur: En yakın axe kuralları—örneğin scrollable-region-focusable (kaydırılabilir içerik bölgelerinin klavye odağı alıp alamadığını kontrol eder) ve tabindex (doğal odak sırasını bozan pozitif tabindex değerlerini işaretler)—2.1.1 ve 2.4.3 kapsamında ilişkili ancak daha dar konuları ele alır. Tüm işlevselliğin, yola duyarlı işlemler dahil, bir klavye eşdeğerine sahip olup olmadığını değerlendirmezler ve değerlendiremezler.
• Etkileşimli bileşen denetimleri çalışma zamanı etkileşimi gerektirir: Özel sürükle-bırak bileşenleri, canvas tabanlı düzenleyiciler ve jestle kontrol edilen karuseller, klavye ile kullanılamazlıklarını ancak bir testçi bunları fare olmadan kullanmaya çalıştığında ortaya çıkarır. Axe-core’un statik DOM taraması olay dinleyicilerini tetikleyemez, asenkron işlemler sırasında odak kaybını gözlemleyemez veya bir sürükleme işleminin klavye yön tuşları ve Enter/Space ile tamamlanıp tamamlanamayacağını değerlendiremez.
• Manuel denetim sırasında nelere bakılmalı: Testçiler özellikle çizim veya etkileşim için kullanılan canvas öğelerini, sürükle-bırak listeleri veya dosya yükleme alanlarını, özel harita veya veri görselleştirme kontrollerini, zamana bağlı kaydırıcıları ve mousemove, pointermove veya dokunma jesti olaylarına karşılık gelen klavye olay işleyicileri olmadan yanıt veren bileşenleri aramalıdır.

Nasıl Test Edilir

1. Otomatik bir temel tarama çalıştırın: Sayfanızda axe DevTools’u (tarayıcı uzantısı veya CLI) veya Google Lighthouse’u kullanarak, eksik odaklanabilir öğeler, klavye tuzakları veya etkileşimli olması gereken ancak pointer-events: none ile işaretlenmiş öğeler gibi kolay tespit edilebilir klavye erişilebilirliği hatalarını belirleyin. Bu araçlar 2.1.3 ihlallerini doğrudan yakalamasa da, ilişkili sorunları ortaya çıkarır ve manuel test başlamadan önce temiz bir temel oluşturur.
2. Tüm etkileşimli işlevselliği kataloglayın: Testten önce, sayfadaki tüm etkileşimli bileşenlerin tam envanterini oluşturun: düğmeler, bağlantılar, formlar, modallar, akordeonlar, karuseller, haritalar, canvas araçları, sürükle-bırak alanları, özel açılır listeler, tarih seçiciler, video oynatıcılar ve fare veya dokunma olaylarına yanıt veren tüm bileşenler. Bu envanter test kontrol listeniz olur.
3. Yalnızca klavye ile gezinme testi: Farenizi çıkarın veya devre dışı bırakın. Odağı taşımak için Tab ve Shift+Tab kullanın, kontrolleri etkinleştirmek için Enter ve Space, bileşik bileşenler (menüler, kaydırıcılar, sekmeler, radyo grupları) için Yön tuşları ve diyalogları kapatmak için Escape kullanın. Envanter listenizdeki her işlevi tamamlamaya çalışın. Yalnızca klavye kullanarak başlatamadığınız, tamamlayamadığınız veya çıkamadığınız tüm işlevleri not edin.
4. NVDA + Firefox ile ekran okuyucu testi: NVDA’yı (Windows) Firefox ile başlatın. Sanal imleçle gezinmek için (H başlıklar, B düğmeler, F form alanları, etkileşimli öğeler için Tab) kullanın. Her işlevi denemeye çalışın. Duyurulan rol, ad ve durumu dinleyin. Ulaşılamayan veya sesli bir duyuru üretmeyen etkileşimli bölgeleri belirleyin.
5. JAWS + Chrome ile ekran okuyucu testi: Windows’ta JAWS’ı Chrome ile kullanın. JAWS sanal imlecini ve Form Modunu ( Enter ile aç/kapat) kullanın. Tüm işlevselliğin çalıştırılabildiğini ve özellikle modal diyaloglar açıldıktan veya AJAX içerik yüklendikten sonra odak yönetiminin doğru yapıldığını doğrulayın.
6. VoiceOver + Safari (macOS/iOS) ile ekran okuyucu testi: VoiceOver’ı etkinleştirin (macOS’ta Command + F5). Gezinmek için Control + Option + Yön tuşları kullanın. iOS’ta kaydırma jestlerini kullanın. Tüm işlevlerin erişilebilir ve çalıştırılabilir olduğunu doğrulayın. Özellikle masaüstü sürümünde klavye eşdeğeri olmayan özel dokunma tabanlı bileşenlere dikkat edin.
7. Yola bağlı işlevsellik denetimi: Herhangi bir çizim tuvali, harita etkileşimi veya jestle kontrol edilen bileşen için alternatif bir klavye mekanizması olup olmadığını doğrulayın. Yalnızca klavye kontrollerini kullanarak bir şekil oluşturmaya, bir liste öğesini yeniden sıralamaya veya bir haritayı kaydırmaya çalışın. Herhangi bir klavye yolu yoksa, bu doğrudan 2.1.3 ihlalidir.
8. Odak görünürlüğü kontrolü: Yalnızca klavye ile gezinirken, odağın ekranda her zaman görünür ve mantıksal olarak sıralanmış olduğundan emin olun. Görünmez odak veya beklenmedik konumlara sıçrayan odak, bir kullanılabilirlik hatasıdır ve muhtemelen 2.4.7 ve 2.4.3’ü de ihlal eder.

Nasıl Düzeltilir

Canvas Çizim Aracı — Hatalı

<!-- Klavye alternatifi olmayan serbest çizim canvas -->
<canvas id='drawingBoard' width='800' height='600'
  onmousedown='startDraw(event)'
  onmousemove='draw(event)'
  onmouseup='endDraw()'>
</canvas>

Canvas Çizim Aracı — Doğru

<!-- Alternatif olarak klavye erişilebilir şekil araç çubuğuna sahip canvas -->
<div role='toolbar' aria-label='Drawing tools'>
  <button id='addRect' onclick='insertShape("rectangle")'>Add Rectangle</button>
  <button id='addCircle' onclick='insertShape("circle")'>Add Circle</button>
  <button id='addLine' onclick='insertShape("line")'>Add Line</button>
  <label for='shapeColor'>Color</label>
  <input type='color' id='shapeColor' value='#000000'>
</div>
<canvas id='drawingBoard' width='800' height='600'
  aria-label='Drawing canvas — use toolbar above to add shapes'
  tabindex='0'
  onmousedown='startDraw(event)'
  onmousemove='draw(event)'
  onmouseup='endDraw()'
  onkeydown='handleCanvasKey(event)'>
</canvas>
<!-- handleCanvasKey ok tuşlarıyla hareket ve Enter ile şekil yerleştirmeyi sağlar -->

Sürükle-Bırak Liste Yeniden Sıralama — Hatalı

<!-- Yeniden sıralama için yalnızca fare sürüklemesini destekleyen liste -->
<ul id='sortableList'>
  <li draggable='true' ondragstart='dragStart(event)' ondragover='dragOver(event)'>Item One</li>
  <li draggable='true' ondragstart='dragStart(event)' ondragover='dragOver(event)'>Item Two</li>
  <li draggable='true' ondragstart='dragStart(event)' ondragover='dragOver(event)'>Item Three</li>
</ul>

Sürükle-Bırak Liste Yeniden Sıralama — Doğru

<!-- Ok tuşlarıyla klavye üzerinden yeniden sıralama ve ARIA listbox deseni olan liste -->
<p id='reorderInstructions'>Tab ile bir öğeye gelin, Space ile yakalayın, Yukarı/Aşağı oklarla taşıyın, tekrar Space ile bırakın.</p>
<ul id='sortableList' role='listbox' aria-labelledby='reorderInstructions'>
  <li role='option' tabindex='0' aria-selected='false'
    draggable='true'
    ondragstart='dragStart(event)'
    ondragover='dragOver(event)'
    onkeydown='handleReorderKey(event)'>Item One</li>
  <li role='option' tabindex='0' aria-selected='false'
    draggable='true'
    ondragstart='dragStart(event)'
    ondragover='dragOver(event)'
    onkeydown='handleReorderKey(event)'>Item Two</li>
  <li role='option' tabindex='0' aria-selected='false'
    draggable='true'
    ondragstart='dragStart(event)'
    ondragover='dragOver(event)'
    onkeydown='handleReorderKey(event)'>Item Three</li>
</ul>
<!-- handleReorderKey: Space = yakala/bırak, ArrowUp/Down = taşı, Escape = iptal -->

Etkileşimli Harita Kontrolleri — Hatalı

<!-- Yalnızca fareyle kaydırma ve tekerlekle yakınlaştırmaya yanıt veren harita -->
<div id='mapContainer' style='width:100%;height:400px;'
  onwheel='zoomMap(event)'
  onmousedown='startPan(event)'
  onmousemove='pan(event)'>
</div>

Etkileşimli Harita Kontrolleri — Doğru

<!-- Klavye kontrolleri ve erişilebilir yakınlaştırma/kaydırma düğmeleri olan harita -->
<div id='mapContainer' tabindex='0'
  role='application'
  aria-label='Interactive map. Use arrow keys to pan, plus and minus to zoom.'
  onwheel='zoomMap(event)'
  onmousedown='startPan(event)'
  onmousemove='pan(event)'
  onkeydown='handleMapKey(event)'>
</div>
<div role='group' aria-label='Map controls'>
  <button onclick='zoomIn()'>Zoom In</button>
  <button onclick='zoomOut()'>Zoom Out</button>
  <button onclick='panMap("north")'>Pan North</button>
  <button onclick='panMap("south")'>Pan South</button>
  <button onclick='panMap("east")'>Pan East</button>
  <button onclick='panMap("west")'>Pan West</button>
</div>
<!-- Ok tuşları kaydırır, + / - yakınlaştırır, handleMapKey bu eylemleri tetikler -->

Yaygın Hatalar

• WCAG 2.1.1’deki yola bağlı istisnanın hâlâ geçerli olduğunu varsaymak: Seviye A’ya aşina olan geliştiriciler, 2.1.3’ün bu istisnayı açıkça kaldırdığını fark etmeden serbest çizim veya jest araçlarını klavye alternatifleri olmadan inşa edebilir. Bu seviyede yola duyarlı olanlar dahil her işlevin bir klavye eşdeğeri olmalıdır.
• Özel etkileşimli öğelere yalnızca onclick ve onmousedown işleyicileri eklemek: Yalnızca fare olaylarını dinleyen <div> veya <span> öğeleriyle oluşturulan özel bileşenler klavye ile tamamen erişilemezdir. Her zaman fare olay dinleyicilerine ek olarak onkeydown veya onkeyup işleyicileri ekleyin ve öğenin tabindex='0' ve uygun bir ARIA rolüne sahip olduğundan emin olun.
• Sekme sırasına dahil olması gereken öğelerde tabindex='-1' kullanmak: tabindex='-1' ayarı, bir öğeyi sıralı sekme sırasından çıkarır. Bu, yalnızca programatik olarak yönetilen öğeler (örneğin, dolaşan tabindex kullanan bileşik bir bileşen içinde) için uygundur. Bunu bağımsız etkileşimli kontrollere uygulamak, onları klavye ile erişilemez hale getirir.
• Klavye tabanlı yeniden sıralama mekanizması olmadan sürükle-bırak uygulamak: SortableJS gibi kütüphaneler veya özel sürükleme uygulamaları çoğu zaman kutudan çıktığı haliyle hiçbir klavye alternatifi sunmaz. Geliştiriciler ARIA sürükle-bırak desenini uygulamalı veya liste yeniden sıralamanın tamamen klavye ile çalıştırılabilmesi için Yukarı/Aşağı ok tuşlarıyla yeniden sıralama sağlamalıdır.
• Etkileşimli kontrolleri göstermek için yalnızca :hover CSS’ine güvenmek: Yalnızca hover ile görünen açılır alt menüler, araç ipucu tabanlı eylem düğmeleri veya ortaya çıkan kontroller, :focus ve :focus-within durumları da ele alınmadıkça klavye kullanıcıları için erişilemezdir. Bir klavye kullanıcısı asla hover yapamaz, bu nedenle yalnızca hover ile görünen içerik onlar için fiilen gizlidir.
• Dinamik içerik değişikliklerinden sonra odağı yönetmemek: Bir modal açıldığında, satır içi bir uyarı göründüğünde veya AJAX ile yüklenen bir bileşen mevcut içeriğin yerini aldığında, odak programatik olarak yeni içeriğe element.focus() kullanılarak taşınmalıdır. Bunu yapmamak, klavye kullanıcılarını değişikliği tetikledikleri konumda bırakır ve yeni içeriğin varlığından habersiz olmalarına neden olur.
• Yalnızca onmousemove ile özel kaydırıcılar oluşturmak: Değer değişiklikleri için fare konumunu izleyen <div> öğelerinden oluşturulan aralık tarzı kaydırıcılar, ARIA kaydırıcı desenine göre ArrowLeft, ArrowRight, Home ve End tuşlarını da uygulamalı ve mevcut değeri aria-valuenow, aria-valuemin ve aria-valuemax aracılığıyla açığa çıkarmalıdır.
• Odaklanmayı iframelerin içine alıp dışarı çıkış yolu sağlamamak: Gömülü iframeler—özellikle haritalar, ödeme formları veya sohbet araçları gibi üçüncü taraf bileşenler içerenler—gömülü içerik klavye ile erişilebilir değilse ve odağı üst belgeye geri döndürmek için Escape tuşunu desteklemiyorsa klavye odağını tuzağa düşürebilir.
• Canvas tabanlı veri görselleştirmelerinde klavye desteğini atlamak: <canvas> üzerinde oluşturulan grafikler ve diyagramlar, canvas öğesinin yanında erişilebilir bir alternatif (bir veri tablosu, ARIA’lı bir SVG eşdeğeri veya klavye ile gezilebilir veri noktaları) sağlanmadıkça klavye ve ekran okuyucular için görünmezdir.
• Klavye erişilebilirliğini yalnızca Tab ve Enter ile test etmek, bileşik bileşen tuş kalıplarını göz ardı etmek: Menüler, ağaçlar, gridler, sekme panelleri, listbox’lar gibi birçok ARIA bileşen deseni, bileşen içinde Yön tuşlarıyla gezinme ve tüm bileşen için yalnızca tek bir sekme durağı (dolaşan tabindex) gerektirir. Yalnızca Tab ve Enter ile test yapmak, bu bileşik desenlerdeki hataları ortaya çıkarmaz ve sahte bir uyumluluk hissi verir.

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

Türkiye’nin 21 Haziran 2025’te 32933 sayılı Resmî Gazete’de yayımlanan 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, Türkiye’de faaliyet gösteren geniş bir kamu ve özel sektör kuruluşu için kapsamlı bir web ve mobil erişilebilirlik çerçevesi oluşturur. Genelge, WCAG 2.1 ve 2.2 ile uyumlu standartlara uygunluğu zorunlu kılarak, kapsamdaki kuruluşların dijital hizmetlerini engelliler de dahil tüm kullanıcılar için algılanabilir, çalıştırılabilir, anlaşılabilir ve sağlam hale getirmesini şart koşar.

Bu düzenleme kapsamındaki kuruluşlar arasında tüm idari kademelerdeki kamu kurum ve kuruluşları, e-ticaret platformları, bankalar ve finansal hizmet sağlayıcıları, hastaneler ve sağlık kurumları, 200.000 veya daha fazla abonesi olan telekomünikasyon şirketleri, seyahat acenteleri, özel ulaşım şirketleri ve Millî Eğitim Bakanlığı (MoNE) izniyle faaliyet gösteren özel okullar yer alır. Bu kuruluşlar için Seviye A ve Seviye AA başarı ölçütlerine uyum asgari yasal eşiktir.

WCAG 2.1.3 — Klavye (İstisna Yok) bir Seviye AAA ölçütüdür ve bu nedenle genelgede açıkça asgari yasal gereklilik olarak zorunlu tutulmamıştır. Ancak düzenlemenin ruhu—Türkiye’deki milyonlarca engelli kullanıcı için eşit dijital erişim sağlama—bu ölçütün amacıyla güçlü bir uyum içindedir. Motor engelli kullanıcılara özel hizmetler sunan veya yardımcı teknolojiye bağımlı vatandaşlar tarafından kullanılan kamu portalları işleten kapsamdaki sektörlerdeki kuruluşların, klavye erişimi için AAA uyumunu hedeflemesi tavsiye edilir.

WCAG 2.1.3 uyumuna ulaşmak, düzenleyici asgari gerekliliklerin ötesine geçen, en iyi düzeyde erişilebilirlik taahhüdünü gösterir. En geniş kullanıcı kitlesine hizmet etmeyi, sosyal sorumluluklarını göstermeyi veya daha yüksek erişilebilirlik standartlarının geçerli olabileceği Avrupa Birliği dijital pazarlarında faaliyet göstermeyi hedefleyen Türk kuruluşları için, istisnasız tam klavye ile çalıştırılabilirlik sağlamak hem rekabetçi hem de etik bir avantajdır. Türkiye’nin düzenleyici ortamı geliştikçe ve denetim mekanizmaları olgunlaştıkça, 2.1.3 gibi AAA düzeyi ölçütleri erken benimseyenler, gelecekteki olası sıkılaştırmalara maliyetli iyileştirmelere ihtiyaç duymadan uyum sağlayabilecek iyi bir konumda olacaktır.