2.1.2 Klavye Tuzağı Yok

Klavye odağı herhangi bir bileşende kilitlenmemelidir. Kullanıcılar yalnızca klavye kullanarak tüm arayüz öğelerine girip çıkabilmelidir.

SC Kodu: 2.1.2 Seviye: A
URL: https://www.w3.org/TR/WCAG22/#no-keyboard-trap

Genel Tanım

WCAG SC 2.1.2 Klavye Tuzağı Yok standardı, web sitelerinin klavye kullanarak gezinen kişiler için kullanıcı dostu olması gerektiğini şart koşar. Bu, kullanıcıların sayfanın bir bölümünde takılıp kalmaması gerektiği anlamına gelir. Eğer bir öğeye ulaşmak için klavyeyi kullanabiliyorlarsa, o öğeden uzaklaşmak için de klavyeyi kullanabilmelidirler. Bazı durumlarda, klavyeyi kullanarak bir bölümden çıkmanın belirli bir yolu olabilir. Eğer böyle bir durum söz konusuysa, web sitesi bunun nasıl yapılacağını belirtmelidir.

Faydalar

• Klavye Kullanıcıları İçin Geliştirilmiş Erişilebilirlik: Kullanıcıların herhangi bir sayfa bileşenine takılıp kalmadan, yalnızca klavye kullanarak özgürce gezinebilmelerini sağlar.

Ana Amaç

Kullanıcıların bir web sayfasının tüm bileşenlerine klavye arayüzü kullanarak kolayca erişebilmelerini ve bu bileşenlerden ayrılabilmelerini sağlamak, böylece klavye tuzaklarının önlenmesini sağlamak.

En İyi Uygulamalar

• Sekme navigasyonunun eksiksiz olmasını sağlayın: Kullanıcıların sitenin tüm bölümlerine sekme tuşuyla kolayca geçiş yapabilmelerini ve siteden ayrılabilmelerini sağlayın.
• Kasıtlı tuzaklar için talimatlar verin: Kullanıcı web sayfasının bir bölümünde kasıtlı olarak tuzağa düşürülürse, tuzaktan nasıl çıkılacağına dair net talimatlar verin.
• Klavye kullanımını test edin: Sitenin tüm bölümlerinin klavye ile kullanımını test etmek için, ileri gitmek için sekme tuşunu, geri gitmek için ise Shift + sekme tuşunu kullanın.
• Özel tuş vuruşları için ipuçları sağlayın: Bir denetimi çalıştırmak için özel tuş vuruşları için ipuçları sağlayın.
• Üçüncü taraf bileşenlerin erişilebilirliğini sağlayın: Üçüncü taraf bileşenlerin erişilebilir olduğundan ve klavye kullanımında sorunlara neden olmadığından emin olun.

Örnekler ve Açıklamalar

Örnek: Örnek Uygulama

Kullanıcının klavye kullanarak etkileşimli bir haritadan çıkabilmesini sağlamak.

Nelerden Kaçınılmalı?

HTML/CSS

<map tabindex = "0" name = "workmap" >
  <area shape = "rect" coords = "34,44,270,350" alt = "Bilgisayar" href = "computer.htm" >
  <area shape = "rect" coords = "290,172,333,250" alt = "Telefon" href = "phone.htm" >
  <area shape = "circle" coords = "337,300,44" alt = "Cup of coffee" href = "coffee.htm" >
</map>​​

<a href="#next-section"> Sonraki Bölüm </a>​ ​​​

<script> 
  const map = document.querySelector ( " map " ) ;
  const firstArea = document.querySelector ( " area " ) ;
  
  harita.addEventListener ( "keydown" , ( e ) => { 
    if ( e.key === " ArrowDown" ) {
      firstArea.focus ( ) ;
    }
  })

  map.addEventListener ( ' keydown' , ( e ) = > { 
    const targetElement = e.target ;
    
    if ( e.key === 'Tab' ){ 
      e.preventDefault () ;
    }

    if ( e.shiftKey ) { 
      if (targetElement.previousElementSibling?.tagName === " AREA " ) {
        targetElement.previousElementSibling.focus() ;
      }
      else {
        map.children[ map.children.length - 1].focus (); 
      }
    }
  } 
  else {
    if ( targetElement.nextElementSibling?.tagName === "AREA" ) {
      targetElement.nextElementSibling . focus ();
    } 
    else {
      map.children[0].odaklan () ; 
    }
  });

</script>​​

Açıklama: Bu örnekte, kullanıcı "harita" öğesine sekme tuşuyla geçtiğinde, aşağı ok tuşunu kullanarak haritaya girebilir. İçeri girdikten sonra, ileri ve geri hareket etmek için Sekme tuşunu kullanarak tıklanabilir alanlar arasında gezinebilir. Ancak, kullanıcının haritadan çıkması için net bir yol bulunmamaktadır, bu da bir gezinme tuzağı oluşturmaktadır. Bu, kullanıcıların süresiz olarak harita içinde sıkışıp kalacağı anlamına gelir.

Ne Yapılmalı?

HTML/CSS

<map title = "Haritaya girmek için aşağı ok tuşuna basın" tabindex = "0" name = "workmap" >
<note style = "display: block; font-size: smaller; text-align: center;" > Haritadan çıkmak için Escape tuşunu kullanın </note>
  <area shape = "rect" coords = "34,44,270,350" alt = "Bilgisayar" href = "computer.htm" >
  <area shape = "rect" coords = "290,172,333,250" alt = "Telefon" href = "phone.htm" >
  <area shape = "circle" coords = "337,300,44" alt = "Cup of coffee" href = "coffee.htm" >
</map>​​
<a href="#next-section" id="next-link"> Sonraki Bölüm </a>​ ​​​​​​

<script> 
  const map = document.querySelector ( " map " ) ;
  const firstArea = document.querySelector ( " area " ) ;
  map.addEventListener ( "keydown" , ( e ) => {
    if( e.key === " ArrowDown" ) {
      firstArea.focus ();
    }
  });

  map.addEventListener ( ' keydown' , ( e ) = > { 
    const targetElement = e.target ;
    
    if ( e.key === ' Tab ' ){ 
      e.preventDefault ();
    
    if (e.shiftKey) { 
      if (targetElement.previousElementSibling?.tagName === " AREA " ) {
        targetElement.previousElementSibling.focus ();
      } else { 
        map.children [map.children.length - 1] .focus () ; 
      }
    } else {
      if ( targetElement.nextElementSibling?.tagName === "AREA" ) {
        targetElement.nextElementSibling.focus ();
      } else { 
        map.children[0].odaklan () ; 
      }
    }
  }
  
  if ( e.key === "Escape" ) {
    map.focus ( ) ; 
    }
  });
</script>​​

Açıklama: Bu geliştirilmiş örnekte, kullanıcı "harita" öğesine sekme tuşuyla geçtiğinde, haritaya girmek için aşağı ok tuşunu kullanmaları gerektiğini belirten bir ipucu açılır. Haritaya girdikten sonra, kullanıcılar Sekme tuşunu kullanarak tıklanabilir alanlar arasında gezinebilirler. Ek olarak, haritada gezinmeden nasıl çıkılacağı ve sayfada gezinmeye devam etmek için ana "harita" öğesine nasıl geri dönüleceği açıklanmaktadır. Notu tamamlamak için, keydown olay dinleyicisine yeni bir koşullu ifade eklenmiştir. Bu ifade, kullanıcı Escape tuşuna bastığında odağı tekrar "harita" öğesine taşır ve haritadan çıkmalarına olanak tanır.