Ana içeriğe geç

2.4.3 Odak Sırası

Klavye odağı, anlamı ve kullanılabilirliği koruyacak şekilde mantıklı bir sırayla ilerlemelidir.

SC Kodu: 2.4.3 Seviye: A
URL: https://www.w3.org/TR/WCAG22/#focus-order

Genel Tanım​

WCAG SC 2.4.3 Odak Sırası, kullanıcıların içerikte sırayla gezinirken, içeriğin anlamıyla tutarlı ve klavyeden çalıştırılabilen bir sırayla bilgiyle karşılaşmalarını sağlar. Kullanıcılara görsel olarak sunulan tüm içerik, klavye ile gezinirken aynı sırayı izlemelidir. Bu kriter, kullanıcıların içeriğe ilişkin zihinsel bir model oluşturmalarına yardımcı olarak kafa karışıklığını azaltır ve kullanılabilirliği artırır.

Faydalar​

  • Klavye Kullanıcıları İçin Geliştirilmiş Gezinme: Klavyeyle gezinmeyi tercih eden kullanıcıların içerikte mantıklı ve anlamlı bir şekilde hareket edebilmelerini sağlar.
  • Ekran Okuyucu Kullanıcıları İçin Geliştirilmiş Kullanılabilirlik: Görme engelli veya az gören kullanıcıların içerik yapısını anlamalarına ve karışıklık yaşamadan gezinmelerine yardımcı olur.
  • Azaltılmış Bilişsel Yük: Bilişsel engelli kullanıcılara öngörülebilir ve sezgisel bir odaklanma sırası sağlayarak yardımcı olur.

Ana Amaç​

Bir web sayfasında odaklanabilecek bileşenlerin, özellikle gezinme sıraları içeriğin anlamını veya işleyişini etkilediğinde, anlamı ve işlevselliği koruyacak bir sırayla odaklanmasını sağlamak. Web geliştiricileri veya yazarları bazen bazı kullanıcılar için görsel olarak anlamlı olan bileşenlere sahip bir sayfa oluştururlar. Bu, anlamsal olarak doğru olmayabilir ve sayfanın doğal sekme sırasını bozarak bazı kullanıcılar için bozulmuş bir gezinme deneyimine neden olabilir.

2.4.3.d En İyi Uygulamalar​

  • 1'den büyük tabindex değerleri kullanmaktan kaçının: Odaklanma sırasını yönetmek için 1'den büyük tabindex değerleri kullanmaktan kaçının, çünkü bu mantıksal akışı bozabilir.
  • Odaklanma sırasını okuma sırasıyla uyumlu hale getirin: Mantıklı ve sezgisel bir gezinme sağlamak için odaklanma sırasını okuma sırasıyla uyumlu hale getirin.
  • Bölümler içinde sıralı odaklanmayı sağlayın: Bölümler içindeki etkileşimli öğelerin beklenmedik sıçramalar olmadan, sırayla odaklanmasını sağlayın.
  • Açılır pencerelerde, modal pencerelerde ve diyaloglarda odaklanmayı yönetme: Açılır pencerelerde, modal pencerelerde, diyaloglarda ve açılır menülerde, öğenin DOM'daki tetikleyici öğeye yakın konumda olduğundan emin olun. Ek olarak, odağı diyalogun ilk etkileşimli öğesine taşıyan ve diyalog içindeki odak sırasını sabitleyen bir komut dosyası ekleyin. Tetikleyici öğeye geri dönmek için, örneğin Escape tuşunu kullanarak, bir mekanizma sağlayın.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Açılır Menüler İçeren Bir Gezinme Menüsünde Odaklanma Sırası

Nelerden Kaçınılmalı?

Gezinti menüsünde, açılır menüler CSS kullanılarak gizlenir. Klavye kullanıcılarının açılır menüyü açması için herhangi bir komut dosyası sağlanmamıştır. Sonuç olarak, klavye ile gezinen kullanıcılar açılır menüdeki öğeleri kaçıracaktır. Görme engelli olmayan kullanıcılar fare tıklaması veya üzerine gelme yoluyla açılır menüyü açabilir, ancak bu işlevsellik klavye kullanıcıları için erişilebilir değildir. HTML Örneği (Yanlış uygulama):

HTML/CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset = "UTF-8" >
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
    <title> Gezinti Menüsü </title>​
    
    <style> 
      .dropdown-content {
        display : none ; 
      }

      .dropdown:hover .dropdown-content {
        display : block ;
      }
    </style>​​
  </head>​​
  <body>​​
    <nav>​​
      <ul>
        <li><a href = "#" >Ana Sayfa</a ></li>
        <li class = " dropdown " > <a href="#"> Hizmetler </a>​​
        <ul class = "dropdown-content" >
          <li><a href = "#" >Web Tasarımı</a ></li>
          <li><a href = "#" >SEO</a ></li>
        </ul>​​
      </li>
      <li><a href = "#" >İletişim</a ></li>
    </ul>​​
  </nav>​​
  </body>​​
</html>​​

Açıklama: Gezinme menüsünde, açılır menüler display:none kullanılarak gizlenir. Klavye kullanıcılarının açılır menüyü açması için herhangi bir komut dosyası sağlanmamıştır. Sonuç olarak, klavye ile gezinen kullanıcılar açılır menüdeki öğeleri kaçıracaktır. Görme engelli olmayan kullanıcılar fare tıklaması veya üzerine gelme yoluyla açılır menüyü açabilir, ancak bu işlevsellik klavye kullanıcıları için erişilebilir değildir.

Ne Yapılmalı?

HTML/CSS

<!DOCTYPE html >
<html lang = "en" >
  <head>
    <meta charset = "UTF-8" >
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
    <title> Gezinti Menüsü </title>​
    <style> 
    .dropdown-content {
      display : none ;
      position : absolute ;
      background-color : #f9f9f9 ;
      box-shadow : 0px 8px 16px 0px rgba(0,0,0,0.2) ;
      z-index : 1 ; 
    }

    .dropdown-content a {
      color : black ;
      padding : 12px 16px ;
      text-decoration : none ;
      display : block ;
    }

    .dropdown-content a:focus {
      background-color : #f1f1f1 ;
    }
    
    .dropdown:hover .dropdown-content , .dropdown:focus-within .dropdown-content {
      display : block ;
    }
  </style>​​
</head>​​
<body>​​
  <nav>​​
    <ul>
      <li><a href = "#" >Ana Sayfa</a ></li>
      <li class = "dropdown" >
        <a href="#" id="services-trigger"> Hizmetler </a>​ ​​​​​​​
        <ul class = "dropdown-content" id = "services-dropdown" >
          <li><a href = "#" tabindex = "0" >Web Tasarımı</a ></li>
          <li><a href = "#" tabindex = "0" >SEO</a ></li>
        </ul>​​
      </li>
      <li><a href = "#" >İletişim</a ></li>
    </ul>​​
  </nav>​​
  <script>

Açıklama: Bu doğru uygulamada, tetikleyici öğeye odaklanıldığında açılır menü otomatik olarak açılacaktır. Klavye kullanıcıları, "Hizmetler" bağlantısına odaklanıldığında aşağı ok tuşuna basarak açılır menüyü açabilirler. Odak daha sonra açılır menüdeki ilk öğeye geçer. Escape tuşuna basmak açılır menüyü gizler ve odağı "Hizmetler" bağlantısına geri döndürür. Görme engelli olmayan kullanıcılar için açılır menü fare tıklaması veya üzerine gelme yoluyla da açılabilir. Bu yaklaşım, klavye kullananlar da dahil olmak üzere tüm kullanıcıların açılır menüde etkili bir şekilde gezinmesini sağlar.