Klavye

Kısaca

Pek çok kişi hiçbir zaman fare ya da dokunmatik ekran kullanmaz. Ekran okuyucu kullanıcıları, motor engelli kişiler, titremesi olanlar ve anahtar, üfleme-emme cihazı ya da ses denetimi kullanan herkes klavyeye ya da klavye gibi davranan bir şeye güvenir. Bir işlev yalnızca işaretçiyle çalışıyorsa onu kullanamazlar.

Bu kriter, tüm işlevlerin tek tek tuş vuruşları için belirli bir zamanlama gerektirmeden bir klavye arayüzüyle çalıştırılabilmesini ister. İstisna, yalnızca uç noktalarına değil hareketin izlediği yola bağlı olan işlevlerdir; örneğin serbest çizim.

Neleri kapsar?

• Tüm işlevler: Bağlantılar, düğmeler, form kontrolleri, menüler, iletişim kutuları, sekmeler, kaydırıcılar, atlı karıncalar ve diğer tüm kontroller klavyeden çalışmalıdır.
• Önce yerel öğeler: a, button, input, select ve textarea varsayılan olarak klavyeyle erişilebilir. Özel kontroller onların davranışını yeniden üretmelidir.
• Standart tuşlar: Gezinmek için Tab ve Shift+Tab, etkinleştirmek için Enter ve Boşluk, menü, sekme ve radyo grubu gibi bileşenlerin içinde ok tuşları, kapatmak için Escape.
• Üzerine gelme ve sürükleme: Üzerine gelince beliren içeriğe klavyeyle ulaşılabilmeli, sürükle-bırak için klavye alternatifi bulunmalıdır.
• İstisna: Altta yatan görevi hareketin izlediği yola bağlı işlevler; örneğin serbest çizim. Bir metin alanına yazmak istisna değildir.
• Kapsam dışı notlar: Bir bileşende takılıp kalmak 2.1.2, tek tuşlu kısayollar 2.1.4 kapsamındadır. Odak sırası 2.4.3, görünürlüğü 2.4.7'dir.

Kimleri etkiler?

Klavyeyle gezinen ekran okuyucu kullanıcıları. Fare kullanamayan motor engelli kişiler. Anahtar, göz izleyici, ses denetimi ya da ekran klavyesi kullananlar. Titremesi olanlar. Klavyeyi tercih eden deneyimli kullanıcılar.

EAA ve EN 301 549'da

Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. Klavyeyle işletilebilirlik, "işletilebilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 2.1.1'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

Kriterin web dışı dokümanlara uygulanıp uygulanmadığı ve nasıl uygulandığı standardın 10. maddesinde belirtilir. Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür. Kaynak gösterirken tam numaraları standarttan kontrol edin.

Standart sürümü: EN 301 549 V4.1.1 (Eylül 2026), WCAG 2.2'yi esas alan ve EAA için hazırlanan ilk sürümdür. Henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında EAA ile ilgili uygunluk karinesi sağlayacaktır. 2.1.1 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır.

EAA bağlamında dikkat: Yasanın Madde 2/4 hükmü bazı içerikleri gereksinimlerin dışında bırakır; örneğin 28 Haziran 2025'ten önce yayımlanmış ofis dosya biçimleri ve bu tarihten sonra güncellenmeyen arşivler. Bu tarihten sonra yayımladığınız ya da değiştirdiğiniz içerik bu istisnaların kapsamında değildir.

Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır

Web için kod örnekleri

1. Gerçek bir düğme kullanın

Tıklama işleyicisi olan bir div odaklanamaz ve Enter ya da Boşluk'a yanıt vermez.

<div class="btn" onclick="kaydet()">Kaydet</div>

<button type="button" onclick="kaydet()">Kaydet</button>

2. Özel öğe kullanmanız gerekiyorsa

Ona bir rol verin, odaklanabilir yapın ve Enter ile Boşluk'u işleyin.

<span onclick="degistir()">Menü</span>

<span role="button" tabindex="0" onclick="degistir()"
      onkeydown="if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault(); degistir();
      }">Menü</span>

3. Bir yere giden bağlantılar

href olmayan bir bağlantı öğesi odaklanamaz.

<a onclick="sayfaAc()">Fiyatlar</a>

<a href="/fiyatlar">Fiyatlar</a>

4. Üzerine gelince açılan menüler

Alt menüyü üzerine gelince olduğu gibi odakta da gösterin.

.gezinme li:hover > ul { display: block; }

.gezinme li:hover > ul,
.gezinme li:focus-within > ul { display: block; }

5. Kaydırılabilir alanlar

Kayan ama odaklanabilir içerik taşımayan bir alan, bazı tarayıcılarda klavyeyle kaydırılamaz. Odaklanabilir yapın.

<div class="gunluk" style="overflow:auto; height:200px">…</div>

<div class="gunluk" style="overflow:auto; height:200px"
     tabindex="0" role="region" aria-label="Etkinlik günlüğü">…</div>

6. Sürükle ve bırak

Aynı işi yapan düğmeler ya da tuşlar sunun.

<li draggable="true">Öğe</li> <!-- yalnızca sürüklenebilir -->

<li>
  Öğe
  <button aria-label="Öğeyi yukarı taşı">↑</button>
  <button aria-label="Öğeyi aşağı taşı">↓</button>
</li>

Mobil için kod örnekleri

Yerel uygulamalar harici klavyeler, anahtar denetimi ve tam klavye erişimiyle kullanılır. Bu girdilerle çalışmaları için standart kontroller kullanın ve eşdeğer eylemi olmayan hareketlerden kaçının.

iOS (SwiftUI)

import SwiftUI

struct KaydetSatiri: View {
    var body: some View {
        // Kaçının: Text üzerindeki dokunma hareketine Tam Klavye Erişimi ile ulaşılamaz
        // Text("Kaydet").onTapGesture { kaydet() }

        // Bir Button kullanın: odaklanabilir, Boşluk ve VoiceOver ile etkinleştirilir
        Button("Kaydet") { kaydet() }

        // Özel hareketler için eşdeğer bir eylem ekleyin
        Text("Arşivle")
            .onTapGesture { arsivle() }
            .accessibilityAddTraits(.isButton)
            .accessibilityAction(named: "Arşivle") { arsivle() }
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.clickable
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.Role

@Composable
fun KaydetSatiri() {
    // Kaçının: bir Text üzerinde pointerInput { detectTapGestures { ... } },
    // klavye ya da anahtar bunu tetikleyemez

    // Button ya da rollü clickable kullanın: odaklanabilir, Enter/Boşluk ile etkinleşir
    Button(onClick = { kaydet() }) { Text("Kaydet") }

    Text(
        "Arşivle",
        modifier = Modifier.clickable(role = Role.Button) { arsivle() }
    )
}

Nasıl test edilir?

• Fareyi bırakın: Yalnızca Tab, Shift+Tab, Enter, Boşluk, ok tuşları ve Escape kullanın. Bir fare kullanıcısının yapabildiği her şeyi yapabiliyor musunuz?
• Her kontrole ulaşın: Tüm sayfada Tab ile gezinin. Her bağlantıya, düğmeye, alana ve menüye ulaşılabiliyor mu?
• Her şeyi etkinleştirin: Her kontrol beklendiği gibi Enter ya da Boşluk'a yanıt veriyor mu? Menüler, sekmeler ve kaydırıcılar ok tuşlarına yanıt veriyor mu?
• Üzerine gelince beliren içeriği kontrol edin: Alt menüleri, ipuçlarını ve diğer üzerine gelince beliren içeriği yalnızca klavyeyle bulup açabiliyor musunuz?
• Özel bileşenleri kontrol edin: Her özel kontrolü WAI-ARIA Authoring Practices'taki örüntüyle karşılaştırın.
• Mobili kontrol edin: Bir klavye bağlayın ya da Tam Klavye Erişimini ya da bir anahtarı açın. Ana görevleri tamamlayabiliyor musunuz?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar eksik rolleri ve odaklanabilirliği bulur, ama bir işlevin klavyeyle gerçekten çalışıp çalışmadığını söyleyemez.

Sık yapılan hatalar

• Tıklanabilir div ve span öğeleri: Bu kriterin en sık görülen ihlali.
• href olmayan bağlantılar: Odaklanamaz.
• Yalnızca tıklama işleyicileri: Yalnızca fareye yönelik işleyicilerde klavye olayları hiç tetiklenmez.
• Yalnızca üzerine gelince açılan menüler ve ipuçları: Klavye kullanıcıları bunları hiç görmez.
• Alternatifsiz sürükle ve bırak: Aynı işi yapmanın klavye yolu yoktur.
• 0'dan büyük tabindex değerleri: Odak sırasını karıştırır.
• Yerine bir şey koymadan dış çizgiyi kaldırmak: Kullanıcılar odağın nerede olduğunu göremez (2.4.7).
• Boşluk tuşunu yok sayan klavye işleyicileri: Düğmeler hem Enter'a hem Boşluk'a yanıt vermelidir.

Kaynaklar

• Understanding SC 2.1.1: Keyboard (W3C), İngilizce, yeni sekmede açılır
• WAI-ARIA Authoring Practices Guide (W3C), İngilizce, yeni sekmede açılır
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), İngilizce, yeni sekmede açılır
• EN 301 549 V4.1.1 (ETSI), İngilizce, yeni sekmede açılır
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), İngilizce, yeni sekmede açılır

Standart sürümü: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz; bağlayıcı metin için Avrupa Erişilebilirlik Yasası'nın (Direktif (AB) 2019/882) ve EN 301 549 standardının resmî metinlerini esas alın.