Skip to main content
Teknik

Klavye Gezinme Test Rehberi

Web sayfası klavye erişilebilirliğini test etmek için adım adım bir rehber — odak sırası, odak görünürlüğü, etkileşimli öğe işletilebilirliği ve klavye tuzaklarını kapsar.

Klavye Testi Neden Zorunludur

Klavye erişilebilirliği tüm erişilebilirliğin temelidir. Ekran okuyucular, switch erişim cihazları, göz izleme sistemleri ve ses kontrol yazılımı hepsinin klavye API'si aracılığıyla çalışır. WCAG 2.1.1 (Klavye), tüm işlevlerin klavye arayüzü aracılığıyla çalıştırılabilir olmasını gerektirir. WCAG 2.1.2 (Klavye Tuzağı Yok), kullanıcıların yalnızca klavyeyi kullanarak herhangi bir bileşenden uzaklaşabilmesini gerektirir.

Klavye Testi için Kurulum

  • Farenizi/dokunmatik panelinizi görmezden gelin — gerçek klavye testi işaret cihazlarına dokunmamak anlamına gelir.
  • macOS'ta tüm kontroller için klavye erişimini etkinleştirin: Sistem Ayarları → Klavye → Klavye Gezintisi.
  • Birden fazla tarayıcı kullanın — Chrome, Firefox ve Safari minimum.

Test Edilecek Temel Klavye Etkileşimleri

  • Tab — odağı bir sonraki odaklanabilir öğeye ilerletir.
  • Shift + Tab — odağı bir önceki odaklanabilir öğeye geri taşır.
  • Enter — bağlantıları ve düğmeleri etkinleştirir.
  • Space — düğmeleri ve onay kutularını etkinleştirir.
  • Ok tuşları — bileşik widget'lar içinde gezinir.
  • Escape — iletişim kutularını, menüleri ve açılır pencereleri kapatır.

Adım Adım Klavye Test Prosedürü

  1. Sayfayı yükleyin ve ilk odaklanabilir öğeye geçmek için Tab'a basın. Bir atla bağlantısının göründüğünü doğrulayın.
  2. Tab ile sayfanın tamamında gezinin. Her etkileşimli öğenin odak aldığını doğrulayın.
  3. Odaklanan her öğede, odak göstergesinin görünür ve yeterli kontrasta sahip olduğunu doğrulayın.
  4. Her bağlantıyı etkinleştirin (Enter) ve doğru hedefe gittiğini doğrulayın.
  5. Modal iletişim kutuları için: açıldığında odağın iletişim kutusuna taşındığını; Tab'ın iletişim kutusu içinde kalacağını doğrulayın.

Klavye Tuzaklarını Belirleme

Klavye tuzağı (WCAG 2.1.2 ihlali), odağın bir bileşene girip standart klavye kontrollerini kullanarak çıkamaması durumunda oluşur.

  • Yerleşik iframe'ler klavye çıkış işlemesi olmadan.
  • Tüm tuş olaylarını yakalayan özel tarih seçiciler.
  • Ok tuşlarını yakalayan Google Maps yerleştirmeleri.

Yaygın Klavye Erişilebilirlik Hataları

  • CSS'de outline: none ile odak göstergesinin kaldırılması.
  • role="button" ve tabindex="0" olmadan <div> veya <span> olarak uygulanan özel düğmeler.
  • Klavye tetikleyicisi olmadan yalnızca fareyle üzerine gelme ile açılan açılır menüler.
  • Kapatıldığında odağı tetikleyiciye döndürmeyen modaller.

Kaynaklar