Bağlantılar bölümünde öğrendiğiniz gibi, href özelliğiyle birlikte kullanılan <a> öğesi, kullanıcıların tıklayarak veya dokunarak takip edebileceği bağlantılar oluşturur. Listeler bölümünde içerik listeleri oluşturmayı öğrendiniz. Bu modülde, gezinme oluşturmak için bağlantı listelerini nasıl gruplandıracağınızı öğreneceksiniz.
Çeşitli gezinme türleri ve bunları görüntülemenin çeşitli yolları vardır. Metin içindeki, aynı web sitesindeki diğer sayfalara bağlantı veren adlandırılmış bağlantılar yerel gezinme olarak kabul edilir. Mevcut sayfanın site yapısıyla ilişkili hiyerarşisini veya kullanıcının mevcut sayfaya ulaşmak için takip ettiği sayfaları gösteren bir dizi bağlantıdan oluşan yerel gezinme, içerik haritası olarak adlandırılır.
Bir sayfanın içerik tablosu da başka bir yerel gezinme türüdür. Bir sitedeki her sayfaya hiyerarşik bağlantılar içeren sayfaya site haritası denir. Web sitesinin üst düzey sayfalarına yönlendiren ve muhtemelen her sayfada bulunan gezinme menüsüne global gezinme adı verilir. Genel gezinme, gezinme çubukları, açılır menüler ve kayan menüler gibi çeşitli şekillerde gösterilebilir. Aynı site, görüntü alanı boyutuna bağlı olarak genel gezinme bölümünü farklı şekilde gösterebilir.
Kullanıcıların sitenizdeki herhangi bir sayfaya en az sayıda tıklamayla gidebildiğinden emin olun. Ayrıca gezinmenin sezgisel ve karmaşık olmadığından da emin olun. Bununla birlikte, gezinme öğeleri için belirli şartlar yoktur. Tek sayfalık bir web sitesi olan MachineLearningWorkshop.com'un sağ üst kısmında yerel bir gezinme çubuğu var. Çok sayfalı siteler genellikle genel gezinme çubuklarını buraya yerleştirir.
"İçeriğe atla" bağlantısı
Bazı sitelerde, odaklanma sırasındaki ilk öğe olarak "içeriğe git" bağlantısı bulunur. Şuna benzer bir şey görebilirsiniz:
<a href="#main" class="skip-link button">Skip to main</a>
Tıklandığında veya odaklandığı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) atlamasına izin vermek önemlidir. Klavye kullanıcısı tab tuşuna bastığında atlama bağlantısı sayesinde sayfadaki yeni içeriğe hızlıca gidebilir. Bu sayede, kapsamlı bir menüde sekme tuşuna basarak ilerlemek zorunda kalmazlar.
Çoğu tasarımcı, sayfanın en üstünde böyle bir bağlantının görünümünü beğenmez. Bu bağlantıyı görünümden gizleyebilirsiniz. Ancak, bağlantı odaklandığında (klavye kullanıcısı sayfadaki bağlantıdan sekmeyle geçtiğinde) bağlantının kullanıcı tarafından görülebilir olması gerektiğini unutmayın.
Yalnızca .visually-hidden:not(:focus):not(:active) gibi bir seçici kullanarak odaklanılmamış 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ığın ardından bu eğitimin içeriğinin kısa bir açıklaması yer alır.
Daha küçük ekranlarda içindekiler tablosu, 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>'dır. Bir bölümün navigation rolüne, yani önemli bir role sahip olduğunu ekran okuyucuya ve arama motoruna otomatik olarak bildirir.
Geçişin amacının kısa bir açıklamasını yapmak için aria-label özelliğini ekleyin. Bu durumda, söz konusu özelliğin değeri "Bu sayfada" metniyle aynı olacağından gereksizdir. Görünür metne referans vermek için bunun yerine aria-labelledby kullanın.
id kullanarak şu şekilde görünebilir:
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
...
</nav>
Görünür metin, gereksizliği azaltmanın yanı sıra çeviri hizmetleri tarafından çevrilir. Ancak özellik değerleri çevrilmeyebilir. Mümkün olduğunda, yeterli bir etiket sağlayan metin varsa özellik metni kullanmak yerine bu metne başvurun.
"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 özellikli ad sağlamak için öğenin adını eklememelisiniz. Ekran okuyucular, öğenin adını kullanıcıya sağlar.
Örneğin, <nav> öğesini kullanırken "gezinme" kelimesini eklemeyin. Bu bilgi zaten anlamsal öğelerle birlikte verilir.
Geçiş öğelerinin bir listede iç içe yerleştirilmesi zorunlu olmasa da liste kullanmak, ekran okuyucu kullanıcılarının geçişte kaç liste öğesi ve dolayısıyla kaç 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ştirmeyin
İçindekiler tablosu, başlığın ardından, daha küçük ekranlarda veya sağa hizalanmış bir kenar çubuğunda görünebilir. Yalnızca birini göstermek için iki özdeş gezinme grubu eklemek, anti-pattern olur.
Gezinmeyi 1.254 pikselden daha geniş sayfalarda kenar çubuğu olarak göstermek için CSS kullandık.
Kullanıcılar, cihazlarını değiştirdiklerinde veya yazı tipi boyutunu artırdıklarında içeriğin duyarlı olmasını ve konumunun değişmesini bekler. Ancak bu durumda sekme sırasının değişmesini beklemezler. Sayfa düzenleri, bir site genelinde erişilebilir, tahmin edilebilir ve tutarlı olmalıdır. Burada, içindekiler tablosunun konumu tahmin edilemez.
Sayfa içerik haritaları
İçerik haritaları, kullanıcılara bir 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 gösterir.
Kullanıcı açısından site yapısı, sunucudaki dosya yapısından farklı olabilir. Bu durum sorun teşkil etmez. Kullanıcının dosyalarınızı nasıl düzenlediğinizi bilmesi gerekmez ancak içeriğinizde gezinebilmesi gerekir.
Ekmek kırıntıları, kullanıcılara sitenizin düzeni hakkında bilgi verir. Bu sayede kullanıcılar, back işlevini kullanarak daha önce ziyaret edilen her sayfaya geri dönmek zorunda kalmadan herhangi bir üst bölüme gidebilir.
web.dev'de olduğu gibi, sitenin hiyerarşik bir dizin yapısı varsa ekmek kırıntısı gezinme özelliği genellikle ana sayfaya veya ana makine adına giden bir bağlantı ve URL yolundaki her dizinin dizin dosyasına giden bir bağlantı içerir. Mevcut sayfayı dahil etmek isteğe bağlıdır ve biraz daha fazla 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 geri giden yolu gösterir ve aradaki her seviyeyi gösterir.
Her Learn HTML modül sayfasında aynı içerik haritası gezinme özelliği bulunur. Bu özellik, web.dev bölümündeki Learn bölümünde yer alan HTML derslerinin hiyerarşisini gösterir.
Kod aşağıdaki gibi 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>
Bir dönüm noktası rolü olan <nav> öğesi, yardımcı teknolojiye içerik haritalarını sayfada bir gezinme öğesi olarak sunmasını söyler.
aria-label ile sağlanan "breadcrumbs" öğesinin erişilebilir adı, bu gezinmeyi aynı belgedeki diğer gezinme işaretlerinden ayırır.
Her bağlantı arasında içerik ayırıcı bulunur. Bu ayırıcılar, ikinci öğeden 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, en iyi uygulamadır. İçerik haritası bağlantıları arasındaki ayırıcılar, ekran okuyuculardan gizlenmelidir. Ayrıca, sayfadaki diğer metin ve görsel öğeler gibi arka planlarıyla yeterli kontrast oluşturmalıdırlar.
Örnek kodumuzda, öğeler numaralandırıldığından sıralı liste kullanılıyor. Bu, sıralanmamış listeye göre daha iyi bir seçenektir. Bazı CSS görüntüleme özelliği değerleri, bazı öğelerdeki semantiği kaldırdığı için role="list" eklendi.
Genel olarak, içerik haritasındaki ana sayfa bağlantısı site adı veya site logosu yerine "ana sayfa" olarak okunmalıdır. İçerik haritası dokümanın en üstünde yer aldığından bu anti-pattern'in neden kullanıldığı anlaşılıyor.
Mevcut sayfa olan Navigation, ekmek kırıntısı gezinme yoluna dahil edilmez.
Geçerli sayfa
Mevcut sayfa bir ekmek kırıntısına dahil edildiğinde metin tercihen bağlantı olmamalıdır ve aria-current="page" mevcut sayfanın liste öğesine dahil edilmelidir. Başlık dahil edilmemişse, bir simge veya başka bir sembolle, sonraki başlığın mevcut sayfa olduğunu belirtmek faydalı olur.
Bu alıştırmayla ekmek kırıntısının alternatif bir sürümüne göz atın:
<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 uygulanan adımların listesi <nav> içine yerleştirilebilir ancak izleme yolu olarak etiketlenmemelidir.
Yerel gezinme
Bir sonraki gezinme bileşeni, çoğu orta ve daha büyük boyutlu cihazda sol kenar çubuğunda gösterilir. Bu bileşende, filtre çubuğu ve Learn HTML'deki her bölüme bağlantılar yer alır. Bu bağlantılar ve filtre çubuğu, konum navigasyonunu oluşturur.
Bu siteyi mobil cihazda ziyaret ederseniz veya ekranınız daha darsa bu sayfayı yüklediğinizde kenar çubuğu gizlenir. Üst gezinme çubuğundaki simgesini kullanarak erişebilirsiniz.
Geniş ekranlardaki kalıcı yerel gezinme ile daha dar ekranlardaki yerel gezinme arasındaki temel fark, önce birincil üst gezinmeye geri dönen, ardından gezinmeyi kapatan oktur.
Bu dokümanın bağlantısı, yerel gezinmedeki diğer bağlantılarla aynı görünüyor. Ancak, görme engelli kullanıcılara bunun geçerli sayfa olduğunu belirtmek için diğer bağlantılardan biraz farklı bir görünüme sahip olabilir. 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ının geçerli sayfaya yönlendirdiğini bildirir.
İdeal olarak, yerel gezinmedeki bu liste öğesinin HTML'si aşağıdaki gibi görünür:
<li>
<a aria-current="page" aria-selected="true" href="/learn/html/navigation">
Navigation
</a>
</li>
Genel gezinme
Genel gezinme, web sitesinin üst düzey sayfalarına yönlendirir ve sitenin her sayfasında aynıdır.
Bir sitenin genel gezinme bölümü, sitenin tüm alt bölümlerine veya diğer menülere bağlantı veren iç içe bağlantı listelerini açan sekmelerden de oluşabilir.
Başlıklı bölümler, düğmeler ve arama widget'ları bu kapsamda olabilir. Bu ek özellikler zorunlu değildir. Gerekli olan, gezinmenin her sayfada görünmesi ve her sayfada aynı olmasıdır. Elbette, geçerli sayfaya giden bağlantılarda aria-current="page" simgesi yer almalıdır.
Genel gezinme, uygulama veya web sitesinde herhangi bir yere gitmek için tutarlı bir yöntem sunar. Google'ın web sitesinin sayfalarının üst kısmında genel gezinme özelliği yok. Yahoo! yapar. Tüm ana Yahoo! mülkleri farklı stillere sahip olsa da çoğu bölümün içeriği aynıdır.
Haber ve sporla ilgili küresel gezinme başlıklarının içeriği aynıdır. Ancak, kullanıcının spor sayfasında olduğunu gösteren simge, kusursuz görüşe sahip ziyaretçiler için bile erişilebilir olacak kadar kontrastlı değil. Her iki bölümde de bölümle ilgili yerel gezinme bağlantılarının yer aldığı bir genel gezinme bölümü bulunur.
Global gezinmeye benzer şekilde, altbilgiler tüm sayfalarda aynı olmalıdır. Ancak tek benzerlik budur. Global gezinme, ürün perspektifinden bakıldığında sitenin tüm bölümlerine gezinmeyi sağlar. Altbilgideki gezinme öğeleri için belirli koşullar yoktur.
Altbilgi genellikle yasal beyanlar, şirket hakkında bilgileri, kariyer sayfası ve sosyal medya gibi ilgili harici kaynaklara bağlantılar gibi kurumsal bağlantılar içerir.
Bu sayfanın altbilgisinde iki grup gezinme öğesi bulunur: ilgili web.dev gezinme öğelerinin üç sütunlu grubu ve ayrı bir Google şartları ve gizlilik gezinme öğesi. Altbilgi gezinme bölümünde web.dev'e nasıl katkıda bulunulacağı, web.dev ekibi tarafından sağlanan ilgili içerikler ve harici sosyal medya bağlantıları yer alır.
Sonraki videoda, veri tablolarını işaretlemeyi öğreneceğiz.
Anlayıp anlamadığınızı kontrol etme
Gezinme ile ilgili bilginizi test edin.
Bir sitenin ana gezinme bölümünü işaretlemek için hangi öğe kullanılır?
<navigation><breadcrumb><nav>Bir sayfada birden fazla gezinme öğesi olabilir mi?