Web Arayüzlerinde Sekmeler: Ne Zaman Kullanılır, Nasıl Erişilebilir Olur

Sekme, ekrandaki tek bir alanı birden çok içerik grubuna paylaştırır. Bu takas, kullanıcının aynı anda yalnızca tek bir gruba ihtiyaç duyduğu varsayımına dayanır. Varsayım tutmadığında sekme kimseyi rahatlatmaz; içeriği gözden saklar ve bulma maliyetini yükseltir.

Önce varsayımı sınayın

Kullanıcı iki grubu karşılaştırmak zorundaysa sekme yanlış bileşendir. Fiyat paketleri, teknik özellik tabloları, iki ürünün farkları: bunların hepsi aynı anda görünmek ister. Sekmeye koyduğunuzda kullanıcı sağdaki değeri hatırlayıp soldakine geçmeye çalışır, yani işi arayüzden kendi belleğine devredersiniz.

İkinci sınav sıralılık. İçerik baştan sona okunacaksa (kurulum adımları, bir sürecin aşamaları) sekme akışı böler. Sekme, birbirinin alternatifi olan gruplar için vardır, birbirinin devamı olanlar için değil.

Akordeon mu, sekme mi?

Aradaki asıl fark görsellik değil, aynı anda kaç bölümün açık kalabildiği. Akordeon birden fazla bölümü aynı anda açık tutabilir, sekme tutamaz. Kullanıcı iki bölümü yan yana görmek isteyecekse akordeon, her seferinde tek bölüm yetiyorsa sekme. Dar ekranda sekme şeridi zaten yatay kaydırmaya ya da ikinci satıra düşer, orada akordeon çoğu zaman daha iyi çalışır.

Sayfa içi sekme ile navigasyon sekmesi ayrı işlerdir

Sayfa içi sekme aynı sayfada paneli değiştirir. Navigasyon sekmesi başka bir sayfaya götürür ve teknik olarak bir bağlantı listesidir. Görsel olarak birbirine benzemeleri kullanıcıyı yanıltır: birinde geri tuşu çalışır, diğerinde çalışmaz.

Bu ayrım işaretlemeye de yansımalı. Navigasyon sekmelerini nav içinde sıradan bağlantı olarak bırakın; role="tablist" ve role="tab" yalnızca sayfa içi sekmelere aittir. Ekran okuyucu kullanıcısına "sekme" diye duyurulan bir öğenin sayfayı komple değiştirmesi, arayüzün verdiği sözü bozar.

Seçili sekmeyi tek göstergeye emanet etmeyin

Yalnızca renk farkıyla işaretlenen seçili sekme, düşük kontrastlı ekranda ve renk ayrımı zorluğu olan kullanıcıda kaybolur. Kalınlık, alt çizgi ve arka plan farkından en az ikisini birlikte kullanın.

Etiketler bir ya da iki kelime olsun, tamamı büyük harf yazılmasın: büyük harf kelimenin siluetini düzleştirir ve göz taramayı yavaşlatır. Sekmeler tek satıra sığmalı. İkinci satıra taşan şeritlerin klasik kusuru, seçim yapıldığında satırların yer değiştirmesidir; kullanıcının sekmenin nerede durduğuna dair konumsal hafızası her tıklamada sıfırlanır.

Tab tuşu sekmeler arasında gezinmez

En sık tekrarlanan yanlış bilgi bu. W3C ARIA Authoring Practices sekme desenini tarif ederken şeridin tamamına tek bir sekme durağı verir: şeritte yalnızca seçili sekme odaklanabilir (tabindex="0"), diğerleri tabindex="-1" alır, sekmeler arası geçiş ok tuşlarıyla yapılır. Tab tuşu şeritten çıkıp panele geçirir.

Bunun getirisi doğrudan sayılabilir. Her sekmeyi ayrı ayrı odaklanabilir bıraktığınızda sekiz sekmeli bir şeritte içeriğe ulaşmak sekiz Tab vuruşu ister; doğru desende tek vuruş yeter. Klavyeyle gezen bir kullanıcı için bu, sayfadaki her ziyarette tekrarlanan bir bedeldir.

Geri kalanı bağlantı kurmaktan ibaret: her sekme aria-controls ile panelini, her panel aria-labelledby ile sekmesini işaret eder, seçili sekme aria-selected="true" taşır, panelin içinde odaklanabilir öğe yoksa panele tabindex="0" verilir.

Gizli panelin faturası

Sekmeyle sakladığınız içerik, sakladığınız yerde birkaç şeyi birden kaybeder. Tarayıcının sayfa içi araması display:none alanları bulmaz, dolayısıyla kullanıcı aradığı kelimeyi yazar, sonuç alamaz ve bilginin sayfada olmadığına karar verir. Yazdırma çıktısında da yalnızca açık panel görünür; ürün özellikleri sekmedeyse basılan sayfa yarım kalır.

En pahalısı durumun adreste tutulmaması. Sekme seçimi URL'ye yazılmıyorsa yenilemede ve paylaşılan bağlantıda herkes ilk sekmeyi görür. Bir e-ticaret projesinde destek ekibine düşen "kargo bilgisi sayfada yok" şikayetlerinin kaynağı tam olarak buydu; müşteriye gönderilen bağlantı her seferinde ilk sekmeyi açıyordu. Çözümü basit: seçimi hash ya da sorgu parametresine yaz, sayfa açılışında oku.

Arama motoru tarafında durum daha rahat. Sekme arkasındaki metin sayfa kaynağında bulunduğu sürece indekslenir. Asıl risk, panelin içeriğini yalnızca tıklamadan sonra sunucudan çekmek: o içerik kaynakta hiç yoksa taranacak bir şey de yoktur.

Hangi sekmenin tıklanmadığını ölçün

Sekme başına tıklama olayı yazmak birkaç satırlık iş ve karşılığında tasarım kararını tahminden çıkarır. Neredeyse hiç açılmayan bir sekmenin iki muhtemel sebebi vardır: etiket ne vaat ettiğini anlatmıyordur ya da o gruba gerçekten ihtiyaç yoktur. İkisinin ayrımı etiketi değiştirip ölçümü tekrarlamakla yapılır.

Sayıları okurken tek tuzağa dikkat edin: ilk sekme varsayılan olarak açık geldiği için görüntülenme rakamı şişer. Karşılaştırmayı ilk sekme dışındaki sekmeler arasında yapın, ilk sekmeyi ölçüye katmayın.