TR

Klavye testi

Kendi web siteni yalnızca klavyeyle test et. On kısa adım neyin çalışıp neyin çalışmadığını gösterir; her noktada bir ipucu var.

Klavye testi

Klavye testi

E-powermentKlavye testi

Başlamadan önce

  • Test etmek istediğin web sitesini başka bir sekmede ya da pencerede aç. Bu sayfayı yanında açık tut ya da ikisi arasında gidip gel.
  • Fareni bir kenara koy. Dokunmatik yüzeyi ya da dokunmatik ekranı da kullanma: her şey tuşlarla yapılır.
  • Odak, klavyenin şu an bulunduğu yerdir: Enter tuşuna bastığında tepki veren bağlantı, düğme ya da alan. Odağı genellikle bir çerçeve olarak görürsün.
  • Mac mi kullanıyorsun? O zaman Apple menüsünde önce ‘Sistem Ayarları’nı, sonra ‘Klavye’yi seç ve ‘Klavye ile gezinme’ ayarını aç. Yoksa Tab tüm düğmelere gitmez.
  • Safari mi kullanıyorsun? O zaman Safari’de de önce ‘Ayarlar’ı, sonra ‘İleri Düzey’i seç ve ‘Web sayfasındaki her öğeyi vurgulamak için Sekme tuşuna basın’ ayarını aç. Yoksa Tab bağlantıları atlar.

Örneğin web sitesinin adresi ya da kurumunun adı. Sonucunun üstünde görünür.

On adımda test

Cevaplanan: 0 / 10

  1. Menüyü atlamak

    Bunu yap
    Sayfayı aç ve bir kez Tab tuşuna bas.
    Olması gereken
    ‘İçeriğe geç’ gibi bir bağlantı görünür. Enter tuşuna basarsan menünün üzerinden atlarsın. Sonra bir kez daha Tab tuşuna basarsan içerikteki ilk bağlantıya gelirsin.

    Dikkat: Böyle bir bağlantı, şartı karşılamanın tek yolu değil: iyi başlıklar ve sayfanın açık bir düzeni de sayılır. Ama yalnızca klavye kullanan biri için en yararlısı bu bağlantıdır.

    WCAG 2.2: 2.4.1 Blokları atlama (A seviyesi) 

    Çalışıyor mu?
    Çalışmıyor mu? Nasıl çözülür

    Web siteni yapan kişiden, her sayfanın en üstüne ilk bağlantı olarak bir ‘İçeriğe geç’ bağlantısı koymasını iste. Bu bağlantı içeriğin başına atlar, örneğin <main id="inhoud"> öğesine. Bağlantı, odak ona gelene kadar gizli kalabilir.

  2. Her şeye mantıklı bir sırayla ulaşılabiliyor

    Bunu yap
    Sayfanın en altına gelene kadar Tab tuşuna basmaya devam et. Sonra Shift + Tab ile yukarı geri dön.
    Olması gereken
    Fareyle de kullanabildiğin her bağlantıya, düğmeye ve form alanına gelirsin. Sıra, sayfayı okuma şeklinle uyuşur: genellikle yukarıdan aşağıya ve soldan sağa. Birden oraya buraya atlamazsın.

    WCAG 2.2: 2.1.1 Klavye (A seviyesi) , 2.4.3 Odak sırası (A seviyesi) 

    Çalışıyor mu?
    Çalışmıyor mu? Nasıl çözülür

    Normal bağlantılar (<a href>) ve düğmeler (<button>) kullan: bunlar klavyeyle kendiliğinden çalışır. Kodu, ekranda gördüğünle aynı sıraya koy. 0'dan büyük bir sayıyla tabindex kullanma.

  3. Nerede olduğunu görüyorsun

    Bunu yap
    Yine birkaç kez Tab tuşuna bas. Her seferinde nerede olduğuna bak: menüde, metinde ve sayfanın altında.
    Olması gereken
    Odağın olduğu bağlantının ya da düğmenin çevresinde belirgin bir çerçeve var. Ya da bağlantı veya düğme açıkça değişir, örneğin rengi değişir ve altına bir çizgi gelir. Hiçbir yerde nerede olduğunu kaybetmezsin.

    WCAG 2.2: 2.4.7 Odak görünür (AA seviyesi) 

    Çalışıyor mu?
    Çalışmıyor mu? Nasıl çözülür

    Web siteni yapan kişiden, odak çerçevesini (outline: none) yerine açık bir şey koymadan hiçbir zaman kaldırmamasını iste. En az 2 piksel kalınlığında, arka plandan iyi ayrılan renkte bir çerçeve kolayca görülür.

  4. Odak gizlenmiyor

    Bunu yap
    Tab tuşuyla aşağı doğru devam et, sonra Shift + Tab ile geri dön. Sayfayı kaydırdığında yerinde kalan şeylere dikkat et: üstte sabit bir çubuk, bir çerez bildirimi ya da bir sohbet düğmesi.
    Olması gereken
    Odaktaki bağlantı ya da düğme her zaman görünür. Sabit bir çubuk ya da bildirim onu hiçbir zaman tamamen örtmez.

    Dikkat: Açılır menü gibi bir şeyi kendin mi açtın ve bu, odağı örtüyor mu? Odak yer değiştirmeden onu kapatabiliyorsan, örneğin Esc ile, bu hata sayılmaz. Odağı tamamen örten bir çerez bildirimi ya da sabit çubuk ise hatadır. Odağın yarısı örtülüyse şarta göre hâlâ kabul edilir, ama bu web siteni kullanmayı zorlaştırır.

    WCAG 2.2: 2.4.11 Odak gizlenmez (minimum) (AA seviyesi) 

    Çalışıyor mu?
    Çalışmıyor mu? Nasıl çözülür

    Web siteni yapan kişiden sabit çubuklar için yer bırakmasını iste, örneğin CSS’te scroll-padding-top ile. Çerez bildirimi, sayfada devam etmeden önce cevaplanmalı ya da hiçbir şeyi örtmeyecek bir yerde durmalı.

  5. Düğmeler ve bağlantılar Enter ve Boşluk ile çalışıyor

    Bunu yap
    Tab ile bir bağlantıya git ve Enter tuşuna bas. Bir düğmeye git ve Enter tuşuna bas. Başka bir düğmeyi Boşluk ile dene.
    Olması gereken
    Bir bağlantı Enter ile açılır. Bir düğme hem Enter hem de Boşluk ile çalışır. Bir düğmedeyken Boşluk tuşuna basarsan sayfa aşağı kaymaz: düğme yapması gerekeni yapar.

    Dikkat: Bir düğme Enter ile çalışıyor ama Boşluk ile çalışmıyor mu? O zaman yine de kullanabilirsin ve WCAG’ye göre bu çoğu zaman hata değildir. Ama insanlar bunu bekler ve bu çoğu zaman gerçek bir düğme olmadığının işaretidir. O zaman ‘çalışıyor’ seç ve bunu notuna yaz.

    WCAG 2.2: 2.1.1 Klavye (A seviyesi) , 4.1.2 Ad, rol, değer (A seviyesi) 

    Çalışıyor mu?
    Çalışmıyor mu? Nasıl çözülür

    Düğme gibi görünen bir şey yalnızca fareyle mi çalışıyor? O zaman bu çoğu zaman gerçek bir düğme değildir. Web siteni yapan kişiden, bir işlem için <button>, başka bir sayfa için bir bağlantı (<a href>) kullanmasını iste.

  6. Menü açılıp kapanıyor

    Bunu yap
    Tab ile menüye git. ‘Menü’ gibi bir düğmesi ya da açılan bir bölümü var mı? Onu Enter ya da Boşluk ile aç. Bölümler arasında Tab ya da ok tuşlarıyla gez. Menüyü Esc ile ya da aynı düğmeyle kapat. Sonra tarayıcı pencereni daralt, böylece telefondaki menüyü görürsün, ve aynısını bir kez daha yap.
    Olması gereken
    Menü fare olmadan açılır. Açılır menüdekiler de dahil tüm bölümlere ulaşırsın. Menü yeniden kapanır ve odak, menüyü açtığın düğmeye geri döner.

    Dikkat: Esc ile kapatmak WCAG’nin kesin bir şartı değil, ama insanlar bunu bekler. Menü aynı düğmeyle kapanıyorsa çalışıyor demektir.

    WCAG 2.2: 2.1.1 Klavye (A seviyesi) 

    Çalışıyor mu?
    Çalışmıyor mu? Nasıl çözülür

    Yalnızca fareyle üzerine gelince açılan bir açılır menü klavyeyle çalışmaz. Web siteni yapan kişiden, menüyü açıp kapatan ve menünün açık olup olmadığını ekran okuyucuya bildiren (aria-expanded) bir düğme iste.

  7. Bir form doldurmak

    Bunu yap
    Bir form bul, örneğin arama, iletişim ya da kayıt formu. Formu fare olmadan doldur. Alanlara yaz. Ok tuşlarıyla bir seçenek düğmesi seç. Boşluk ile bir onay kutusunu işaretle. Ok tuşlarıyla bir açılır listeden seç. Henüz göndermene gerek yok.
    Olması gereken
    Her alana ulaşırsın ve her şeyi doldurup seçebilirsin. Seçim yaparken beklenmedik bir şey olmaz: örneğin bir açılır listeden bir şey seçtiğin anda web sitesi hemen başka bir sayfaya geçmez.

    WCAG 2.2: 2.1.1 Klavye (A seviyesi) , 3.2.2 Girdi sırasında (A seviyesi) 

    Çalışıyor mu?
    Çalışmıyor mu? Nasıl çözülür

    Normal HTML form alanlarını, seçenek düğmelerini, onay kutularını ve açılır listeleri kullan: bunlar klavyeyle kendiliğinden çalışır. Bir seçim hiçbir zaman hemen başka bir sayfa açmasın. Yanına ‘Göster’ gibi bir düğme koy.

  8. Hata mesajları bulunabiliyor

    Bunu yap
    Aynı formda zorunlu bir alanı boş bırak ya da yanlış bir şey yaz, örneğin @ işareti olmayan bir e-posta adresi. Formu Enter ile ya da düğmeyle gönder.
    Olması gereken
    Neyin yanlış olduğunu ve hangi alanda olduğunu kelimelerle söyleyen bir mesaj görürsün. Odak mesaja ya da alana gider veya Tab ile oraya ulaşırsın. Hatayı fare olmadan düzeltebilirsin.

    Dikkat: Gerçekten bir yere ulaşacak bir şey mi gönderiyorsun, örneğin bir kayıt? O zaman gerçek bilgilerle deneme yapma.

    WCAG 2.2: 3.3.1 Hata tanımlama (A seviyesi) 

    Çalışıyor mu?
    Çalışmıyor mu? Nasıl çözülür

    Web siteni yapan kişiden, bir hata olduğunda odağı mesaja ya da hatalı ilk alana taşımasını iste. Mesajı yalnızca kırmızı bir çerçeve olarak değil, kelimelerle alanın yanına yaz. Mesajı alana bağla (aria-describedby), böylece ekran okuyucu onu okur.

  9. Sayfadaki bir pencere düzgün çalışıyor

    Bunu yap
    Sayfanın üstüne pencere olarak açılan bir şey aç: bir açılır pencere, bir çerez bildiriminin ayarları ya da büyük açılan bir fotoğraf. Birkaç kez Tab tuşuna bas. Sonra Esc tuşuna bas.
    Olması gereken
    Pencere açılınca odak pencerenin içine gider. Tab ile pencerenin içinde kalırsın, arkadaki sayfaya geçmezsin. Pencere Esc ile ya da bir kapatma düğmesiyle kapanır. Sonra odak, pencereyi açtığın düğmeye geri döner.

    Dikkat: Esc ile kapatmak WCAG’nin kesin bir şartı değil. Ama insanlar bunu bekler ve W3C bunu önerir. Klavyeyle ulaşılabilen bir kapatma düğmesi her durumda olmalı.

    WCAG 2.2: 2.4.3 Odak sırası (A seviyesi) , 2.1.2 Klavye tuzağı yok (A seviyesi) 

    Çalışıyor mu?
    Çalışmıyor mu? Nasıl çözülür

    Web siteni yapan kişiden gerçek bir iletişim penceresi kullanmasını iste, örneğin showModal() ile açılan HTML öğesi <dialog>. Bu pencere odağı içinde tutar ve Esc ile kapanır. Sonra odağın, pencereyi açan düğmeye geri döndüğünü kontrol et.

  10. Hiçbir yerde takılıp kalmıyorsun

    Bunu yap
    Tab ile sayfadaki, başka bir firmadan gelen her şeye git: bir video, bir harita, bir sohbet penceresi ya da bir form. Tab ve Shift + Tab ile oradan yeniden çıkmayı dene.
    Olması gereken
    Her yerden Tab ya da Shift + Tab ile yeniden çıkarsın. Bunun için başka bir tuş gerekiyorsa, hangi tuş olduğu yanında yazar.

    WCAG 2.2: 2.1.2 Klavye tuzağı yok (A seviyesi) 

    Çalışıyor mu?
    Çalışmıyor mu? Nasıl çözülür

    Takılıp kalırsan, yalnızca klavye kullanan biri sayfada artık ilerleyemez. Bu ciddi bir hatadır. Web siteni yapan kişiden ya da videoyu, haritayı veya sohbeti yapandan klavyeyle çalışan bir sürüm iste. Ya da yanına aynı bilgiye, örneğin düz metne giden bir bağlantı koy.

Sonuç

  • 0çalışıyor
  • 0çalışmıyor
  • 0geçerli değil
  • 10henüz test edilmedi

Henüz hiçbir adımı cevaplamadın. 1. adımdan başla.

Henüz test edilmedi

  • 1. Menüyü atlamak
  • 2. Her şeye mantıklı bir sırayla ulaşılabiliyor
  • 3. Nerede olduğunu görüyorsun
  • 4. Odak gizlenmiyor
  • 5. Düğmeler ve bağlantılar Enter ve Boşluk ile çalışıyor
  • 6. Menü açılıp kapanıyor
  • 7. Bir form doldurmak
  • 8. Hata mesajları bulunabiliyor
  • 9. Sayfadaki bir pencere düzgün çalışıyor
  • 10. Hiçbir yerde takılıp kalmıyorsun

Bu test yalnızca klavyeyle ilgili. Bir web sitesini erişilebilir yapan başka şeyler de var. Şunları da test et:

E-powerment’in Klavye testi ile hazırlandı: e-powerment.nl/tr/araclar/toetsenbordtest/

Nasıl çalışır

  1. Test etmek istediğin web sitesini başka bir sekmede aç. Fareni bir kenara koy.
  2. On adımı uygula. Her adımda ne yapacağın ve ne olması gerektiği yazıyor.
  3. Her adımda seç: çalışıyor, çalışmıyor ya da geçerli değil. İstersen ne gördüğünü de yaz.
  4. On adımdan sonra sonuç gelir: neyin çalışmadığı ve her nokta için ne yapabileceğin.
  5. Aracın üstünde Yazdır ya da Metni kopyala düğmesini seç. Örneğin sonucu, web siteni yapan kişiye e-postayla göndermek için.

Birkaç farklı sayfayı test et: ana sayfayı, formu olan bir sayfayı ve video ya da harita olan bir sayfayı. Bir adım sayfaya uymuyorsa ‘geçerli değil’ seçeneğini seç.

Tuşlar

Tab
Sonraki bağlantıya, düğmeye ya da alana gitmek.
Shift + Tab
Bir öncekine dönmek.
Enter
Bir bağlantıyı açmak ya da bir düğmeyi kullanmak. Mac’te bu tuşun adı bazen return.
Boşluk
Bir düğmeyi kullanmak ya da bir onay kutusunu işaretlemek ve işareti kaldırmak.
Ok tuşları
Seçenek düğmeleri arasında ya da bir açılır listede seçim yapmak, bazen de bir menüde gezinmek.
Esc
Bir menüyü, açılır pencereyi ya da pencereyi kapatmak.

Bilmekte fayda var

  • Bu ilk bir kontrol, kurallara göre tam bir test değil. Her şey çalışıyor mu? O zaman klavyenin test ettiğin sayfalarda iyi çalıştığını bilirsin. Web sitenin tamamının şartlara uyup uymadığını, bu işten anlayan birine test ettir.
  • Bir klavyeye ihtiyacın var. Klavyesi olmayan bir telefonda ya da tablette bu testi yapamazsın.
  • Her adımda, o adıma ait WCAG 2.2 şartı yazıyor. WCAG, erişilebilir web siteleri için uluslararası standarttır. Bu tür bir şarta orada başarı ölçütü denir. Tüm adımlar A ya da AA seviyesine aittir. A en düşük seviyedir, AA olağan normdur. Daha fazlası için WCAG nedir yazısını oku.
  • Bu neden önemli: herkes fare kullanmaz, örneğin görme engelli olanlar ya da elleri titreyenler. Daha fazlası için Kullanılabilir: her şey fare olmadan da çalışır yazısını oku.
  • Ne olması gerektiği, WCAG’nin arkasındaki kuruluş olan W3C’nin açıklamalarına dayanır. Bazen bir şey kesin bir şart değildir ama insanlar bunu bekler, örneğin bir pencereyi Esc ile kapatmak. O zaman bu, adımda yazar.

Daha fazla test

Cevapların

Her şey tarayıcında kalır. Cevaplarını ve notlarını saklamıyoruz ve hiçbir şey göndermiyoruz. Sayfayı yeniler ya da kapatırsan silinirler. Sonucu saklamak mı istiyorsun? Yazdır ya da kopyala. Bir WCAG bağlantısını seçersen W3C’nin web sitesine gidersin.

Kaynaklar

Adımlar WCAG 2.2'ye ve W3C’nin açıklamalarına dayanır. 30 Eylül 2026'da okundu.

Diğer araçlar

Tüm araçları gör 

  • OyunDeneyim

    Engel parkuru

    Az görürken, elin titrerken, iyi okuyamazken ya da elinde yalnızca klavye varken bir web sitesini kullanmanın nasıl olduğunu kendin dene. Sonra web sitesini onarır ve yeniden denersin.

    Danışanınla

  • KontrolYazma yardımcısı

    Alt metin yardımcısı

    Bir görsel için iyi bir alt metin yaz. Birkaç soruyu yanıtla; öneriler ve kopyalayabileceğin bir taslak alırsın.

    Danışanınla

  • KontrolMetin kontrolü

    Sade dil kontrolü

    Hollandaca metninin kolay okunup okunmadığını kontrol et. Uzun cümleleri ve zor kelimeleri, yanlarında daha kolay bir kelimeyle görürsün.

    Danışanınla

Birlikte bir şey yapalım mı?

Bir fikrin varsa, bir şey eksikse ya da bir aracı ekibinle denemek istiyorsan bize mesaj gönder. Konuyu birkaç cümleyle anlat. Her şeyi okuyoruz ve bu seni hiçbir şeye bağlamaz.

Bize mesaj gönder [email protected]