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 bölümünde içerik listeleri oluşturmayı öğrendiniz. Bu bölümde, gezinme oluşturmak için bağlantı listelerini nasıl gruplandıracağınızı öğreneceksiniz.

Birkaç gezinme türü ve bunları görüntülemenin birkaç yolu vardır. Metin içinde yer alan ve aynı web sitesindeki diğer sayfalara bağlantı veren adlandırılmış bağlantılar, yerel gezinme olarak kabul edilir. Mevcut sayfanın hiyerarşisini sitenin yapısına göre görüntüleyen bir dizi bağlantıdan veya kullanıcının geçerli sayfaya gitmek için takip ettiği sayfalara oluşan yerel gezinmeye içerik haritası denir. Bir sayfadaki içindekiler tablosu, başka bir yerel gezinme türüdür. Bir sitedeki her bir sayfaya hiyerarşik bağlantılar içeren bir sayfaya site haritası denir. Web sitesinin her sayfada bulunan en üst düzey sayfalarına götüren gezinme bölümüne genel gezinme adı verilir. Genel gezinme, gezinme çubukları, açılır menüler ve açılır menüler dahil olmak üzere birkaç farklı şekilde görüntülenebilir. Aynı site, görüntü alanı boyutuna bağlı olarak genel gezinmesini farklı şekilde görüntüleyebilir.

Her zaman kullanıcıların sitenizdeki herhangi bir sayfaya en az tıklamayla gidebildiğinden emin olun ve aynı zamanda gezinmenin sezgisel olduğundan ve izleyicileri bunaltmadığından 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öşesinde yerel bir gezinme çubuğu bulunur. Burada, çok sayfalı siteler genellikle global gezinme öğelerini buraya yerleştirir.

Bu sayfayı web.dev'de görüntülüyorsanız bazı gezinme özelliklerini fark edebilirsiniz. Başlığın üzerinde bir içerik haritası, başlıktan sonra "bu sayfadaki" içindekiler tablosu ve ekranınızın genişliğine bağlı olarak her zaman görüntülenen veya bir menü düğmesi tıklandığında görünen "HTML Öğren" içindekiler tablosu bulunur. Sayfadaki ilk öğe, kenar çubuğu ile sayfa işareti bağlantılarını atlamanıza olanak tanıyan gizli bir #main bağlantısıdır.

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

Sayfadaki ilk öğe, dahili bir bağlantıdır:

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

Bu sayfa tıklandığında veya odaklanıldığında ve kullanıcı Enter seçeneğine geldiğinde sayfayı kaydırır ve odak ana içeriğe odaklanır: id değerini main olarak gösteren yer işareti <main>:

<main id="main">

Önceki bölümlerin tümünü okumuş olsanız bile bu bağlantıyı sitede hiç görmemiş olabilirsiniz. Yalnızca odaklanıldığında gösterilir:

Kullanılabilirliği ve erişilebilirliği iyileştirmek için kullanıcıların her sayfada tekrarlanan içerik bloklarını atlamasına izin vermek önemlidir. Bir klavye kullanıcısı yükleme sırasında tab tuşuna bastığında, kapsamlı bağlantılar arasında geçiş yapmak zorunda kalmadan hızlı bir şekilde sitenin ana içeriğine geçebilmesi için atlama bağlantısı eklenir. Bu sayfadaki atla bağlantısı, bölüm genelindeki kenar çubuğu gezinmesini ve içerik haritası gezinmesini atlayarak kullanıcıyı doğrudan sayfa başlığına götürür.

Çoğu tasarımcı, sayfanın üst kısmında bir bağlantının bulunmasından hoşlanmaz. Bir klavye kullanıcısı sayfadaki bağlantıyı tıklayarak sekmeye geldiğinde bağlantının tüm kullanıcılar tarafından görülebilmesi gerektiğini unutmayın. Bağlantıya odaklanıldığında, bağlantının görünümden gizlenmesinde bir sakınca yoktur. .visually-hidden:not(:focus):not(:active) benzeri bir seçici kullanarak yalnızca odaklanmamış ve etkin olmayan durumdaki içerikleri gizleyin.

Bağlantı metni "ana sayfaya atla" şeklindedir. Bu, bağlantının erişilebilir adıdır. Bu teknik bir sitedir ve kullanıcılar muhtemelen "ana" kelimesinin ne anlama geldiğini bilir. Tüm bağlantı metinlerinde olduğu gibi erişilebilir 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. Bunu test etmek için, sayfa yüklendiğinde "Ana sayfaya atla" bağlantısına gidin. Ardından, ana içeriğe "atlandığından" emin olmak için Enter düğmesine basın.

İçindekiler

İçeriğe git bağlantısı, ana içeriği görünüme kaydırır. İlk öğe, bu bölümün başlığını içeren <h1> başlığıdır. Bu durumda, <h1>Marking up navigation</h1>. Ana başlığın ardından bu eğiticinin içeriğinin kısa bir açıklaması olan kısa açıklama gelir. İçindekiler bölümünde gezinmenin, kod tabanındaki başlıktan önce mi yoksa sonra mı geldiği, tarayıcınızın genişliğine bağlıdır.

Dar ekranlarda, içindekiler tablosu, gezinme görünürlüğünü etkinleştiren bu sayfadaki bir düğmenin arkasına gizlenir.

Geniş ekranlarda, içindekiler tablosu her zaman görünür ve geçerli bölümün bağlantısı mavi renkle vurgulanır.

Tarayıcınız 80em'den genişse İçindekiler tablosu, işaretlemedeki başlıktan önce gelir ve aşağıdakine benzer (sınıf adları, işaretlemeyi basitleştirmek için kaldırılmıştır):

<nav aria-label="On this page">
  <div>On this page</div>
  <div>
    <ul>
      <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>
  </div>
</nav>

<nav>, gezinme bölümleri için kullanılacak en iyi öğedir: Ekran okuyucuya ve arama motoruna bir bölümün önemli bir rol olan navigation rolüne sahip olduğunu otomatik olarak bildirir.

aria-label özelliği eklendiğinde gezinmenin amacı hakkında kısa bir açıklama sağlanır. Bu durumda, özelliğin değeri sayfada görünen metinle gereksiz olduğundan, görünür metne referans vermek için aria-labelledby değerinin kullanılması tercih edilir.

Anlamsal olmayan <div> öğesini bir paragraf <p> ile değiştirebilir ve ardından referans verilebilmesi için bir id ekleyebiliriz. Daha sonra aria-labelledby kullanırız:

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

Fazlalıkların azaltılmasına ek olarak, görünür metinler çeviri hizmetleri tarafından çevrilir ancak özellik değerleri çevrilemeyebilir. Mümkün olduğunda, yeterli etiket sağlayan bir metin varsa bunu özellik metnine tercih edin.

Bu gezinme menüsü, içindekiler bölümüdür. aria-label kullanmak istiyorsanız görünür metni tekrarlamak yerine bu bilgiyi sağlayın:

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

Bir öğe için erişilebilir bir ad sağlarken öğenin adını eklemeyin. Ekran okuyucular bu bilgileri kullanıcıya sağlar. Örneğin, <nav> öğesini kullanırken "gezinme" özelliğini eklemeyin. Bu bilgiler, anlamsal öğeler kullanılırken dahil edilir.

Bağlantıların kendisi sıralanmamış bir listededir. Bunların bir listede iç içe yerleştirilmesine gerek olmasa da, liste kullanmak ekran okuyucu kullanıcılarının, kaç liste öğesinin, dolayısıyla bağlantıların bir gezinme sırasında ayrı bir liste 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>

Tarayıcınız 80 emn'den kısaysa "Bu sayfada" widget'ı başlığın ve kısa açıklamanın altındadır. Bunun için, iki içindekiler tablosu gezinme bileşeni eklenebilir ve bir medya sorgusuna göre CSS display: none; ile birini gizlenebilir.

Yalnızca birini göstermek için birbirinin aynı iki widget'ın eklenmesi, desen karşıtıdır. Fazladan baytlar göz ardı edilebilir. CSS display: none kullanarak HTML içeriğinin tüm kullanıcılardan gizlenmesi uygundur. Sorun, içindekiler tablosunun geniş ekranlarda #main öğesinden önce gelmesidir; daha dar ekranlarda ise içindekiler tablosu #main içine yerleştirilir. İçeriğe gitmek için klavye kullanıldığında, geniş ekranda içindekiler tablosu atlanır. Kullanıcılar cihaz değiştirdiklerinde veya yazı tipi boyutlarını büyüttüklerinde içeriğin duyarlı olmaya ve yer değiştirmeye alışkın olmasına rağmen, bu işlem sırasında sekme sırasının değişmesini beklemezler. Sayfa düzenleri tüm sitede erişilebilir, tahmin edilebilir ve tutarlı olmalıdır. Burada, içindekiler tablosunun konumu öngörülemez.

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ğı sağlar. Bunlar genellikle mevcut belgenin URL hiyerarşisini ve geçerli sayfanın site yapısındaki konumunu gösterir. Kullanıcı açısından site yapısı, sunucudaki dosya yapısından farklı olabilir. Sorun değil. Kullanıcının dosyalarınızı nasıl düzenlediğinizi bilmesi gerekmez, ancak içeriğinizde gezinebilmesi gerekir.

İçerik haritaları, kullanıcıların sitenizin düzenini tanımasına ve gezinmesine yardımcı olur. Böylece, back işlevini kullanarak geçerli sayfaya ulaşmak için, önceki ziyaret edilen her sayfada geri gitmek zorunda kalmadan, herhangi bir üst öğe bölümüne kadar herhangi bir yerde hızlı bir şekilde gezinebilirler.

Site, web.dev'de olduğu gibi basit bir hiyerarşik dizin yapısına sahipse, içerik haritası gezinmesi genellikle ana sayfaya veya ana makine adına bir bağlantıdan ve URL'nin yol adındaki her bir dizinin dizin dosyasının bir bağlantısından oluşur. Geçerli sayfanın eklenmesi isteğe bağlıdır ve biraz daha dikkat edilmesini 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 kadar olan yolu, aradaki her bir düzeyi gösterir.

Tüm HTML Öğrenme modül sayfalarında aynı içerik haritası gezinmesi bulunur. Bu gezinme öğeleri, web.dev adresinin learn bölümündeki HTML derslerinin hiyerarşisini gösterir. Kod aşağıdakine benzer, ancak sınıflar ve SVG ayrıntıları netlik sağlamak için kaldırılmıştır:

<nav aria-label="breadcrumbs">
  <ul role="list">
    <li>
      <a href="/">
        <svg aria-label="web.dev" role="img">
          <use href="#webDevLogo" />
        </svg>
      </a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
  </ul>
  <share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
    <svg aria-label="share" role="img">
      <use href="#shareIcon" />
    </svg>
    <span>Share</span>
  </share-action>
</nav>

Bu içerik haritası en iyi uygulamalara uygundur. Bu öğe, önemli bir rol olan <nav> öğesini kullandığından yardımcı teknoloji, sayfa işaretlerini sayfada gezinme öğesi olarak sunar. aria-label ile sağlanan erişilebilir "içerik haritaları" adı, bu öğeleri geçerli dokümanda diğer gezinme yer işaretlerinden ayırır.

Bağlantılar arasında CSS tarafından oluşturulan içerik ayırıcıları bulunur. Ayırıcılar, ikinci <li> ile başlayan her liste öğesinden önce gelir.

[aria-label^="breadcrumb" 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 bunları "görmez". En iyi uygulama, içerik haritası bağlantıları arasındaki ayırıcıların ekran okuyuculardan gizlenmesidir. Ayrıca, normal metinde olduğu gibi arka planlarına karşı yeterli kontrasta sahip olmalıdır.

Bu sürümde, sıralanmamış bir liste ve liste öğeleri kullanılıyor. Sıralı liste öğeleri numaralandırıldığından sıralı liste tercih edilir. Bu aynı zamanda bir listedir: Bazı CSS görüntülü reklam özellik değerleri bazı öğelerdeki anlamı kaldırdığından role="list" tekrar eklenmiştir.

Genellikle, bir içerik haritasındaki ana sayfaya giden bağlantı, etiket olarak sitenin adını taşıyan site logosu yerine "ana sayfa" şeklinde olmalıdır. Ancak içerik haritası belgenin üst kısmında olduğu ve logonun sayfada geçtiği tek yer olduğu için bu karşıt kalıbın neden kullanıldığı anlaşılır.

Son öğe, özel bir <share-action> öğesidir. Özel öğeler 15. bölümde ele alınmıştır. Bu özel öğe, içerik haritasının parçası olmasa da, ekleme tüm sayfalarda tutarlı olduğu sürece <nav> içinde alakasız bir öğe eklenmesi herhangi bir soruna yol açmaz.

Geçerli sayfa

Bu sayfadaki geçerli sayfa ("Gezinme"), içerik haritasına dahil değildir. Geçerli sayfa bir içerik haritasına eklendiğinde, metin tercihen bağlantı olmamalıdır ve aria-current="page", geçerli sayfanın liste öğesine eklenmelidir. Dahil edilmediğinde, sonraki başlığın bir simge veya başka bir simge içeren geçerli sayfa olduğunu belirtmek faydalı olur.

Tasarım değişirse içerik haritasının alternatif bir sürümü kullanılabilir:

<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>

İçerik haritaları doğrusal adımlara yönelik değildir. Örneğin, kullanıcının geçerli sayfaya gitmek için izlediği yolun listesi veya bir yemek tarifinde bu noktaya kadar izlenen adımların listesi, <nav> içine yerleştirilebilir, ancak içerik haritası olarak etiketlenmemelidir.

Yerel navigasyon

Bu sayfada başka bir gezinme bileşeni daha var. Geniş bir ekrandaysanız sol tarafta "HTML Öğren" logosunun bulunduğu bir kenar çubuğu, bir arama çubuğu ve HTML Öğrenin bölümündeki 20 bölümün her birine bağlantılar yer alır. Her bağlantı; bölüm numarasını, bölüm başlığını ve daha önce ziyaret ettiğiniz bölümlerin sağ tarafında bir onay işaretini içerir. Bu simge, başka bir yere gittiyseniz ve geri döndüyseniz bu bölüm olabilir. HTML Öğrenin'deki tüm bölümlerin bağlantıları, arama ve yerel başlıkla birlikte, konum gezinme işlevidir.

Bu siteyi tabletten veya mobil cihazdan ziyaret ediyorsanız veya ekranı daha darsa bu sayfayı yüklediğinizde kenar çubuğu gizlenir. Üst gezinme çubuğundaki hamburger menüsünden bunu görünür hale getirebilirsiniz (evet, başlık role="navigation" ayarlanmış özel bir <web-header> öğesidir).

Geniş ekranlarda kalıcı yerel gezinme ile daha dar ekranlardaki yerel gezinmenin görünüp görünebilmesi arasındaki temel fark, gizlenebilecek sürümde kapat düğmesinin görüntülenmesidir. Bu simge, display: none; içeren geniş ekranlarda gizlenir.

Bu belgenin 010. bölümünün bağlantısı, gören kullanıcılara bunun geçerli sayfa olduğunu belirtmek için yerel gezinmedeki diğer bağlantılardan biraz daha farklı bir görünüme sahiptir. Bu görsel fark CSS ile oluşturulmuştur. Mevcut sayfa da aria-current="page" özelliğiyle tanımlanır. Bu, yardımcı teknolojilere geçerli sayfanın bir bağlantısı olduğunu bildirir. Bu yerel gezinme içinde bu liste öğesinin HTML'si şuna benzer:

<li>
  <a aria-current="page" href="/learn/html/navigation" data-complete="true">
    <span>010</span>
    <span>Navigation</span>
    <svg aria-label="Check" role="img">
      <use href="#checkmark" />
    </svg>
  </a>
</li>

Bu sayfayı ilk kez ziyaret etmiyorsanız onay işareti görünmez. Bu sayfayı geçmişte ziyaret ettiyseniz data-complete özel özelliği true olarak ayarlanmıştır ve onay işareti gösterilir. Her bağlantıya onay işareti eklenir ancak CSS, data-complete="true" özelliğinin ve değerinin olmamasına bağlı olarak display: none ile daha önce bu sayfayı ziyaret etmemiş olan kullanıcılardan onay kutusunu gizler:

.course .stack-nav a:not([data-complete="true"]) svg {
  display: none;
}

display, none dışında bir değere ayarlandığında role, yardımcı teknolojiye satır içi SVG'nin bir resim olduğunu bildirir ve aria-label, <img> üzerinde alt özelliği olarak çalışır.

Genel gezinme

Genel gezinme, web sitesinin her sayfasında aynı olan en üst düzey sayfalara yönlendiren gezinme bölümüdür. Bir sitenin genel gezinmesi, 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. Yapılması gereken, gezinmenin her sayfada görünmesi ve her sayfada aynı olması gerekir. Elbette geçerli sayfaya verilen tüm bağlantılarda aria-current="page" bulunmalıdır.

Küresel gezinme, uygulamada veya web sitesinde herhangi bir yere seyahat etmek için tutarlı bir yol sağlar. Google, sayfanın üst kısmında genel gezinme seçeneği bulunmaz. Yahoo! destekler. Tüm ana Yahoo! özelliklerinin stilleri farklı 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ıdır ancak kullanıcının şu anda sporda olduğunu gösteren simge, az gören ziyaretçiler için bile erişilebilir olması için yeterli kontrasta sahip değildir. Her iki bölümde de altlarında bölüme özgü yerel gezinme bulunan genel gezinme özelliği vardır.

Genel gezinmelerde olduğu gibi altbilgiler de tüm sayfalarda aynı olmalıdır. Ama tek benzerlik bu. Genel gezinme, ürün açısından sitenin tüm bölümlerine gezinmeyi sağlar. Bir altbilgi içindeki gezinme öğelerinin özel gereksinimleri yoktur. Genellikle altbilgi, yasal bildirimler gibi kurumsal bağlantıları içerir. Şirket ve kariyerler hakkında bilgi edinmek bu bağlantıları sosyal medya simgeleri gibi harici kaynaklara yönlendirebilir.

Bu sayfanın altbilgisinde üç ek <nav> öğesi bulunur: altbilgi gezinmesi, Google geliştiricileri ve her biri bir bağlantıdan oluşan şartlar ve politikalar. Altbilgi gezinmesinde, GitHub'da web.dev'e nasıl katkıda bulunulacağı, web.dev dışında Google tarafından sağlanan diğer eğitici içerikler ve harici "nasıl bağlanılır" bağlantıları yer alır.

<footer> içindeki bu üç gezinme, aria-label bu önemli nokta rolleri için erişilebilir bir ad sağlayan <nav> öğeleridir. Gördüğümüz tüm gezinmeler, bir gezinme içindeki listeler içine yerleştirilmiş bağlantılar oldu. Kendi gezinmelerinizi oluşturmak için bilmeniz gereken her şeyi burada bulabilirsiniz. Şimdi ise veri tablolarının biçimlendirilmesini ele alacağız.

Öğrendiklerinizi sınayın

Gezinme bilginizi test edin.

Bir sitenin ana gezinme bölümünü işaretlemek için hangi öğe kullanılır?

<navigation>

Tekrar deneyin.

<breadcrumb>

Tekrar deneyin.

<nav>

Doğru.

Bir sayfada birden çok gezinme öğesi olabilir mi?

Yanlış.

Tekrar deneyin.

Doğru.

Doğru.