Navigasyon

Bağlantılar bölümünde öğrendiğiniz gibi href özelliğine sahip <a> öğesi, kullanıcıların tıklayarak veya dokunun. Listeler'de, içerik listelerinin nasıl oluşturulacağını öğrendiniz. Bu bölümde, Sauce & Spoon projesinin bağlantıları bir araya getirerek gezinmeyi sağlar.

Birkaç gezinme türü ve bunları görüntülemenin çeşitli yolları vardır. Metin içinde diğer sayfalara bağlantı veren adlandırılmış bağlantılar Aynı web sitesi, yerel gezinme olarak kabul edilir. Hiyerarşisini gösteren bir dizi bağlantıdan oluşan yerel gezinme sitenin yapısıyla ilişkili olarak geçerli sayfaya veya kullanıcının geçerli sayfaya ulaşmak için takip ettiği sayfalara içerik haritası denir. Bir sayfanın içindekiler tablosu başka bir yerel gezinme türüdür. Bir sitedeki her bir sayfaya ait hiyerarşik bağlantıları içeren sayfaya olabilir. Web sitesinin her sayfada bulunan en üst düzey sayfalarına giden gezinme bölümüne genel gezinme adı verilir. Genel gezinme; gezinme çubukları, açılır menüler ve beliren menüler gibi birkaç farklı şekilde görüntülenebilir. Aynı site, görüntü alanı boyutuna bağlı olarak genel gezinmeyi farklı şekilde gösterebilir.

Kullanıcıların sitenizdeki en az tıklama sayısına sahip herhangi bir sayfaya gidebildiğinden emin olun ve sitenizde gezinmeyi olması kolay ve zorlayıcı değil. Bununla birlikte, gezinme öğeleriyle ilgili özel bir koşul yoktur. MachineLearningWorkshop.com Tek sayfalık bir web sitesi olduğundan, sağ üstte yerel gezinme çubuğu bulunmalıdır; Çok sayfalı siteler genellikle buralarda gezinmeye başlar.

Bu sayfayı web.dev'de görüntülüyorsanız birkaç gezinme özelliği dikkatinizi çekebilir. Başlığın üzerinde bir içerik haritası var. "bu sayfada" ve "HTML Öğrenin" ifadesini içeren bir metin ekleyin. ekranınızın genişliğine bağlı olarak, her zaman görüntülenir ya da bir menü düğmesi tıklanarak görünür hale getirilir. Sayfadaki ilk öğe #main öğesi için gizli bir bağlantıdır. Bu bağlantı, hem kenar çubuğu hem de içerik haritası bağlantılarını atlamanıza olanak tanır.

"İçeriğe git" bağla

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

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

Bu, tıklandığında veya odaklanıldığında ve kullanıcı Enter tuşuna bastığında sayfayı kaydırır ve odağı ana içeriğe verir: id/main bulunan bir önemli nokta <main>:

<main id="main">

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

Kullanılabilirliği ve erişilebilirliği artırmak için kullanıcıların her sayfada tekrarlanan içerik bloklarını atlamalarına olanak tanımak önemlidir. Atlama bağlantısı, klavye kullanıcısı yükleme sırasında tab tuşuna bastığında sitenin ana içeriğine hızlı bir şekilde atlayabilmesi için eklenir. ve kapsamlı bağlantılardan geçmek zorunda kalmayı düşünebilir. Bu sayfadaki atla bağlantısı, bölüm genelinde kenar çubuğu gezinmesini ve içerik haritası gezinmesini atlar. kullanıcıyı doğrudan sayfa başlığına götürebilir.

Çoğu tasarımcı, sayfanın üst kısmında bağlantı bulunmasından hoşlanmaz. Hatırlarken bağlantıyı görünümden gizleyebilirsiniz Böylece, bağlantı odaklanıldığında (klavye kullanıcısı sayfadaki bağlantıyı tıkladığında bu gerçekleşir) bağlantının tüm kullanıcılar tarafından görülebilmesi gerekir. .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 büyük olasılıkla "ana" anlamına gelir. Tüm bağlantı metinlerinde olduğu gibi, erişilebilir ad, bağlantının kullanıcıyı nereye götürdüğünü açıkça belirtmelidir. Bağlantı hedefi ana içeriği. Bunu test etmek için, sayfa yüklendiğinde sekme tuşuna basarak "Ana sayfaya atla" bağlantısını tıklayın. Ardından, "atladığından" emin olmak için Enter düğmesine basın ana içeriğe dönüştürmenizi sağlar.

İçindekiler

İçeriğe atla 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 tanıtım kısa açıklaması gelir. Bu açıklama, videonun içeriğine ilişkin kısa bir açıklamadır. eğiticidir. İçindekiler gezinme bölmesinin, kod tabanındaki başlıktan önce mi yoksa sonra mı geleceği, tarayıcınızın genişliğine bağlıdır.

ziyaret edin.

Tarayıcınız 80em'den genişse İçindekiler tablosu, işaretlemede başlıktan önce gelir ve aşağıdakine benzerdir (işaretlemeyi basitleştirmek için sınıf adları 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 otomatik olarak bilgi verir bir bölümün önemli bir rol olan navigation rolüne sahip olduğunu belirtmek isteriz.

aria-label özelliği dahil gezinme amacının kısa bir açıklamasını sağlar. Bu durumda, metin varsa, aria-labelledby kullanılması tercih edilir. görünen metinlere referansta bulunmak için kullanılır.

Anlamsal olmayan <div> öğesini bir paragraf (<p>) ile değiştirip ardından referansta bulunulabilmesi için bir id ekleyebiliriz. Daha sonra aria-labelledby kullanılır:

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

Gereksiz fazlalıkları azaltmanın yanı sıra görünür metinler çeviri hizmetleri tarafından çevrilir. Öznitelik değerleri ise çevrilmeyebilir. Mümkünse, yeterli etiket sağlayan bir metin varsa özellik metni yerine bunu tercih edin.

Bu gezinme bölümü, içindekiler tablosudur. aria-label kullanmak istiyorsanız görünen 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 ad sağlarken öğenin adını belirtmeyin. Ekran okuyucular bu bilgileri kullanıcıya sağlar. Örneğin, <nav> öğesini kullanırken "navigation" (gezinme) kelimesini dahil etmeyin; bu bilgilerin hangi anlamlara dahil edileceğine de değineceğiz.

Bağlantıların kendisi sıralanmamış bir listede yer alır. Bir liste içine yerleştirilmeleri gerekmese de, bir liste kullanmak ekran okuyucu kullanıcılarının kaç tane öğe olduğunu bilmesini sağlar. liste öğeleri ve dolayısıyla bağlantılar gezinmedeki ayrı bir listedir.

<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 em'den az genişliğe sahipse "Bu sayfada" başlık ve kısa açıklamanın altında görünür. Bu, bir medya sorgusuna göre CSS display: none; kullanarak birini gizlemek için iki içindekiler tablosu gezinme bileşenini içerir.

Birbirinin aynısı olan iki widget'ın yalnızca birini gösterecek şekilde eklenmesi, kalıp dışıdır. Fazladan baytlar göz ardı edilemez. HTML içeriği gizleniyor: tüm kullanıcıları için display: none kullanmanızı öneririz. Sorun, geniş ekranlarda içindekiler bölümünün #main öncesinden gelmesidir; İçindekiler bölümü ise daha dar ekranlarda #main öğesi içine yerleştirilmiştir. Klavyeyi kullanarak içeriğe atlama tablosu, bir ekran görüntüsüdür. Kullanıcılar cihaz veya cihaz değiştirdiklerinde içeriğin duyarlı olmasına ve konum değişikliğine alışkındır. yazı tipi boyutunu büyüttüklerinde, sekme sırasının değişmesini beklemiyorlar. Sayfa düzenleri erişilebilir, öngörülebilir, erişilebilir tutarlı olmasını sağlar. 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ğı sağlar. Genellikle URL hiyerarşisini gösterirler. ve geçerli sayfanın site yapısındaki konumuna bağlıdır. Site yapısı, kullanıcının bakış açısından farklılık gösterebilir. sunucudaki dosya yapısından kaldırın. Sorun değil. Kullanıcının dosyalarınızı nasıl düzenleyeceğinizi bilmesi gerekmez, ancak dosyalarınızı nasıl düzenleyeceğinizi kullanabilirsiniz.

İçerik haritaları, kullanıcıların sitenizde gezinmesine ve sitenizin düzenini anlamasına yardımcı olarak, herhangi bir üst öğeye kadar herhangi bir yerde hızla gezinmelerine olanak tanır. Bölümleri, back işlevini kullanarak mevcut sayfaya almak için ziyaret edilen her bir sayfa içinde geriye gitmek zorunda kalmadan.

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 yönlendiren bir bağlantı içerir. Ayrıca, URL'nin yol adındaki her bir dizine ait dizin dosyasının bağlantısı yer alır. YouTube'da Geçerli sayfa isteğe bağlıdır ve biraz daha dikkat 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 dönüş yolunu göstererek aradaki her bir düzeyi gösterir.

Her HTML Öğrenme modülü sayfasında aynı içerik haritası gezinmesi bulunur veHTML web.dev öğesinin learn bölümü. Kod, aşağıdakine benzerdir ancak sınıflar ve SVG ayrıntıları daha net olması 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 uygun. Önemli nokta rolü olan <nav> öğesini kullandığı için yardımcı teknoloji, içerik haritalarını sayfada bir gezinme öğesi olarak sunar. aria-label ile birlikte sağlanan erişilebilir "içerik haritaları"nın erişilebilir adı, mevcut dokümandaki diğer gezinme önemli noktalarından farklıdı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 "görmez" Bu en iyi uygulamadır: İçerik haritası bağlantıları arasındaki ayırıcılar, ekran okuyuculardan gizlenmelidir. Ayrıca arka plan üzerinde, normal metinde olduğu gibi yeterli kontrasta sahip olmalıdır.

Bu sürüm, sıralanmamış bir liste ve liste öğeleri kullanıyor. Sıralı liste öğeleri numaralandırıldığından, sıralı liste tercih edilir. Ayrıca bir listedir: Bazı CSS görüntülü reklam özelliği değerleri bazı öğelerdeki anlamı kaldırdığı için role="list" tekrar eklendi.

Genellikle, içerik haritasındaki ana sayfa bağlantısı "ana sayfa" şeklinde olmalıdır yerine, sitenin adını içeren bir site etiketi ekler. İçerik haritası belgenin üst kısmında olduğundan ve logonun sayfada tek geçtiği yer olduğu için neden kullanıldığına bakalım.

Son öğe, özel bir <share-action> öğesidir. Özel öğeler 15. bölümde açıklanmaktadır. Bu özel öğe içerik haritasına dahil olmaması (<nav> içinde alakasız bir öğenin yer alması), dahil etme işleminin tüm sayfalarda tutarlı olduğu sürece sorun yaratmaz.

Geçerli sayfa

Bu sayfada, geçerli sayfa olan "Gezinme", içerik haritasına dahil değildir. Geçerli sayfa içerik haritası, tercihen metin bağlantı olmamalıdır ve aria-current="page", geçerli sayfanın liste öğesine dokunun. Dahil edilmediğinde, sonraki başlığın veya başka bir simge olabilir.

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ımlar için değildir. Örneğin, kullanıcının geçerli sayfaya gitmek için izlediği yolun veya bir yemek tarifinde bu noktaya kadar izlenen adımların listesi bir <nav> içine yerleştirilebilir, ancak içerik haritası olarak etiketlenmemelidir.

Yerel navigasyon

Bu sayfada başka bir gezinme bileşeni var. Geniş bir ekran kullanıyorsanız, sol tarafta "HTML hakkında bilgi edinin" logosu, bir arama çubuğu ve HTML Öğrenin'deki 20 bölümün her birine yönlendiren bağlantılar içerir. Her bağlantıda bölüm numarası, bölüm başlığı ve daha önce ziyaret etmiş olduğunuz bölümlerin sağ tarafında bir onay işareti bulunur. Bu bölüm, siteden ayrılıp geri döndüyseniz muhtemelen bu bölümdür. HTML Öğrenin'deki tüm bölümlerin bağlantıları, arama ve yerel başlığıyla birlikte konum gezinme bölümüdür.

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

Geniş ekranlarda kalıcı yerel gezinme ile daha dar ekranda görünmeyen ve kaybolacak şekilde kaybolan ekranlardaki yerel gezinme arasındaki temel fark, gizlenebilen sürümde kapat düğmesinin gösterilmesidir. Bu simge, display: none; içeren geniş ekranlarda gizlenir.

Bu belgenin bağlantısı olan bölüm 010, gören kullanıcılara bunun geçerli sayfa olduğunu belirtmek için yerel gezinme bölmesinde yer alan diğer bağlantılardan biraz farklı bir görünüme sahiptir. Bu görsel farklılık CSS ile oluşturulur. Geçerli sayfa, aria-current="page" özelliğiyle de tanımlanır. Bu, yardımcı teknolojilere mevcut sayfanın bir bağlantısı olduğunu bildirir. Bu yerel gezinme bölümünde 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 ayarlanır ve onay işareti gösterilir. Onay işareti eklenir içerir ancak CSS, mevcut olmaması nedeniyle display: none ile bu sayfayı daha önce ziyaret etmemiş olan kullanıcılardan onay kutusunu gizler data-complete="true" özelliği ve değeri:

.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> öğesinde alt özelliği olarak işlev görür.

Genel gezinme

Genel gezinme, web sitesinin her sayfasında aynı olan en üst düzey sayfalara giden gezinme bölümüdür. Bir sitenin genel gezinmesi, bir sitenin veya diğer menülerin tüm alt bölümlerine bağlantı veren iç içe yerleştirilmiş bağlantı listelerini açan sekmelerden de oluşabilir. Bunlar, başlıklı bölümler, düğmeler ve arama widget'ları içerebilir. Bu ek özellikler gerekli değildir. Gerekli olan şey, Gezinme her sayfada görünür ve her sayfada aynıdır; Elbette, geçerli sayfanın tüm bağlantılarında aria-current="page" ile.

Küresel gezinme, uygulamada veya web sitesinde her yere seyahat etmek için tutarlı bir yol sağlar. Google'ın üst kısmında yer alır. Yahoo! yapıyor. Tüm temel Yahoo! özellikleri farklı stillere sahipse çoğu bölüm aynıdır.

Haberlerin ve spor genel gezinme başlıklarının içeriği aynı ancak kullanıcının o anda geçerli olduğunu gösteren simge YouTube'da erişilebilir olmak için yeterli kontrast yok. kullanıcılar için çok daha iyi bir araç olabilir. Her iki bölümde de global altında bölüme özgü yerel gezinme paneli gösterilir.

Genel gezinmelere benzer şekilde, altbilgiler tüm sayfalarda aynı olmalıdır. Ama tek benzerlik bu. Genel gezinme bir ürün bakış açısıyla sitenin tüm bölümlerine gidilmesini sağlar. Bir altbilgideki gezinme öğelerinin belirli gereksinimleri yoktur. Genellikle altbilgide şirketle veya kariyerle ilgili yasal beyanlar gibi kurumsal bağlantılar bulunur ve kaynakları (ör. sosyal medya simgeleri) kullanabilirsiniz.

Bu sayfanın altbilgisi üç ek <nav> öğesi içeriyor: altbilgi gezinme bölümü, Google geliştiricileri, şartlar ve politikalar, Her biri bir bağlantı. Altbilgi gezinme menüsü, GitHub'da web.dev'e nasıl katkıda bulunacağınızı, web.dev dışındaki Google ve harici "nasıl bağlanılır" bağlantılarını kullanın.

<footer> içindeki bu üç gezinme bölümü, aria-labelbu önemli nokta rolleri için erişilebilir bir ad sağlayan <nav> öğeleridir. Gördüğümüz tüm gezinme işlemleri, bir gezinme bölümündeki listelere iç içe yerleştirilmiş bağlantılar olmuştur. Kendi navigasyonlarınızı oluşturmak için bilmeniz gereken her şeyi ele aldık. Sırada, veri tablolarını işaretlemeye bakacağız.

Öğrendiklerinizi sınayın

Navigasyon bilginizi test edin.