Klavye Erişimi ve ADA

"Klavyeyle işletilebilir" pratikte ne demek

2.1.1 başarı ölçütü, tüm işlevlerin bir klavye arayüzüyle işletilebilmesini ve işletimin tek tek tuş vuruşlarının belirli zamanlamasına bağlı olmamasını ister. "Klavye arayüzü" fiziksel klavyeden geniştir: anahtar cihazları, ses girişi, ekran klavyeleri ve ekran okuyucular sayfaya tuş olayları gönderir.

Dar bir istisna vardır: girdisi yalnızca başlangıç ve bitiş noktasına değil, hareketin izlediği yola bağlı olan işlevler, örneğin serbest çizim. Bir liste öğesini başka bir yere sürüklemek bu istisnaya girmez; başlangıcı ve bitişi olduğu için klavyeyle de yapılabilmelidir.

Ölçüt her denetimin ayrı bir Tab durağı olmasını şart koşmaz. Enter ile gönderilen bir arama alanı, gönder düğmesine hiç odaklanılmasa bile işletilebilirdir. Önemli olan, hiçbir şeyin yalnızca işaretçiyle yapılabilir olmamasıdır.

Belediye, ilçe ve okul siteleri nerede hata yapar

Kamu siteleri çoğunlukla şablonlardan, tedarikçi bileşenlerinden ve yıllar içinde eklenmiş özel betiklerden oluşur; bu yüzden aynı birkaç örüntü tekrar tekrar karşımıza çıkar:

• Tıklama olayı bağlanmış <div> öğelerinden yapılmış randevu saatleri.
• Fare üzerine gelince açılan ve klavye karşılığı olmayan menüler.
• Yalnızca sürükleyerek kaydırılabilen parsel, ulaşım ya da park haritaları.
• Aslında tıklanabilir bir görselden ibaret "Şimdi öde" gibi görsel düğmeler.
• Yalnızca tıklamaya yanıt veren takvimler ve tarih seçiciler.

Fare kullanamayan biri bu engellerle ilk karşılaşır ve bunlar çoğunlukla insanların kullanmak zorunda olduğu sayfalarda, yani ödeme, randevu ve başvuru akışlarında bulunur. Title II kuralı uyarınca, bir kamu kurumunun çevrimiçi sunduğu hizmetin, o kurumun uyum tarihi geldiğinde işaretçi olmadan kullanılabilmesi gerekir.

Tıklanabilir div yerine gerçek denetim kullanın

Yerel bir <button> odaklanabilir, Enter ve Boşluk ile çalışır ve rolünü duyurur. Aynısını <div> ile kurmak tabindex, rol ve tuş işleyicileri gerektirir; biri kolayca atlanır.

Örnek: ilçe sağlık merkezi randevu sayfasındaki saat seçenekleri.

<div class="slot" onclick="pickSlot('2026-03-04T09:30')">
  09:30
</div>

<button type="button" class="slot"
        onclick="pickSlot('2026-03-04T09:30')">
  09:30
</button>

Fareyle üzerine gelince açılan menülerin klavyeden de aynı işi yapan bir düğmesi olmalıdır:

<li class="has-menu" onmouseenter="openMenu(this)">
  Hizmetler
  <ul class="menu">…</ul>
</li>

<li>
  <button type="button" aria-expanded="false"
          aria-controls="svc-menu" onclick="toggleMenu(this)">
    Hizmetler
  </button>
  <ul id="svc-menu" hidden>…</ul>
</li>

Harita ve yalnızca sürüklemeyle çalışan arayüzler

Bir ulaşım planlayıcısındaki haritayı kaydırmak ve yakınlaştırmak, istisnadaki anlamda yola bağlı bir girdi değildir: kullanıcı yalnızca görünümü bir yere taşımak ister. Harita odaktayken ok ve yakınlaştırma tuşlarını ya da görünür kaydırma ve yakınlaştırma düğmelerini sağlayın.

<div id="map"></div>
<script>
  map.addEventListener("mousedown", startDrag);
  map.addEventListener("mousemove", dragMap);
</script>

<div id="map" tabindex="0" role="region"
     aria-label="Güzergâh haritası. Oklar kaydırır, artı ve eksi yakınlaştırır."></div>
<script>
  map.addEventListener("keydown", e => {
    const step = 40;
    if (e.key === "ArrowLeft")  panBy(-step, 0);
    else if (e.key === "ArrowRight") panBy(step, 0);
    else if (e.key === "ArrowUp")    panBy(0, -step);
    else if (e.key === "ArrowDown")  panBy(0, step);
    else if (e.key === "+") zoomBy(1);
    else if (e.key === "-") zoomBy(-1);
    else return;
    e.preventDefault();
  });
</script>

Artı ve eksi gibi tek karakterli tuşlar yalnızca harita odaktayken çalıştığı için 2.1.4'teki karakter tuşu kısayolu kurallarının dışında kalır.

Mobil uygulamalar: donanım klavyesi ve anahtar kontrolü

Mobil uygulamalar Title II kuralının kapsamındadır ve insanlar Bluetooth klavye, iOS'ta Tam Klavye Erişimi ve Android'de anahtar cihazları kullanır. Yalnızca bir hareket tanıyıcı üzerinden dokunmaya yanıt veren görünüm, onlar için görünmezdir.

SwiftUI, bir park giriş kartı satırı:

HStack {
    Image(systemName: "ticket")
    Text("Günlük giriş kartı al")
}
.onTapGesture { reserve() }

Button(action: reserve) {
    Label("Günlük giriş kartı al", systemImage: "ticket")
}

Jetpack Compose, aynı satır:

Box(
    Modifier.pointerInput(Unit) {
        detectTapGestures(onTap = { reserve() })
    }
) { Text("Günlük giriş kartı al") }

Button(onClick = { reserve() }) {
    Text("Günlük giriş kartı al")
}

Fare olmadan nasıl test edilir

1. Fareyi ya da dokunmatik yüzeyi bırakın. Sayfanın başından başlayıp bütün görevi, örneğin bir randevuyu baştan onaya kadar, Tab ile gezin.
2. Bağlantılarda Enter, düğmelerde Boşluk ya da Enter, menü, sekme ve radyo gruplarında ok tuşlarını, katmanları kapatmak için Esc tuşunu kullanın.
3. Fareyle yapabildiğiniz ama klavyeyle yapamadığınız her eylemi not edin. Hızlı çift tuş basışı ya da uzun süre basılı tutma gerektiren yerleri de yazın.
4. Mobilde donanım klavyesi bağlayın, iOS'ta Tam Klavye Erişimi'ni açın ya da Android'de TalkBack ile Bluetooth klavye kullanın ve aynı adımları tekrarlayın.

Otomatik araçlar eksik rolleri ya da adsız odaklanabilir öğeleri işaretleyebilir, ancak düz bir <div> öğesine tıklama işleyicisi bağlandığını bilemez. Gerçek test elle yapılan turdur.

Kaçınılacak hatalar

• Bir <div> öğesine tabindex="0" verip Enter ve Boşluk işlemeyi eklememek.
• Eylemler için href olmayan <a> kullanmak; bu, öğeyi sekme sırasından çıkarır.
• Hâlâ gerekli bir denetimi display: none ile gizlemek ya da odağı betikle kaldırmak.
• Dokunma desteğinin ekran okuyucu ve anahtar kullanıcılarını da kapsadığını varsaymak.
• Bir tuşun hızlıca tekrarlanmasını ya da basılı tutulmasını istemek.
• Yalnızca başlangıç ve bitiş noktası önemliyken, yol istisnasına sığınmak için bir işleve "çizim" demek.

Yayına almadan önce kontrol listesi

• Bir kişi her ana görevi yalnızca klavyeyle tamamlayabiliyor.
• Tıklanabilir her öğe ya yerel bir denetim ya da rolü, tab durağı ve tuş işlemesi olan bir öğe.
• Yalnızca üzerine gelince açılan içerik odakla ya da bir düğmeyle de açılabiliyor.
• Harita, kaydırıcı ve sürükle-bırak listelerinin işaretçisiz bir yolu var.
• Hiçbir şey zamanlanmış tuş vuruşuna dayanmıyor.

DOJ'un saydığı ve fareyle gezinmeyi de içeren engeller için yaygın engeller sayfasına bakın.

Kaynaklar

• Understanding SC 2.1.1: Keyboard (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.