Kısa yanıt
Klavyeyle gezinme, bir web sitesinde yalnızca klavye kullanarak — fare, dokunmatik ekran ya da izleme yüzeyi olmadan — dolaşabilme ve her bölümünü çalıştırabilme yetisidir. Yerel HTML öğeleri bunu kendiliğinden destekler; özel olarak kurulmuş bileşenlerin ise bilerek yeniden uygulaması gerekir ve klavye erişilebilirliği hatalarının çoğu buradan doğar.
Klavyeyle gezinme nedir?
Kullanıcı Tab tuşuyla bağlantıdan bağlantıya, butondan butona ve form alanından form alanına geçer; sonra geldiği öğeyi Enter ya da Boşluk ile etkinleştirir. Bu, "asıl" arayüzün üstüne eklenmiş niş bir girdi yöntemi değildir. Her tarayıcı ve her yerel HTML öğesi bunu zaten varsayılan olarak destekler.
Desteğin bozulduğu yer
Düz bir <button> ya da <a> etiketi, var olduğu anda ek koda gerek kalmadan klavyeyle kullanılabilir. Destek yalnızca bir ekip bu yerel öğelerin yerine özel olanları koyduğunda — örneğin buton gibi görünecek şekilde biçimlendirilmiş bir <div> — ve yerel sürümün bedavaya verdiği klavye davranışını yeniden kurmadığında bozulur.
Klavyeyle gezinme erişilebilirlik için neden önemli?
Yardımcı teknolojinin altındaki ortak temel
Klavyeyle gezinme önemlidir; çünkü kullanan kişi bilinçli olarak Tab'a basmıyor olsa bile neredeyse her yardımcı teknolojinin dayandığı girdi yöntemidir. Ekran okuyucu kullanıcısı sayfanın yapısında klavye komutlarıyla gezinir. Standart bir klavyeyi doğrudan kullanamayan, motor engeli olan bir anahtar erişimi kullanıcısı da klavye girdisini taklit eden bir yazılıma dayanır. Bir site yalnızca fareyle çalışıyorsa bu kullanıcıların hepsi aynı anda dışarıda kalır; çünkü klavye desteği birkaç farklı yardımcı teknolojinin altındaki ortak temeldir.
Genel erişilebilirlik sağlığının göstergesi
Klavye erişilebilirliğinin bir sitenin genel erişilebilirlik sağlığı için güvenilir bir gösterge işlevi görmesinin nedeni de budur. Klavyeyle tamamen kullanılabilen bir sayfanın altında genellikle sağlam bir yapı vardır: mantıklı sırada öğeler, özel bileşenler yerine yerel denetimler ve görünüş uğruna silinmemiş, görünür odak durumları. Klavye erişiminde kalan bir sayfa ise genellikle işaretlemenin kendisinde kestirme yollara sapmıştır; bu da ekran okuyucu kullanıcıları için de sorun habercisidir, çünkü ikisi aynı yapısal temele dayanır.
Klavyeyle gezinmeyi kimler kullanır?
Farklı gruplar buna tamamen farklı nedenlerle başvurur ve yalnızca birini hesaba katan bir site diğerlerinde yine kalır.
Motor engelli kişiler
Farenin küçük tıklama hedefleri ve sürükleme hareketleri, klavyenin ayrık tuş basışları kıyasla yönetilebilirken bile güvenilir biçimde kullanılması gerçekten zor olabilir. Bu grup için klavye desteği çoğu zaman çalışan tek girdi yöntemidir.
Ekran okuyucu kullanıcıları
İşaretçinin ekrandaki konumu, ekran okuyucunun o anda okuduğu şeyle ilişkili değildir. Ekran okuyucu kullanıcısının sayfanın yapısında ve içeriğinde kendi gezinmesini yönlendirme yolu klavye komutlarıdır.
Yalnızca klavye kullananlar
Bazı kullanıcılar engellilikle ilgisi olmayan nedenlerle yalnızca klavyeyle gezinir: bozuk bir izleme yüzeyi, arızalı bir fare ya da kişisel bir çalışma tercihi — mesele sitenin, standart bir girdi cihazının çalışması gerektiği gibi çalışmasıdır.
İleri düzey kullanıcılar
Geliştiriciler, yazarlar ve bilgisayarı yoğun kullanan kişiler sürekli fareye uzanmaktan hızlı olduğu için sıklıkla klavyeyle gezinir. Güçlü klavye desteği bu gruba yan etki olarak daha hızlı bir deneyim kazandırır.
Geçici yaralanması olanlar
Kırık bir bilek, el yaralanması ya da bir kolda bebek tutmak; kişi kendini engelli olarak tanımlamasa da bir süre boyunca fare kullanımını acı verici ya da imkânsız kılabilir.
Kullanıcılar bir web sitesinde faresiz nasıl gezinir?
Temel hareket tuşları
Tab; bağlantılar, butonlar ve form alanları gibi etkileşimli öğeler arasında, sayfanın altındaki HTML'de göründükleri sırayla ileri gider; Shift+Tab bu hareketi tersine çevirir. Enter ya da Boşluk, o anda odakta olan öğeyi etkinleştirir: formu göndermek, bağlantıyı açmak ya da menüyü açmak gibi.
Daha özel durumlar için tuşlar
Ok tuşları, odak bir bileşene geçtikten sonra bileşenin içinde hareket eder — radyo düğmeleri takımında, bir menünün maddeleri arasında ya da bir kaydırıcının aralığında — sayfadaki ayrı öğeler arasında atlamaz. Escape, açık olan her şeyi kapatır; bir açılır liste ya da kalıcı pencere gibi. Home ve End, bir listenin ya da uzun bir sayfanın başına veya sonuna atlar.
Deneyimin bozulduğu yer
Deneyim yalnızca sitenin özel bileşenleri bu tuş takımının tamamını uygulamadığında bozulur; tıklamaya yanıt veren ama ok tuşlarını tümden yok sayan özel bir açılır liste, klavye kullanıcısını açtıktan sonra seçenek seçemeyecek durumda bırakır.
Gezinmede hangi klavye tuşları kullanılır?
Tab
Odağı, sayfanın kaynak sırasındaki bir sonraki etkileşimli öğeye taşır. Klavyeyle gezinmede en çok yük taşıyan tek tuştur.
Shift + Tab
Tab'in yönünü tersine çevirir. Asıl pratik kullanımı toparlanmadır: en baştan başlamadan, geçtiğiniz bir alana geri dönmek.
Enter
Odaktaki öğeyi etkinleştirir. Buton gibi davranan özel bir denetimde Enter desteğinin bilerek eklenmesi gerekir.
Boşluk
Butonları etkinleştirir ve onay kutularını değiştirir; ancak odak etkileşimli bir öğede değilken görünümü de kaydırır — özel onay kutularının açıkça Boşluk işlemesi gerekmesinin nedeni budur.
Ok tuşları
Tek bir gruplanmış bileşenin içinde gezinir — bir radyo grubundaki seçenekler, sekme listesindeki sekmeler, açık bir menüdeki maddeler — sayfadaki ayrı öğeler arasında değil.
Escape
Açık bir katmanı kapatır ve iyi kurulmuş bir bileşende odağı, onu ilk açan öğeye geri döndürür.
Home / End
Odağı bir listedeki, sekmelerdeki ya da uzun bir belgedeki ilk veya son maddeye taşır — tek başına Tab'in pratik olmayacağı veri yoğun sayfalarda en değerlisidir.
Klavye odağı nasıl çalışır?
Odak gerçekte nedir
Klavye odağı, tarayıcının "şu anda hangi tek öğe etkin" kavramıdır — bir sonraki tuş basışını alacak ve ekranda genellikle görünür bir çerçeveyle vurgulanan öğe. Aynı anda yalnızca bir öğe odak tutabilir.
Odak nasıl hareket eder
Odak iki yoldan biriyle hareket eder: kullanıcı sayfada Tab'a bastıkça kendiliğinden ya da kod onu bilerek kaydırdığında programatik olarak — örneğin bir kalıcı pencere açıldığı anda odağı içine taşımak, kapandığında tetikleyen butona geri döndürmek gibi. Özel etkileşimli bileşenlerin çoğunun hata yaptığı yer bu ikincisidir: yönetilen odak.
Odak ters gittiğinde
Odak, ters yönde bozulduğunda "klavye tuzağı" denen duruma da karşılık gelir: odağı yakalayıp bir daha bırakmayan bir öğe; çünkü kullanıcının denediği hiçbir tuş bileşimi odağı dışarı çıkarmaz.
Sekme sırası nedir ve neden önemli?
Sekme sırası varsayılan olarak neyi izler
Sekme sırası, kullanıcı Tab'a arka arkaya bastıkça odağın izlediği sıradır ve varsayılan olarak öğelerin sayfanın HTML kaynağında göründüğü sırayı izler; işlenmiş sayfadaki görsel konumlarını değil. CSS bir öğeyi kaynaktaki yerini değiştirmeden görsel olarak başka bir yere taşıdığında ikisi ayrışır.
Sekme sırası görsel sıradan koptuğunda
Odak, görsel olarak sayfanın başka bir yerinde duran bir öğeye iner ya da HTML'de erken yazılmış bir kenar sütunu, gören bir kullanıcının önce okuyacağı ana içerikten önce odağı alır. Çözüm, odağı sonradan yeniden sıralayan bir betik değildir; en baştan HTML kaynak sırasını görsel okuma sırasıyla hizalı tutmaktır.
tabindex'in rolü
İlişkili ama ayrı bir uygulama, bir öğeyi sekme dizisine sokabilen (tabindex="0") ya da çıkarabilen (tabindex="-1") tabindex özniteliğidir. Belirli bir sırayı elle dayatmak için pozitif bir tabindex değeri kullanmak yaygın ama önerilmeyen bir kestirmedir; elle sürdürülmesi gereken ikinci ve rakip bir sıra yaratır.
Hangi web sitesi öğeleri klavyeyle erişilebilir olmalı?
Her etkileşimli öğenin klavyeyle erişilebilir olması gerekir ama farklı öğe türleri farklı hata biçimleriyle karşılaşır.
Bağlantılar
Geçerli bir href'e sahip yerel bir <a> etiketi kendiliğinden klavyeyle erişilebilirdir. href olmadan kurulan bir bağlantı sekme sırasından tamamen çıkar.
Butonlar
Yerel bir <button>, Tab ile ulaşılabilirliği ve Enter/Boşluk ile etkinleştirmeyi ek kod olmadan üstlenir. Biçimlendirilmiş bir <div> "buton" ise elle yeniden kurulmadıkça Tab'a görünmezdir.
Formlar
Mantıklı bir sekme sırasına, girdileriyle programatik olarak ilişkilendirilmiş etiketlere ve klavye kullanıcısının gerçekten karşılaştığı hata mesajlarına bağlıdır — yalnızca kırmızı bir CSS kenarlığına değil.
Menüler
Enter ya da Boşluk ile açılmalı, maddeler arasında ok tuşuyla hareket edilmeli ve Escape ile kapanırken odağı tetikleyiciye döndürmelidir. Yalnızca üzerine gelmeyle açılan bir menünün klavye karşılığı yoktur.
İletişim kutuları
Açıldığında odağı içine almalı, açıkken odağı kendi içinde tutmalı ve kapandığında tetikleyen öğeye geri döndürmelidir.
Akordeonlar
Aç/kapa denetimi gerçek bir buton olmalı, Enter ya da Boşluk ile çalışmalı ve açık durumu yardımcı teknolojiye bildirilmelidir.
Sekmeler
Ok tuşları sekmeler arasında hareket ettirmeli, Enter ya da Boşluk seçileni etkinleştirmelidir; diğer gruplanmış bileşenlerdeki kalıbı yansıtmalıdır.
Özel bileşenler
Özel bir kaydırıcı, sürükle-bırak listesi ya da tarih seçici, yerel eşdeğerinin sağladığı klavye davranışının hiçbirini devralmaz; her parçasının bilerek kurulması gerekir.
Klavye tuzağı nedir?
Klavye tuzağı, odağı yakalayan ve klavye kullanıcısının hangi tuşu ya da tuş bileşimini denerse denesin odağı dışarı çıkarmasına izin vermeyen bir öğedir. En ağır klavye erişilebilirliği hatalarından biridir; çünkü sürtünme yaratmaz, kullanıcıyı tamamen durdurur — ne ileri ne geri bir yol kalır.
Tuzaklar genellikle nerede oluşur
Klavye tuzakları en çok özel bileşenlerde görülür: açıkken odağı içinde doğru tutan ama kapandığında bir daha bırakmayan bir kalıcı pencere gibi. Bazı video oynatıcılar ya da reklam iframe'leri gibi gömülü üçüncü taraf içerikler de klavyeyle çıkış düşünülmeden kurulduysa odağı tuzağa düşürebilir. Tuzakla karşılaşan kullanıcının bir şeyin ters gittiğine dair görsel bir ipucu yoktur; sayfa aynı görünür ama Tab ve Shift+Tab çalışmayı bırakır.
WCAG'nin bunu neden ayrı bir ölçüt saydığı
Klavye tuzağı, genel klavye kullanılabilirliğinden ayrı olarak WCAG'de kendi başarı ölçütüyle anılır; tam da bir sitenin başarısız olmasının belirgin ve ağır bir yolu olduğu için. Ulaşılamamak bir engeldir ama çıkamamak tam bir çıkmaz sokaktır.
Klavyeyle gezinme nasıl test edilir?
Test, hızlı bir elle kontrolden biçimsel bir denetime kadar uzanır ve birden fazla yöntem kullanmak farklı sorun sınıflarını yakalar.
Elle klavye testi
Fareyi çıkarın ve gerçek bir görevi yalnızca Tab, Shift+Tab, Enter, Boşluk ve ok tuşlarıyla tamamlayın; ulaşılamayan öğeleri, kaybolan odak göstergesini ve klavye tuzaklarını izleyin.
Ekran okuyucu testi
Farklı bir sorun katmanını açığa çıkarır; bir öğe klavyeyle ulaşılabilir olduğu hâlde kötü etiketlenmiş olabilir ve ekran okuyucu ne işe yaradığını belirtmeden yalnızca "buton" der.
Tarayıcı geliştirici araçları
Test edenin erişilebilirlik ağacını doğrudan incelemesine imkân verir; hangi öğelerin odaklanabilir olduğunu, hesaplanmış rollerini ve tabindex değerlerinin amaçlandığı gibi ayarlanıp ayarlanmadığını doğrular.
Otomatik erişilebilirlik testi
Pozitif tabindex değeri gibi bazı sorunları işaretleyebilir ama sekme sırasının görsel sırayla örtüşüp örtüşmediğini ya da bir kalıcı pencerenin odağı doğru yakalayıp bıraktığını doğrulayamaz.
Erişilebilirlik denetimleri
Yukarıdakilerin tümünü, genellikle WCAG olmak üzere tanımlı bir standart karşısında yapılandırılmış bir değerlendirmede birleştirir ve iyileştirme planlanacak öncelikli bir bulgu listesi üretir.
WCAG klavye erişilebilirliğini nasıl tanımlar?
| 2.1.1 Klavye | Tüm işlevlerin, tek tek tuş vuruşları için belirli bir zamanlama gerektirmeden klavye arayüzüyle kullanılabilmesini şart koşar. A düzeyi — temel katman — gereksinimidir. |
|---|---|
| 2.1.2 Klavye Tuzağı Yok | Odağın herhangi bir bileşende tuzağa düşmesini açıkça yasaklar ve standart bir çıkış yöntemi işe yaramıyorsa kullanıcıya odağı uzaklaştırmanın alternatif yolunun bildirilmesini şart koşar. |
| 2.4.3 Odak Sırası | Bir sayfada sıralı gezinilebiliyorsa, sıranın anlamı ve kullanılabilirliği koruması gerektiğini belirtir — yukarıdaki sekme sırası tartışmasının standart düzeyindeki karşılığı. |
| 2.4.7 Görünür Odak | Klavyeyle kullanılabilen her arayüzde, hangi öğenin odakta olduğunu gösteren görünür bir göstergenin bulunmasını şart koşar — bir ekip varsayılan odak çerçevesini görünüş uğruna sildiğinde bozulan şey tam olarak budur. |
Klavyeyle gezinmede iyi uygulamalar neler?
Yerel HTML denetimlerini kullanın
Yerel bir buton, bağlantı ya da seçim kutusu; klavyeyle ulaşılabilirliği, etkinleştirmeyi ve çoğu zaman ok tuşu davranışını ek koda gerek kalmadan hazır getirir.
Mantıklı bir sekme sırası koruyun
Uyumsuzluğu elle senkron tutulması gereken tabindex değerleriyle yamamak yerine HTML kaynak sırasını görsel okuma sırasıyla hizalı tutun.
Görünür odak göstergeleri sağlayın
Varsayılan odak çerçevesini koruyun ya da eşit derecede görünür özel bir biçimle değiştirin; "daha temiz" görünsün diye asla kaldırmayın.
Klavye tuzaklarından kaçının
Kendi odağını yöneten her bileşenin açık ve test edilmiş bir çıkış yolu olmalıdır: Escape, ulaşılabilir bir kapat butonu ya da ikisi birden.
Standart klavye etkileşimlerini destekleyin
Tek bir bileşen için yeni bir kalıp icat etmek yerine, kullanıcıların yerel eşdeğerlerinden zaten beklediği kalıpları izleyin.
Faresiz test edin
Gerçek kullanıcı akışlarını düzenli olarak yalnızca klavyeyle tamamlamak, bu sorunları canlıya çıkmadan yakalamanın en doğrudan yoludur.
Sık sorulan sorular
Varsayılan olarak değil ve bilinçli bir çaba olmadan değil. Yerel HTML öğeleri kendiliğinden klavyeyle erişilebilirdir ama açılır liste, kaydırıcı ya da kalıcı pencere gibi özel bir bileşen, ancak bir geliştirici Tab ile ulaşılabilirliği, tuş işlemeyi ve odak yönetimini açıkça kurduysa faresiz çalışır.
Tab, klavye odağını sayfanın kaynak sırasındaki bir sonraki etkileşimli öğeye taşır; Shift+Tab ise bir öncekine geri götürür. Birlikte, klavye kullanıcısının sayfadaki etkileşimli öğeler arasında tek tek ilerlemesinin başlıca yoludur.
Klavye odağı, tarayıcının hangi tek öğenin o anda etkin olduğunu ve bir sonraki tuş basışını alacağını belirten kavramıdır. Genellikle görünür bir çerçeveyle gösterilir ve her klavye komutu o anda odağı tutan öğe üzerinde çalışır.
Klavye tuzağı, klavye odağını yakalayıp bir daha bırakmayan ve kullanıcıya ne yaparsa yapsın sekmeyle dışarı çıkma imkânı vermeyen bir bileşendir. Kullanıcıyı sürtünmeyle karşılaştırmak yerine tamamen durdurduğu için en ağır klavye erişilebilirliği hatalarından sayılır.
WCAG'nin temel klavye gereksinimleri; tüm işlevlerin klavyeyle kullanılabilmesini şart koşan 2.1.1 ve klavye tuzaklarını yasaklayan 2.1.2 başarı ölçütleridir. İlişkili iki ölçüt — 2.4.3 (odak sırası) ve 2.4.7 (görünür odak) — gereksinimi tamamlar.
En doğrudan test, sitede gerçek bir görevi yalnızca Tab, Shift+Tab, Enter, Boşluk ve ok tuşlarıyla tamamlamak ve özellikle ulaşılamayan öğeleri, eksik odak göstergelerini ve klavye tuzaklarını izlemektir. Ekran okuyucu testi, tarayıcı geliştirici araçları ve otomatik tarayıcıların her biri sorunların daha dar ve farklı bir dilimini yakalar.
Ekran okuyucu kullanıcılarının çoğu ağırlıklı olarak klavyeyle gezinir; çünkü fare işaretçisinin ekrandaki konumu, ekran okuyucunun o anda okuduğu şeyle ilişkili değildir. Dokunmatik cihazlardaki bazı ekran okuyucu kullanıcıları bunun yerine kaydırma hareketlerini kullanır ama masaüstünde standart olan klavye komutlarıdır.
