Sekme Arayüzlerinde Uzmanlaşma: Klavye Navigasyonu ve Odak Yönetimine Derinlemesine Bir Bakış

Sekmeli arayüzler, modern web tasarımının temel taşlarından biridir. Ürün sayfalarından kullanıcı panellerine ve karmaşık web uygulamalarına kadar, içeriği düzenlemek ve kullanıcı arayüzünü sadeleştirmek için zarif bir çözüm sunarlar. Yüzeyde basit görünseler de, gerçekten etkili ve erişilebilir bir sekme bileşeni oluşturmak, klavye navigasyonu ve titiz odak yönetimi konusunda derin bir anlayış gerektirir. Kötü uygulanmış bir sekme arayüzü, klavye veya yardımcı teknolojilere dayanan kullanıcılar için aşılamaz bir engel haline gelebilir ve onları içeriğinizden etkili bir şekilde dışlayabilir.

Bu kapsamlı rehber, temellerin ötesine geçmek isteyen web geliştiricileri, UI/UX tasarımcıları ve erişilebilirlik savunucuları içindir. Klavye etkileşimi için uluslararası kabul görmüş kalıpları, anlamsal bağlam sağlamada ARIA'nın (Accessible Rich Internet Applications - Erişilebilir Zengin İnternet Uygulamaları) kritik rolünü ve herkes için, konumları veya web ile nasıl etkileşimde bulunduklarından bağımsız olarak, sorunsuz ve sezgisel bir kullanıcı deneyimi yaratan incelikli odak yönetimi tekniklerini keşfedeceğiz.

Bir Sekme Arayüzünün Anatomisi: Temel Bileşenler

Mekaniğe dalmadan önce, WAI-ARIA Yazma Pratiklerine dayalı ortak bir kelime dağarcığı oluşturmak önemlidir. Standart bir sekme bileşeni üç ana unsurdan oluşur:

• Sekme Listesi (`role="tablist"`): Bu, sekmeler kümesini tutan kapsayıcı öğedir. Kullanıcıların farklı içerik panelleri arasında geçiş yapmak için etkileşimde bulunduğu birincil pencere öğesi (widget) olarak işlev görür.
• Sekme (`role="tab"`): Sekme Listesi içindeki tek bir tıklanabilir öğe. Etkinleştirildiğinde, ilişkili içerik panelini görüntüler. Görsel olarak, bu "sekmenin" kendisidir.
• Sekme Paneli (`role="tabpanel"`): Belirli bir sekmeyle ilişkili içeriğin kapsayıcısı. Herhangi bir anda yalnızca bir sekme paneli görünürdür—o anki aktif sekmeye karşılık gelen panel.

Bu yapıyı anlamak, yalnızca görsel olarak tutarlı değil, aynı zamanda ekran okuyucular gibi yardımcı teknolojiler için anlamsal olarak da anlaşılır bir bileşen oluşturmanın ilk adımıdır.

Kusursuz Klavye Navigasyonunun İlkeleri

Fare kullanan ve gören bir kullanıcı için sekmelerle etkileşim kurmak basittir: görmek istediğiniz sekmeyi tıklarsınız. Yalnızca klavye kullanan kullanıcılar için deneyim aynı derecede sezgisel olmalıdır. WAI-ARIA Yazma Pratikleri, yardımcı teknoloji kullanıcılarının beklediği sağlam ve standartlaştırılmış bir klavye etkileşim modeli sunar.

Sekme Listesinde (`role="tablist"`) Gezinme

Birincil etkileşim, sekmeler listesi içinde gerçekleşir. Amaç, kullanıcıların sayfadaki her etkileşimli öğe arasında gezinmek zorunda kalmadan sekmelere verimli bir şekilde göz atmasına ve seçmesine olanak tanımaktır.

• `Tab` tuşu: Bu giriş ve çıkış noktasıdır. Bir kullanıcı `Tab` tuşuna bastığında, odak sekme listesinin *içine* taşınmalı ve o anda aktif olan sekmeye gelmelidir. `Tab` tuşuna tekrar basmak, odağı sekme listesinin *dışına*, sayfadaki bir sonraki odaklanılabilir öğeye (veya tasarımınıza bağlı olarak aktif sekme panelinin içine) taşımalıdır. Ana fikir, tüm sekme listesi pencere öğesinin, sayfanın genel sekme sırasında tek bir durak noktası temsil etmesi gerektiğidir.
• Ok Tuşları (`Sol/Sağ` veya `Yukarı/Aşağı`): Odak sekme listesinin içindeyken, gezinme için ok tuşları kullanılır.
  • Yatay bir sekme listesi için, `Sağ Ok` tuşu odağı bir sonraki sekmeye, `Sol Ok` tuşu ise bir önceki sekmeye taşır.
  • Dikey bir sekme listesi için, `Aşağı Ok` tuşu odağı bir sonraki sekmeye, `Yukarı Ok` tuşu ise bir önceki sekmeye taşır.
  En önemlisi, gezinme döngüsel olmalıdır. Son sekmedeyken `Sağ Ok` tuşuna basmak odağı ilk sekmeye, ilk sekmedeyken `Sol Ok` tuşuna basmak ise odağı son sekmeye taşımalıdır. Bu, sınırlı ve öngörülebilir bir gezinme döngüsü oluşturur.
• `Home` ve `End` Tuşları: Çok sayıda sekme içeren listelerde verimlilik için bu tuşlar kısayollar sağlar.
  • `Home`: Odağı listedeki ilk sekmeye taşır.
  • `End`: Odağı listedeki son sekmeye taşır.

Aktivasyon Modelleri: Otomatik ve Manuel

Bir kullanıcı ok tuşlarını kullanarak sekmeler arasında gezindiğinde, ilgili panel ne zaman görüntülenmelidir? İki standart model vardır:

• Otomatik Aktivasyon: Bir sekme ok tuşu aracılığıyla odaklandığı anda, ilişkili paneli görüntülenir. Bu en yaygın modeldir ve genellikle anında olması nedeniyle tercih edilir. İçeriği görüntülemek için gereken tuş vuruşu sayısını azaltır.
• Manuel Aktivasyon: Ok tuşlarıyla odağı hareket ettirmek yalnızca sekmeyi vurgular. Kullanıcının daha sonra sekmeyi etkinleştirmek ve panelini görüntülemek için `Enter` veya `Boşluk` tuşuna basması gerekir. Bu model, sekme panelleri büyük miktarda içerik içerdiğinde veya ağ isteklerini tetiklediğinde yararlı olabilir, çünkü kullanıcı sadece sekme seçeneklerine göz atarken içeriğin gereksiz yere yüklenmesini önler.

Aktivasyon modeli seçiminiz, arayüzünüzün içeriğine ve bağlamına dayanmalıdır. Hangisini seçerseniz seçin, uygulamanız boyunca tutarlı olun.

Odak Yönetiminde Uzmanlaşma: Kullanılabilirliğin Adsız Kahramanı

Etkili odak yönetimi, hantal bir arayüzü sorunsuz bir arayüzden ayıran şeydir. Bu, kullanıcının odağının nerede olduğunu programlı olarak kontrol etmekle ilgilidir ve bileşen boyunca mantıksal ve öngörülebilir bir yol sağlar.

Dolaşan `tabindex` Tekniği

Dolaşan `tabindex`, sekme listeleri gibi bileşenler içindeki klavye navigasyonunun temel taşıdır. Amaç, tüm pencere öğesinin tek bir `Tab` durağı olarak hareket etmesini sağlamaktır.

İşte nasıl çalıştığı:

1. O anda aktif olan sekme öğesine `tabindex="0"` verilir. Bu, onu doğal sekme sırasının bir parçası yapar ve kullanıcı bileşene tab ile girdiğinde odak almasını sağlar.
2. Diğer tüm aktif olmayan sekme öğelerine `tabindex="-1"` verilir. Bu, onları doğal sekme sırasından çıkarır, böylece kullanıcının her birinin üzerinden `Tab` tuşuyla geçmesi gerekmez. Yine de programlı olarak odaklanabilirler, ki ok tuşu navigasyonu ile yaptığımız da budur.

Kullanıcı A Sekmesinden B Sekmesine geçmek için bir ok tuşuna bastığında:

• JavaScript mantığı, A Sekmesini `tabindex="-1"` olacak şekilde günceller.
• Ardından B Sekmesini `tabindex="0"` olacak şekilde günceller.
• Son olarak, kullanıcının odağını oraya taşımak için B Sekmesi öğesinde `.focus()` metodunu çağırır.

Bu teknik, listede kaç sekme olursa olsun, bileşenin sayfanın genel `Tab` sırasında yalnızca bir konum işgal etmesini sağlar.

Sekme Panelleri İçindeki Odak

Bir sekme aktif olduğunda, odak bir sonraki nereye gider? Beklenen davranış, aktif bir sekme öğesinden `Tab` tuşuna basmanın odağı, ilgili sekme panelinin *içindeki* ilk odaklanılabilir öğeye taşımasıdır. Sekme panelinde odaklanılabilir öğe yoksa, `Tab` tuşuna basmak odağı, sekme listesinden *sonra* sayfadaki bir sonraki odaklanılabilir öğeye taşımalıdır.

Benzer şekilde, bir kullanıcı bir sekme panelinin içindeki son odaklanılabilir öğeye odaklandığında, `Tab` tuşuna basmak odağı panelin dışına, sayfadaki bir sonraki odaklanılabilir öğeye taşımalıdır. Panelin içindeki ilk odaklanılabilir öğeden `Shift + Tab` tuşlarına basmak, odağı aktif sekme öğesine geri taşımalıdır.

Odak tuzağından kaçının: Bir sekme arayüzü, bir modal diyalog değildir. Kullanıcılar her zaman `Tab` tuşunu kullanarak sekme bileşenine ve panellerine girip çıkabilmelidir. Bileşen içinde odağı hapsetmeyin, çünkü bu kafa karıştırıcı ve sinir bozucu olabilir.

ARIA'nın Rolü: Anlam Bilgisini Yardımcı Teknolojilere İletmek

ARIA olmadan, `

<h2 id="tablist-label">Hesap Ayarları</h2>
<div role="tablist" aria-labelledby="tablist-label">
  <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="panel-1" tabindex="0">
    Profil
  </button>
  <button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="panel-2" tabindex="-1">
    Şifre
  </button>
  <button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="panel-3" tabindex="-1">
    Bildirimler
  </button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
  <p>Profil paneli için içerik...</p>
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" tabindex="0" hidden>
  <p>Şifre paneli için içerik...</p>
</div>
<div id="panel-3" role="tabpanel" aria-labelledby="tab-3" tabindex="0" hidden>
  <p>Bildirimler paneli için içerik...</p>
</div>

const tablist = document.querySelector('[role="tablist"]');
const tabs = tablist.querySelectorAll('[role="tab"]');

tablist.addEventListener('keydown', (e) => {
  let currentTab = document.activeElement;
  let newTab;

  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
    // Sıradaki bir sonraki sekmeyi bul, gerekirse başa dön
    newTab = getNextTab(currentTab);
  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
    // Sıradaki bir önceki sekmeyi bul, gerekirse başa dön
    newTab = getPreviousTab(currentTab);
  } else if (e.key === 'Home') {
    newTab = tabs[0];
  } else if (e.key === 'End') {
    newTab = tabs[tabs.length - 1];
  }

  if (newTab) {
    activateTab(newTab);
    e.preventDefault(); // Ok tuşları için varsayılan tarayıcı davranışını engelle
  }
});

function activateTab(tab) {
  // Diğer tüm sekmeleri devre dışı bırak
  tabs.forEach(t => {
    t.setAttribute('aria-selected', 'false');
    t.setAttribute('tabindex', '-1');
    document.getElementById(t.getAttribute('aria-controls')).hidden = true;
  });

  // Yeni sekmeyi etkinleştir
  tab.setAttribute('aria-selected', 'true');
  tab.setAttribute('tabindex', '0');
  document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
  tab.focus();
}