2.1.4 Karakter Tuşu Kısayolları

Bu kural ne anlama geliyor

WCAG 2.1.4, değiştirici tuşlar (Ctrl, Alt, Cmd) olmadan tek karakter tuşları (harf, sayı, noktalama veya sembol) kullanan klavye kısayollarını ele alır. Bu tür kısayollar varsa, arayüz şu üç seçenekten en az birini sunmalıdır: kısayolu kapatma, bir değiştirici tuş içerecek yeniden eşleştirme veya kısayolu yalnızca ilgili bileşen odakta olduğunda etkin kılma.

Bu kriter, belirli bir sorunu gidermek için WCAG 2.1'de tanıtıldı: ses girişi kullanıcıları metin dikte eder ve yazılımları konuşulan sözcükleri bireysel tuş vuruşları olarak yorumlar. Arama için "s" gibi tek karakterli bir kısayol, kullanıcı "save" kelimesini dikte etmeye çalıştığında kazara tetiklenebilir. Benzer şekilde, motor engelli kullanıcılar gezinirken kazara karakter tuşlarına basabilir.

Neden önemlidir

Dragon NaturallySpeaking gibi ses girişi yazılımları, konuşulan sözcükleri tuş basma dizilerine dönüştürür. Bir web uygulamasinin tek karakterli kısayolları olduğunda, normal dikte istenmeyen komutlari tetikleyebilir. Örneğin, "send" demek "s", "e", "n" veya "d" tuslarinin hızlı bir şekilde ardisik olarak kısayollarını etkinlestirebilir ve kullanıcı ne olduğunu anlamadan dört istenmeyen eylem gerçekleştirilir.

Ekran klavyesi kullanan veya titremeye sahip motor engelli kullanıcılar da tek karakterli kısayolları kazara tetikleyebilir. Bu kısayolları devre dışı bırakma veya yeniden eşleştirme mekanizması olmadan arayüz ongurulmez ve sınır bozucu hale gelir. Degistirici tuş kombinasyonlari (Ctrl+S, Alt+N) bu soruna sahip değildir çünkü ses girişi yazılımı kazara değiştirici tuş kombinasyonlari uretmez.

İlgili axe-core kuralları

Bu kriter için otomatik axe-core kuralı bulunmamaktadır. Tek karakterli kısayolları tespit etmek, ses girişi yazilimiyla manuel kod incelemesi ve test gerektirir çünkü kısayollar JavaScript ile uygulanır ve yalnızca DOM analizi ile güvenilir şekilde tespit edilemez.

Nasıl test edilir

Test, tüm klavye kisayollarinin belirlenmesini ve gereksinimleri karşılayıp karsilamadiklarinin dogrulanmasini gerektirir.

1. Klavye kısayolu uygulamaları için uygulama belgelerini ve kodu inceleyin.
2. Sayfada her harf, sayı, noktalama ve sembol tusunu tek tek basın. Degistirici tuş olmadan tetiklenen kısayolları not edin.
3. Bulunan her tek karakterli kısayol için, devre dışı bırakma veya yeniden eşleştirme mekanizması olduğunu doğrulayın.
4. Belirli bilecenlere kapsamlı kisayollarin yalnızca o bileşen odakta olduğunca etkin olduğunu doğrulayın.
5. Mumkunse ses girişi yazilimiyla (Dragon NaturallySpeaking) test edin ve sayfada metin dikte etmeyi deneyin.

• Tüm kisayollarin envanterini cikarimak için klavye kısayolu belgelerini kontrol edin (genellikle "?" tuşuyla görüntülenir).

Nasıl düzeltilir

Karakter tuşu kısayollarını uygun şekilde devre dışı bırakma, yeniden eşleştirme veya kapsam belirleme mekanizması sağlayın.

Kapatilaabilien veya yeniden eslestirilebilen kısayol

// Kisayol yapılandırma nesnesi
const kısayollar = {
  ara: { tuş: 's', etkin: true },
  yardım: { tuş: '?', etkin: true },
  yeniOge: { tuş: 'n', etkin: true },
};

// Depolamadan yüklenen kullanıcı tercihleri
const tercihler = kullaniciTercihleriniYukle();
Object.keys(kısayollar).forEach(eylem => {
  if (tercihler[eylem]) {
    kısayollar[eylem] = { ...kısayollar[eylem], ...tercihler[eylem] };
  }
});

document.addEventListener('keydown', (e) => {
  // Kullanıcı giriş alanında yaziyorsa atla
  if (e.target.matches('input, textarea, [contenteditable]')) return;
  // Degistirici tuş basiliysa atla
  if (e.ctrlKey || e.altKey || e.metaKey) return;

  Object.entries(kısayollar).forEach(([eylem, yapılandırma]) => {
    if (yapılandırma.etkin && e.key === yapılandırma.tuş) {
      e.preventDefault();
      eylemiCalistir(eylem);
    }
  });
});

Kisayol yönetimi için ayarlar arayüzü

<fieldset>
  <legend>Klavye Kısayolları</legend>
  <div>
    <label>
      <input type="checkbox" id="kısayollar-etkin"
        checked onchange="tumKisayollariAcKapa(this.checked)">
      Klavye kısayollarını etkinleştir
    </label>
  </div>
  <table>
    <thead>
      <tr><th>Eylem</th><th>Tus</th><th>Etkin</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>Arama</td>
        <td><input type="text" value="s" maxlength="1"
          onchange="kisayoluYenidenEsle('ara', this.value)"></td>
        <td><input type="checkbox" checked
          onchange="kisayoluAcKapa('ara', this.checked)"></td>
      </tr>
    </tbody>
  </table>
</fieldset>

Kısayolları odaklı bilecenlere kapsama

// Yanlış: tek karakterli genel kısayol
document.addEventListener('keydown', (e) => {
  if (e.key === 'j') sonrakineKaydir();
  if (e.key === 'k') oncekineKaydir();
});

// Doğru: kısayol yalnızca liste odakta olduğunca etkin
const liste = document.getElementById('öğe-listesi');
liste.addEventListener('keydown', (e) => {
  if (e.key === 'j') sonrakineKaydir();
  if (e.key === 'k') oncekineKaydir();
});

Sık yapılan hatalar

• Gmail tarzı tek tuslu kısayolları (gezinme için j/k, yıldız için s, arsivleme için e) devre dışı bırakma seçeneği olmadan uygulamak.
• Oyun dışı arayuzlerde kapatma yolu olmadan oyun tarzı klavye kontrolleri.
• Kullanıcı arama alanında veya metin alanında yazarken etkin kalan tek karakterli kısayollar.
• Kullanıcıların klavye kısayollarını goruntulemesi, devre dışı birakmalari veya yeniden esletirmesi için ayarlar sayfası veya mekanizma olmaması.
• Kisayollarin bazı kullanıcılar için verimliligi artırdığı için kontroller olmadan kabul edilebilir olduğunu varsaymak.
• Degistirici olmadan tek karakter kullanan accesskey nitelikleri — tarayıcılar bunları tutarsız şekilde işler.