Ana içeriğe geç

2.1.1 Klavye

Tüm işlevler klavye arayüzü üzerinden kullanılabilir olmalıdır. Bu sayede fare kullanamayan kullanıcılar içeriğe tam olarak erişip etkileşim kurabilmelidir.

SC Kodu: 2.1.1 Seviye: A
URL: https://www.w3.org/TR/WCAG22/#keyboard

Genel Tanım​

WCAG 2.1.1 Klavye, içeriğin tüm işlevlerinin, kullanıcının hareket yoluna bağlı olan işlevler hariç, tek tek tuş vuruşları için belirli zamanlamalar gerektirmeden bir klavye arayüzü aracılığıyla çalıştırılabilir olmasını gerektirir. Bu kriter, klavyeye güvenen kullanıcıların tüm web içeriğine erişebilmelerini ve bunları kullanabilmelerini sağlar.

Faydalar​

  • Motor Engelliler İçin Erişilebilirlik: Motor engeli olan kullanıcıların klavye kullanarak web içeriğinde gezinmelerini ve etkileşimde bulunmalarını sağlar.
  • Görme Engelli Kullanıcılar İçin Geliştirilmiş Gezinme: Ekran okuyucu kullanıcılarının klavye kısayollarını kullanarak içeriğe verimli bir şekilde erişebilmelerini sağlar.
  • Yaşlı Kullanıcılar İçin Geliştirilmiş Kullanılabilirlik: Fare kullanımını zor bulan yaşlı kullanıcılar için güvenilir bir etkileşim yöntemi sunar.

Ana Amaç​

Mümkün olan her yerde, bileşen veya işlev kullanıcı hareketini gerektirmediği sürece, tüm web içeriği işlevlerinin bir klavye veya klavye arayüzü aracılığıyla erişilebilir ve çalıştırılabilir olmasını sağlamak. Bu, kullanıcının fare hassasiyetini gerektiren bir çizim oyunu veya farenin pilotun direksiyonunu taklit ettiği bir uçuş simülatörü olabilir.

En İyi Uygulamalar​

  • Sekme tuşu erişilebilirliğini sağlayın: Sayfadaki tüm öğelerin (düğmeler, bağlantılar, form kontrolleri vb.) sekme tuşuyla erişilebilir olduğundan emin olun.
  • Enter ve boşluk tuşlarıyla etkinleştirmeye izin ver: Kullanıcılar, yazar farklı bir etkinleştirme yöntemi belirtmediği sürece (bu yöntem kullanıcıya açıklanmalıdır), Enter ve/veya boşluk tuşlarını kullanarak düğmeleri, bağlantıları ve form denetimlerini etkinleştirebilmelidir.
  • Temiz ve anlamlı kod yazın: Varsayılan klavye kullanımını sağlamak için temiz ve anlamlı HTML ve CSS kodları yazın.
  • Görünür odaklanmayı sağlayın: Sayfadaki tüm aktif öğelerin görünür şekilde odaklanmasını sağlayın.
  • Mantıksal ve sezgisel odaklanma sırasını koruyun:
  • Özel kullanıcı arayüzü öğeleri için tabindex=0 kullanın: Bu öğeleri odaklanabilir hale getirmek için (örneğin, <div> öğesinden oluşan bir düğme) tabindex=0 kullanın.
  • Özel öğeler için olay işleyicileri sağlayın: Klavye ile çalışabilirliği sağlamak için özel olarak yazılmış öğeler için uygun olay işleyicileri sağlayın.
  • Erişim tuşlarından kaçının veya bunları dikkatlice yönetin: Mümkünse erişim tuşlarından kaçının veya bunların kullanıcı aracısı ve yardımcı teknoloji kısayol tuşlarıyla çakışmadığından emin olun.
  • Klavye işlemlerine zaman sınırlaması getirmekten kaçının: Birden fazla tuş vuruşu gerektiren klavye işlemlerine zaman sınırlaması getirmekten kaçının.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Bir web sayfası, kullanıcılar tarafından etkinleştirilebilen ve etkileşimde bulunulabilen görsel bir bağlantı içerir.

Nelerden Kaçınılmalı?

HTML/CSS

<div id = "login - link" >Giriş yap </div>

<style> 

#login-link {
  display : inline-block ;
  padding : 10px 20px ;
  border : none ; border-radius : 5px ;
  cursor : pointer ;
  font-weight : bold ; 
  background-color : #000 ; /* Geçerli bir renk ekleyin */
  color : white ;
}
</style>​​
<script> 
  const link = document.querySelector ( " # login-link" );
  link.addEventListener ( "click" , () = > { 
    window.location.href = "https://login.tabnav.com" ;
  });

</script>​​

Açıklama: Özelleştirilmiş bağlantı, görsel kullanıcıların çoğu için iyi çalışıyor gibi görünüyor. Tıklandığında, onları bir sonraki sayfaya götürüyor. Ancak, klavye kullanıcıları bu bağlantıya gidemez çünkü DOM'un tabindex öğelerine dahil edilmemiştir. Dahil edilmiş olsa bile, yalnızca fare işlevselliği sunar, klavye işlevselliği sunmaz.

Ne Yapılmalı?

HTML/CSS

<div tabindex = "0" id = "login-link" > Giriş yap </div>
<style> 
  #login-link {
    display : inline-block ;
    padding : 10px 20px ;
    border : none ; 
    border-radius : 5px ;
    cursor : pointer ;
    font-weight : bold ; 
    background-color : #000 ; /* Geçerli bir renk ekleyin */
    color : white ; 
}
</style>​​
<script> 
  const link = document.querySelector ( " # login-link" );
  link.addEventListener ( " click" , () = > { 
    window.location.href = "https://login.tabnav.com" ;
  });
  
  link.addEventListener ( "keydown" , ( event ) => {
    let target = event.target ; 
    if ( event.key === " " || event.key === " Enter " ) { 
      target.click ( ) ; 
    } 
  });
</script>​​

Açıklama: Bu durumda, bağlantı özel olarak oluşturulmuştur ancak normal bir bağlantının tüm işlevselliğini sağlar. Öğeyi DOM'un sekme sırasının bir parçası haline getirmek ve klavye navigasyonu sırasında odağın bağlantıya ulaşmasını sağlamak için "tabindex="0"" ifadesini ekledik. Ek olarak, özel bir keydown olay işleyicisi, klavyeyi kullanarak fare tıklama işlevini tetikler.