Gezinme

Bağlantılar bölümünde öğrendiğiniz gibi, href özelliğine sahip <a> öğesi, kullanıcıların tıklayarak veya dokunarak takip edebilecekleri bağlantılar oluşturur. Listeler'de, içerik listelerinin nasıl oluşturulacağını öğrendiniz. Bu modülde, gezinme oluşturmak için bağlantı listelerini nasıl gruplandıracağınızı keşfedeceksiniz.

Birkaç tür gezinme ve bunları görüntülemenin birkaç yolu vardır. Aynı web sitesindeki diğer sayfalara bağlantı veren, metin içinde yer alan adlandırılmış bağlantılar yerel gezinme olarak kabul edilir. Site yapısına göre mevcut sayfanın hiyerarşisini veya kullanıcının geçerli sayfaya ulaşmak için takip ettiği sayfaları gösteren bir dizi bağlantıdan oluşan yerel gezinme şekline içerik haritası denir.

Sayfaların içindekiler bölümü de yerel gezinme türlerinden biridir. Bir sitedeki her bir sayfaya yönelik hiyerarşik bağlantılar içeren sayfalara site haritası denir. Web sitesinin muhtemelen her sayfada bulunan en üst düzey sayfalarına götüren gezinme işlemine genel gezinme adı verilir. Genel gezinme, aralarında gezinme çubukları, açılır menüler ve uçan menüler gibi birkaç farklı şekilde görüntülenebilir. Aynı site, görüntü alanı boyutuna bağlı olarak genel gezinme menüsünü farklı şekilde gösterebilir.

Kullanıcıların sitenizdeki herhangi bir sayfaya en az sayıda tıklamayla gidebileceğinden emin olun. Bu sırada gezinmenin sezgisel ve kullanıcıları bunaltmayacak şekilde olduğundan emin olun. Bununla birlikte, gezinme öğeleri için belirli bir şart yoktur. Tek sayfalık bir web sitesi olan MachineLearningWorkshop.com'un sağ üst kısmında yerel bir gezinme çubuğu bulunur. Çok sayfalı siteler genellikle global gezinmelerini buraya yerleştirir.

"İçeriğe atla" bağlantısı

Bazı sitelerde, genellikle odak sırasının ilk öğesi olarak "İçeriğe atla" bağlantısı bulunur. Bu, aşağıdaki gibi görünebilir:

<a href="#main" class="skip-link button">Skip to main</a>

Tıklandığında veya odaklanıldığında ve kullanıcı Enter tuşuna bastığında sayfayı kaydırır ve main kimliğine sahip öğeye (muhtemelen ana içerik) odaklanır.

<main id="main">

Kullanılabilirliği ve erişilebilirliği artırmak için kullanıcıların her sayfada tekrarlanan içerik bloklarını (ör. paylaşılan bir başlık ve ana gezinme öğeleri) atlamalarına olanak tanımak önemlidir. Klavye kullanan bir kullanıcı, atlama bağlantısı sayesinde tab tuşuna basarak sayfadaki yeni içeriğe hızlıca gidebilir. Böylece, kullanıcıların geniş bir menüde sekme tuşuyla gezinmesi gerekmez.

Çoğu tasarımcı, sayfanın en üstünde böyle bir bağlantının görünmesini istemez. Bu bağlantıyı gizleyebilirsiniz. Ancak bağlantıya odaklanıldığında, yani klavye kullanıcısı sayfadaki bağlantıyı tıkladığında bağlantının kullanıcı tarafından görülebilmesi gerektiğini unutmayın.

.visually-hidden:not(:focus):not(:active) benzeri bir seçici kullanarak yalnızca odaklanmamış ve etkin olmayan durumdaki içerikleri gizleyin.

Tüm bağlantı metinlerinde olduğu gibi, ad da bağlantının kullanıcıyı nereye yönlendirdiğini açıkça belirtmelidir. Bağlantı hedefi, sayfanın ana içeriğinin başlangıcı olmalıdır.

İçindekiler

Ana içeriğimizin ilk öğesi, bu sayfanın başlığını içeren <h1> başlığıdır: <h1>Navigation</h1>. Ana başlıkta bu eğiticinin içeriğinin kısa bir açıklaması yer alır.

İçindekiler listesi, küçük ekranlarda başlığın altında görünür. Daha büyük ekranlarda sağa hizalanmış bir kenar çubuğunda gösterilir.

Gezinme bölümleri için kullanılabilecek en iyi öğe <nav>'tür. Ekran okuyucuyu ve arama motorunu, bir bölümün yer işareti rolü olan navigation rolüne sahip olduğunu otomatik olarak bilgilendirir.

Gezinme amacının kısa bir açıklaması için aria-label özelliğini ekleyin. Bu durumda, söz konusu özelliğin değeri "Bu sayfada" metninde gereksiz olacaktır. Görünür metne referans vermek için bunun yerine aria-labelledby simgesini kullanın.

id kullanarak bu durum aşağıdaki gibi görünebilir:

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
...
</nav>

Gereksiz fazlalıkları azaltmanın yanı sıra görünür metinler çeviri hizmetleri tarafından çevrilir. Özellik değerleri ise çevrilmeyebilir. Mümkün olduğunda, yeterli bir etiket sağlayan metin varsa özellik metnini kullanmak yerine bu metne referans verin.

"Bu sayfada" gezinme bölümü, içindekiler tablosudur. aria-label kullanmak istiyorsanız görünür metni tekrarlamak yerine bu bağlamı sağlayın:

<nav aria-label="Table of Contents">
  <p>On this page</p>
...
</nav>

Bir öğede erişilebilir bir ad sağlamak için öğenin adını eklememeniz gerekir. Ekran okuyucular, öğenin adını kullanıcıya sağlar. Örneğin, <nav> öğesini kullanırken "gezinme" kelimesini eklemeyin çünkü bu bilgiler zaten anlamsal öğelerle birlikte sunulur.

Gezinme öğelerinin bir listeye yerleştirilmesi gerekmese de liste kullanmak, ekran okuyucu kullanıcılarının gezinme menüsünde kaç liste öğesi (ve dolayısıyla bağlantı) olduğunu bilmesini sağlar.

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
  <ul role="list">
    <li>
      <a href="#skip">Skip to content link</a>
    </li>
    <li>
      <a href="#toc">Table of contents</a>
    </li>
    <li>
      <a href="#bc">Page breadcrumbs</a>
    </li>
    <li>
      <a href="#ln">Local navigation</a>
    </li>
    <li>
      <a href="#global">Global navigation</a>
    </li>
  </ul>
</nav>

Sekme sırasını değiştirmekten kaçının

İçindekiler tablosu, başlığın ardından, küçük ekranlarda veya sağa hizalanmış bir kenar çubuğunda gösterilebilir. Yalnızca birini göstermek için iki adet aynı gezinme grubu eklemek, anti-pattern olur.

1.254 pikselden geniş sayfalarda gezinmeyi kenar çubuğu olarak görüntülemek için CSS'yi kullandık.

Kullanıcılar, cihaz değiştirdiklerinde veya yazı tipi boyutlarını artırdıklarında içeriğin duyarlı olmasına ve konumunu değiştirmesine alışkın olsalar da bu durumda sekme sırasının değişmesini beklemezler. Sayfa düzenleri erişilebilir, tahmin edilebilir ve site genelinde tutarlı olmalıdır. Burada, içindekiler tablosunun konumu tahmin edilemez.

Sayfa içerik haritaları

İçerik haritaları, kullanıcıların web sitesinde nerede olduklarını anlamalarına yardımcı olmak için ikincil gezinme olanağı sunar. İçerik haritaları genellikle geçerli dokümanın URL hiyerarşisini ve geçerli sayfanın site yapısındaki konumunu belirtir.

Kullanıcı açısından site yapısı, sunucudaki dosya yapısından farklı olabilir ve bu normaldir. Kullanıcının dosyalarınızı nasıl düzenlediğinizi bilmesi gerekmez ancak içeriğinizde gezinebilmesi gerekir.

Site haritası, kullanıcılara sitenizin organizasyonu hakkında bilgi verir. Bu, kullanıcıların back işlevini kullanarak önceden ziyaret edilen her sayfaya geri dönmek zorunda kalmadan tüm üst öğelere gitmesine yardımcı olur.

Sitenin hiyerarşik bir dizin yapısı varsa (web.dev'de olduğu gibi) içerik haritası gezinme menüsü genellikle ana sayfanın veya ana makine adının yanı sıra URL yolundaki her dizinin dizin dosyasının bağlantısını içerir. Mevcut sayfayı dahil etmek isteğe bağlıdır ve biraz daha dikkatli olmayı gerektirir.

const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"

İçerik haritasının bölümleri, geçerli sayfadan ana sayfaya giden yolu ve aradaki her seviyeyi gösterir.

Her HTML Öğrenin modülü sayfasında, web.dev'nin Learn bölümündeki HTML derslerinin hiyerarşisini gösteren aynı içerik haritası gezinme menüsü bulunur.

Kod aşağıdakine benzer olmalıdır:

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">web.dev</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">HTML</a>
    </li>
  </ol>
</nav>

Önemli nokta rolü olan <nav> öğesi, yardımcı teknolojiye içerik haritalarını sayfada bir gezinme öğesi olarak sunmasını bildirir. aria-label ile sağlanan "ekmek kırıntıları" erişilebilir adı, bu gezinme menüsünü aynı belgedeki diğer gezinme yerlerinden ayırır.

Her bağlantının arasında bir içerik ayırıcı bulunur. Bu ayırıcılar, ikinciden başlayarak her liste öğesinden önce gösterilmek üzere CSS ile oluşturulabilir.

[aria-label^="breadcrumbs" i] li + li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  opacity: .8
}

Ekran okuyucular bu simgeleri "görmez". Bu da en iyi uygulama olarak kabul edilir. Sayfa yolu bağlantıları arasındaki ayırıcılar ekran okuyuculardan gizlenmelidir. Ayrıca, sayfadaki diğer metin ve görsel öğelerle aynı şekilde arka planla yeterli kontrasta sahip olmalıdır.

Örnek kodumuz sıralı bir liste kullanır. Bu liste, öğeler numaralandırıldığından sıralanmamış bir liste yerine tercih edilir. Bazı CSS görüntülü reklam özelliği değerleri bazı öğelerin anlamını kaldırdığı için role="list" eklendi.

Genellikle, içerik haritasındaki ana sayfa bağlantısı, site adı veya site logosu yerine "ana sayfa" olarak görünmelidir. Sayfa yolu belgenin en üstünde olduğu için bu anti-pattern'in kullanılması mantıklı.

Mevcut sayfa ("Gezinme") içerik haritasına dahil edilmemiştir.

Geçerli sayfa

Geçerli sayfa bir içerik haritasına dahil edildiğinde metin tercihen bağlantı olmamalı ve geçerli sayfanın liste öğesine aria-current="page" eklenmelidir. Bu bilgi dahil edilmemişse bir simge veya başka bir sembol kullanarak takip eden başlığın geçerli sayfa olduğunu belirtmeniz faydalı olur.

Şimdi, içerik haritasının bu uygulamayı alan alternatif bir sürümüne bakalım:

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
    <li aria-current="page">
      Navigation
    </li>
  </ol>
</nav>

Ekmek kırıntıları, kullanıcının mevcut sayfaya ulaşmak için izlediği doğrusal adımlarla aynı olmayabilir. Bu noktaya kadar izlenen adımların listesi, <nav> içine yerleştirilebilir ancak içerik haritası olarak etiketlenmemelidir.

Yerel navigasyon

Bir sonraki gezinme bileşeni, orta ve daha büyük boyutlu cihazların çoğunda sol kenar çubuğunda gösterilir. Bu bileşende bir filtre çubuğu ve HTML'yi Öğrenme'deki bölümlerin her birinin bağlantıları bulunur. Bu bağlantılar ve filtre çubuğu, konuma ilişkin gezinme öğeleridir.

Bu siteyi mobil cihazda ziyaret ediyorsanız veya daha dar bir ekranınız varsa bu sayfayı yüklediğinizde kenar çubuğu gizlenir. Üst gezinme menüsündeki menu simgesinden bu sayfaya erişebilirsiniz.

Geniş ekranlardaki kalıcı yerel gezinme ile dar ekranlardaki yerel gezinme arasındaki temel fark, birincil üst gezinmeye geri götüren ve ardından gezinmeyi kapatan oktur.

Bu dokümanın bağlantısı, yerel gezinme menüsündeki diğer bağlantılarla aynı görünür. Ancak, görme engelli kullanıcılara bunun mevcut sayfa olduğunu belirtmek için diğer bağlantılardan biraz farklı görünebilir. Bu görsel farklılık CSS ile oluşturulmalıdır.

Geçerli sayfa, aria-current="page" özelliğiyle de tanımlanabilir. Bu, yardımcı teknolojilere bağlantıların geçerli sayfaya ait olduğunu bildirir.

İdeal olarak, yerel gezinmedeki bu liste öğesinin HTML'si aşağıdaki gibi olmalıdır:

<li>
  <a aria-current="page" aria-selected="true" href="/learn/html/navigation">
    Navigation
  </a>
</li>

Genel gezinme

Global gezinme, web sitesinin üst düzey sayfalarına yönlendirir ve sitenin her sayfasında aynıdır. Bir sitenin genel gezinme menüsü, sitenin tüm alt bölümlerine veya diğer menülere bağlantı veren iç içe yerleştirilmiş bağlantı listelerini açan sekmelerden de oluşabilir. Başlıklı bölümler, düğmeler ve arama widget'ları içerebilir. Bu ek özellikler zorunlu değildir. Gerekli olan, gezinme işleminin her sayfada görünmesi ve her sayfada aynı olmasıdır. Tabii ki geçerli sayfaya giden tüm bağlantılarda aria-current="page" yer alır.

Küresel gezinme, uygulamada veya web sitesinde istediğiniz yere istikrarlı bir şekilde seyahat edebilmenizi sağlar. Google'ın web sitesinin sayfalarının üst kısmında global gezinme menüsü yok. Yahoo! Tüm ana Yahoo! mülklerinin farklı stilleri olsa da çoğu bölümün içeriği aynıdır.

Haberler ve spor genel gezinme başlıklarının içeriği aynı. Ancak kullanıcının spor sayfasında olduğunu gösteren simge, mükemmel görüşe sahip ziyaretçiler için bile erişilebilir olacak kadar kontrasta sahip değil. Her iki bölümde de, bölümün altında bölüme özel yerel gezinme menüsü bulunan bir genel gezinme menüsü bulunur.

Global gezinmeye benzer şekilde, altbilgiler tüm sayfalarda aynı olmalıdır. Ancak benzerlik sadece bu kadardır. Global gezinme, sitenin tüm bölümlerine ürün açısından gezinmenize olanak tanır. Altbilgideki gezinme öğelerinin belirli koşulları yoktur.

Genellikle altbilgi, yasal beyanlar, şirket hakkında, kariyer sayfası gibi kurumsal bağlantılar ve sosyal medya gibi alakalı harici kaynakların bağlantılarını içerir.

Bu sayfanın altbilgisinde iki gezinme öğesi grubu bulunur: Üç sütunlu, ilgili web.dev gezinme grubu ve ayrı bir Google hükümler ve gizlilik gezinme grubu. Altbilgi gezinme menüsünde web.dev'e nasıl katkıda bulunacağınız, web.dev ekibi tarafından sağlanan ilgili içerikler ve harici sosyal medya bağlantıları yer alır.

Bir sonraki adımda, veri tablolarını işaretlemeye bakacağız.

Öğrendiklerinizi test etme

Gezinme hakkındaki bilginizi test edin.