Bu kural ne anlama geliyor

WCAG 2.1.1, içerik tarafından sağlanan tüm işlevselliğin bir klavye arayüzü aracılığıyla çalıştırılmasını gerektirir. Bu, her etkileşimli öğenin — bağlantılar, düğmeler, form alanları, özel bileşenleri ve medya kontrolleri — yalnızca klavye kullanılarak ulasitabilir ve etkinleştirilebilir olması gerektiğini ifade eder. Hiçbir işlevsellik yalnızca fareye özgü olaylara bağımlı olmamalıdır.

Bu kriter yalnızca temel işlevin, klavye ile temelden gerçekleştirilemeyen analog, yol bağımlı giriş gerektirdiği durumlarda (serbest çizim gibi) istisnalara izin verir. Bununla birlikte, en yaygın web etkilecimleri — tıklama, seçme, genişletme, gönderme — klavye aracılığıyla çalışmalıdır. Kriter, bireysel tuş vuruşları için belirli zamanlama gerektirmeyi açıkça yasaklar.

Neden önemlidir

Klavye erişilebilirliği, web erisilebilirliginin temelidir. Görme engelli kullanıcılar, klavye komutlariyla çalışan ekran okuyuculara guvenirler. Motor engelli kullanıcılar, tümü klavye olaylarina donusen anahtar cihazlar, ufle-ve-em sistemleri veya ses girişi kullanabilirler. Deneyimli kullanıcılar ve geliştiriciler de hız ve verimlilik için klavye gezinmesini tercih ederler.

Etkileşimli öğeler klavye ile erişilebilir olmadığında, tüm kullanıcı grupları islevsellikten tamamen dışlanır. Bu küçük bir rahatsızlık değil — tam bir engeldir. Yalnızca fare tiklamalarina yanıt veren bir düğme, klavye kullanıcısı için görünmezdir ve klavye alternatifleri olmayan bir sürükle-birak arayüzü tüm özellikleri kullanılamaz hale getirir.

İlgili axe-core kuralları

scrollable-region-focusable — Kaydirilaabilir alanların odaklanabilir olarak klavye erişimi sağlamasını doğrular. Bu olmadan klavye kullanıcıları taşan içeriği kaydiramaz.
server-side-image-map — Sunucu tarafli görüntü haritalarinin kullanilmamasini sağlar. Sunucu tarafli görüntü haritaları fare koordinatlarina bağımlıdır ve klavye ile calistirilamaz.

Nasıl test edilir

Klavye erişilebilirliğini test etmek, yalnızca klavye kullanarak tüm etkileşimli ogelerde gezinmeyi gerektirir.

Farenizi devre dışı bırakın ve sayfayı yalnızca klavye ile kullanmaya çalışın.
Tüm etkileşimli öğeler arasında ileri gitmek için Tab tuşuna basın. Her düğme, bağlantı, form alanı ve bileşenin odak aldığını doğrulayın.
Geri gitmek için Shift+Tab tuşuna basın. Ters gezinmenin doğru çalıştığını onaylayın.
Dugmeleri ve bağlantıları etkinleştirmek için Enter veya Bosluk tuşuna basın. Beklenen eylemi gerçekleştirdiklerini doğrulayın.
Özel bilecenleri test edin: açılır menüler Enter/Bosluk ile acilmali, diyaloglar odağı yakalamaladi, sekme panelleri ok tuşlarıyla değişmelidir.
axe-core çalıştırın ve scrollable-region-focusable ile server-side-image-map ihlallerini kontrol edin.

Tüm etkileşimli öğelerin duyurulduğunu ve calistirildabildigini onaylamak için bir ekran okuyucu (VoiceOver, NVDA, JAWS) kullanın.

Nasıl düzeltilir

Yerleşik klavye desteği sundukari için mümkün olduğunda yerel HTML öğelerini kullanın. Özel öğeler gerektiğinde açık klavye işleme ekleyin.

Yerel etkileşimli öğeleri kullanın

<!-- Yanlış: düğme olarak div, klavye desteği yok -->
<div class="btn" onclick="formuGonder()">Gönder</div>

<!-- Doğru: yerel düğme, varsayılan olarak klavye erisimli -->
<button type="submit" onclick="formuGonder()">Gönder</button>

Özel bilecenlere klavye isleyicileri ekleyin

<!-- Yanlış: klavye desteği olmayan özel açılır menü -->
<div class="açılır-menü" onclick="menuAcKapa()">
  <span>Seçenek seçin</span>
  <ul class="menü">
    <li onclick="sec(1)">Seçenek 1</li>
    <li onclick="sec(2)">Seçenek 2</li>
  </ul>
</div>

<!-- Doğru: klavye erisimli özel açılır menü -->
<div class="açılır-menü"
  role="combobox"
  tabindex="0"
  aria-expanded="false"
  aria-haspopup="listbox"
  onkeydown="acilirMenuTuslama(event)">
  <span>Seçenek seçin</span>
  <ul role="listbox" class="menü">
    <li role="option" tabindex="-1"
      onkeydown="secenekTuslama(event)">Seçenek 1</li>
    <li role="option" tabindex="-1"
      onkeydown="secenekTuslama(event)">Seçenek 2</li>
  </ul>
</div>

Klavye isleyici örneği

function acilirMenuTuslama(event) {
  switch (event.key) {
    case 'Enter':
    case ' ':
      event.preventDefault();
      menuAcKapa();
      break;
    case 'ArrowDown':
      event.preventDefault();
      sonrakiSecenegeSec();
      break;
    case 'ArrowUp':
      event.preventDefault();
      oncekiSecenegeSec();
      break;
    case 'Escape':
      menuKapat();
      break;
  }
}

Kaydiriliabilir alanları odaklanabilir yapın

<!-- Yanlış: odaklanamayan kaydiriliabilir alan -->
<div style="overflow: auto; height: 200px;">
  <p>Tasan uzun içerik...</p>
</div>

<!-- Doğru: odaklanabilir kaydiriliabilir alan -->
<div tabindex="0" role="region"
  aria-label="Kaydiriliabilir içerik"
  style="overflow: auto; height: 200px;">
  <p>Tasan uzun içerik...</p>
</div>

Sık yapılan hatalar

Tiklama isleyicileri olan ancak tabindex, role veya klavye olay dinleyicisi olmayan div veya span öğeleri kullanmak.
Klavye tabanlı yeniden sıralama alternatifleri sağlamadan sürükle-birak işlevi uygulamak.
Yalnızca fare hareketine yanıt veren, ok tuşu desteği olmayan özel kaydırıcılar veya aralık kontrolleri.
Klavye ile tetiklenen eşdeğeri olmayan (odak veya Enter/Bosluk) fareyle üzerine gelme ile tetiklenen menüler veya ipuçları.
Klavye odağı alamayan etkileşimli olmayan öğeler üzerinde tıklama isleyicileri.
Karsilik gelen onkeydown veya onkeyup isleyicileri olmadan onmousedown veya onmouseup kullanmak.

2.1.1 Klavye