Bir web sitesi için ana gezinme sistemini oluşturma

Bu eğitimde, web sitelerinde erişilebilir bir ana gezinme menüsünün nasıl oluşturulacağı açıklanmaktadır. Anlamsal HTML, erişilebilirlik ve ARIA özelliklerinin bazen yarardan çok zarar verebileceği hakkında bilgi edinirsiniz.

Manuel Matuzović

Bir web sitesinin ana gezinme menüsünü oluşturmanın stil, işlevsellik, temel işaretleme ve anlamsal bilgiler açısından birçok farklı yolu vardır. Uygulama çok minimalist olursa çoğu kullanıcının işine yarar ancak kullanıcı deneyimi çok iyi olmayabilir. Aşırı derecede karmaşık bir tasarım, kullanıcıların kafasını karıştırabilir veya hatta uygulamaya erişmelerini engelleyebilir.

Çoğu web sitesi için ne çok basit ne de çok karmaşık bir şey oluşturmak istersiniz.

Katman katman oluşturma

Bu eğitimde, temel bir kurulumla başlar ve çoğu kullanıcıyı memnun edecek kadar bilgi, stil ve işlev sunduğunuz bir noktaya kadar katman katman özellik eklersiniz. Bunu başarmak için, en temel ve sağlam çözümle başladığınızı ve kademeli olarak işlev katmanları eklediğinizi belirten progresif geliştirme ilkesinden yararlanacaksınız. Bir katman herhangi bir nedenle çalışmazsa temel katmana sorunsuz bir şekilde geri döndüğü için gezinme devam eder.

Temel yapı

Temel bir gezinme işlemi için iki şeye ihtiyacınız vardır: <a> öğeleri ve bağlantılarınızın varsayılan stilini ve düzenini iyileştirmek için birkaç satır CSS.

<a href="/home">Home</a>
<a href="/about-us">About us</a>
<a href="/pricing">Pricing</a>
<a href="/contact">Contact</a>

/* Define variables for your colors */
:root {
  --color-shades-dark: rgb(25, 25, 25);
}

/* Use the alternative box model
Details: <https://web.dev/learn/css/box-model/> */
*{
  box-sizing: border-box;
}

/* Basic font styling */
body {
  font-family: Segoe UI, system-ui, -apple-system, sans-serif;
  font-size: 1.6rem;
}

/* Link styling */
a {
  --text-color: var(--color-shades-dark);
  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  display: inline-block;
  margin-block-end: 0.5rem; /* See note at the bottom of this chapter */
  margin-inline-end: 0.5rem;
  padding: 0.1rem;
  text-decoration: none;
}

/* Change the border-color on :hover and :focus */
a:where(:hover, :focus) {
  --border-color: var(--text-color);
}

Bu, siteye nasıl eriştikleri fark etmeksizin çoğu kullanıcı için işe yarar. Navigasyona fare, klavye, dokunmatik cihaz veya ekran okuyucu ile erişilebilir ancak iyileştirmeye açıktır. Bu temel kalıbı ek işlevler ve bilgilerle genişleterek deneyimi iyileştirebilirsiniz.

Şunları yapabilirsiniz:

• Etkin sayfayı vurgulayın.
• Ekran okuyucu kullanıcılarına öğe sayısını söyleyin.
• Önemli nokta ekleyin ve ekran okuyucu kullanıcılarının kısayol kullanarak gezinmeye doğrudan erişmesine izin verin.
• Dar görüntü alanlarında gezinme menüsünü gizleyin.
• Odak stilini iyileştirin.

Etkin sayfayı vurgulama

Etkin sayfayı vurgulamak için ilgili bağlantıya sınıf ekleyebilirsiniz.

<a href="/about-us" class="active-page">About us</a>

Bu yaklaşımın sorunu, hangi bağlantının etkin olduğunun bilgisini yalnızca görsel olarak iletmesidir. Görme engelli bir ekran okuyucu kullanıcısı, etkin sayfa ile diğer sayfalar arasındaki farkı anlayamaz. Neyse ki Erişilebilir Zengin İnternet Uygulamaları (ARIA) standardı, bu bilgileri anlamsal olarak da iletmenin bir yolunu sunuyor. Sınıf yerine aria-current="page" özelliğini ve değerini kullanın.

aria-current (durum), bir kapsayıcı veya ilgili öğe grubu içindeki geçerli öğeyi temsil eden öğeyi gösterir. Sayfalara ayırma bağlantıları grubundaki bir bağlantıyı belirtmek için kullanılan sayfa jetonu. Bu bağlantı, görsel olarak mevcut sayfayı temsil edecek şekilde biçimlendirilir. [Erişilebilir Zengin İnternet Uygulamaları (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria/#aria-current)

Ek özellik sayesinde ekran okuyucular artık "bağlantı, Hakkımızda" yerine "mevcut sayfa, bağlantı, Hakkımızda" gibi bir ifadeyi duyuruyor.

<a href="/about-us" aria-current="page" class="active-page">About us</a>

Bu özelliğin kullanışlı bir yan etkisi, CSS'de etkin bağlantıyı seçmek için bu özelliği kullanabilmenizdir. Bu sayede active-page sınıfı kullanımdan kaldırılmıştır.

<a href="/home">Home</a>
<a href="/about-us" aria-current="page">About us</a>
<a href="/pricing">Pricing</a>
<a href="/contact">Contact</a>

/* Change border-color and color for the active page */
[aria-current="page"] {
  --border-color: var(--color-highlight);
  --text-color: var(--color-highlight);
}

Öğe sayısını duyurma

Görme engeli olmayan kullanıcılar, gezinme menüsüne bakarak yalnızca dört bağlantı içerdiğini anlayabilir. Kör bir ekran okuyucu kullanıcısı bu bilgileri bu kadar hızlı alamaz. Tüm bağlantı listesinde ilerlemeleri gerekebilir. Liste bu örnekteki gibi kısaysa bu sorun oluşturmayabilir ancak 40 bağlantı içeriyorsa bu görev zahmetli olabilir. Ekran okuyucu kullanıcısı, gezinme menüsünün çok sayıda bağlantı içerdiğini önceden bilirse site araması gibi farklı ve daha verimli bir gezinme yöntemi kullanmaya karar verebilir.
Öğe sayısını önceden belirtmenin güzel bir yolu, her bağlantıyı bir liste öğesine (<li>) sarmalayarak sırasız bir listeye (<ul>) yerleştirmektir.

<ul>
  <li>
     <a href="/home">Home</a>
  </li>
  <li>
    <a href="/about-us" aria-current="page">About us</a>
  </li>
  <li>
    <a href="/pricing">Pricing</a>
  </li>
  <li>
    <a href="/contact">Contact</a>
  </li>
</ul>

Bir ekran okuyucu kullanıcısı listeyi bulduğunda, yazılımı "liste, 4 öğe" gibi bir şey duyurur.

Windows'ta NVDA ekran okuyucuyla kullanılan gezinme menüsünün bir demosunu burada bulabilirsiniz.

Şimdi stili, daha önceki gibi görünecek şekilde uyarlamanız gerekiyor.

/* Remove the default list styling and create a flexible layout for the list */
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Basic link styling */
a {
  --text-color: var(--color-shades-dark);

  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  padding: 0.1rem;
  text-decoration: none;
}

Listelerin kullanılması, ekran okuyucu kullanıcıları için birçok avantaja sahiptir:

• Kullanıcılar, öğelerle etkileşime geçmeden önce toplam öğe sayısını görebilir.
• Liste öğesinden liste öğesine atlamak için kısayolları kullanabilirler.
• Listeden listeye atlamak için kısayollardan yararlanabilirler.
• Ekran okuyucu, mevcut öğenin dizin numarasını (ör. "liste öğesi, dört öğeden ikisi") duyurabilir.

Ayrıca, sayfa CSS olmadan sunulursa liste, bağlantıları yalnızca bir bağlantı yığını yerine tutarlı bir öğe grubu olarak gösterir.

Safari'deki VoiceOver ile ilgili dikkate değer bir ayrıntı, list-style: none ayarını yaptığınızda tüm bu avantajları kaybetmenizdir. Bu durum tasarım gereğidir. WebKit ekibi, liste gibi görünmeyen listelerin liste semantiklerini kaldırmaya karar verdi. Gezinme sürecinizin karmaşıklığına bağlı olarak, bu bir sorun olabilir veya olmayabilir. Diğer yandan, gezinme özelliği hâlâ kullanılabilir durumdadır ve yalnızca Safari'deki VoiceOver'ı etkiler. Chrome veya Firefox ile VoiceOver, öğelerin sayısını ve NVDA gibi diğer ekran okuyucuları duyurmaya devam ediyor. Diğer yandan, anlamsal bilgiler bazı durumlarda gerçekten çok yararlı olabilir. Bu kararı vermek için gezinme menüsünü gerçek ekran okuyucu kullanıcılarıyla test etmeniz ve geri bildirimlerini almanız gerekir. Safari'de VoiceOver'ın diğer tüm ekran okuyucular gibi davranması gerektiğine karar verirseniz ARIA listesi rolünü açık bir şekilde <ul> üzerinde ayarlayarak sorunu çözebilirsiniz. Bu işlem, davranışı liste stilini kaldırmadan önceki duruma döndürür. Görsel olarak liste hâlâ aynı görünmeye devam ediyor.

<ul role="list">
  <li>
     <a href="/home">Home</a>
  </li>
  ...
</ul>

Önemli nokta ekle

Ekran okuyucu kullanıcıları için çok az çabayla önemli iyileştirmeler yaptınız ancak yapabileceğiniz bir şey daha var. Gezinme, anlamsal olarak hâlâ yalnızca bir bağlantı listesidir ve bu belirli listenin web sitenizin ana gezinme menüsü olduğunu anlamak zordur. <ul> öğesini bir <nav> öğesi içinde sarmalayarak bu sıradan listeyi gezinme listesine dönüştürebilirsiniz.

<nav> öğesini kullanmanın çeşitli avantajları vardır. Özellikle, ekran okuyucular, kullanıcı etkileşimde bulunduğunda "gezinme" gibi bir şeyi duyurur ve sayfaya bir önemli nokta ekler. Önemli noktalar, ekran okuyucunun atlayabileceği <header>, <footer> veya <main> gibi sayfada bulunan özel bölgelerdir. Sayfalarda belirgin işaretler bulunması, ekran okuyucu kullanıcılarının sayfanın geri kalanıyla etkileşime geçmek zorunda kalmadan sayfadaki önemli bölgelere doğrudan erişmesine olanak tanıdığından yararlı olabilir. Örneğin, NVDA'da D tuşuna basarak önemli noktalar arasında atlayabilirsiniz. VoiceOver'da VO + U tuşlarına basarak sayfadaki tüm yer işaretlerini listelemek için rotoru kullanabilirsiniz.

Bu listede 4 önemli nokta görürsünüz: banner <header> öğesi, gezinme <nav>, ana <main> öğesi ve içerik bilgisi <footer>. Bu liste çok uzun olmamalıdır. Yalnızca kullanıcı arayüzünüzün önemli bölümlerini (ör. site araması, yerel gezinme veya sayfalandırma) yer işareti olarak işaretlemek istersiniz.

Site genelinde gezinme, sayfa için yerel gezinme ve tek bir sayfada sayfalandırma varsa 3 <nav> öğeniz de olabilir. Bu iyi bir şeydir ancak artık üç gezinme yer işareti vardır ve anlamsal olarak hepsi aynı görünür. Sayfanın yapısını çok iyi bilmiyorsanız bunları birbirinden ayırt etmek zordur.

Bunları ayırt edilebilir hale getirmek için aria-labelledby veya aria-label kullanarak etiketlemeniz gerekir.

<nav aria-label="Main">
    <ul>
      <li>
         <a href="/home">Home</a>
      </li>
      ...
  </ul>
</nav>
...
<nav aria-label="Select page">
    <ul>
      <li>
         <a href="/page-1">1</a>
      </li>
      ...
    </ul>
</nav>

Seçtiğiniz etiket sayfanın bir yerinde zaten mevcutsa bunun yerine aria-labelledby kullanabilir ve id özelliğini kullanarak mevcut etikete referans verebilirsiniz.

<nav aria-labelledby="pagination_heading">
  <h2 id="pagination_heading">Select a page</h2>
  <ul>
    <li>
       <a href="/page-1">1</a>
    </li>
    ...
  </ul>
</nav>

Kısa ve öz bir etiket yeterlidir. Çok fazla kelime girmeyin. Ekran okuyucu kullanıcılara zaten bu bilgileri sağladığından "gezinme" veya "menü" gibi ifadeleri çıkarın.

Dar görüntü alanlarında gezinmeyi gizle

Kişisel olarak ana gezinmeyi dar görüntü alanlarında gizlemeyi pek sevmem, ancak bağlantı listesi çok uzun sürerse bunun geri dönüşü mümkün olmaz. Bu durumda, kullanıcılar liste yerine "Menü" etiketli bir düğme veya hamburger simgesi ya da bunların bir kombinasyonunu görür. Düğmeyi tıkladığınızda liste gösterilir ve gizlenir. Temel JavaScript ve CSS bilgisine sahipseniz bu görevi tamamlayabilirsiniz. Ancak kullanıcı deneyimi ve erişilebilirlik açısından dikkat etmeniz gereken birkaç nokta vardır.

• Listeyi erişilebilir bir şekilde gizlemeniz gerekir.
• Gezinme menüsüne klavyeden erişilebilmelidir.
• Gezinme menüsünün görünür olup olmadığı belirtilmelidir.

Hamburger düğmesi ekleme

Kademeli iyileştirme ilkesini izlediğiniz için JavaScript devre dışıyken gezinmenizin çalışmaya devam ettiğinden ve anlamlı olduğundan emin olmak istersiniz.
Gezinmenizin ihtiyaç duyduğu ilk şey bir hamburger düğmesidir. Bu öğeyi bir şablon öğesinde HTML olarak oluşturur, JavaScript'de klonlar ve gezinme menüsüne eklersiniz.

<nav id="mainnav">
  ...
</nav>

<template id="burger-template">
  <button type="button" aria-expanded="false" aria-label="Menu" aria-controls="mainnav">
    <svg width="24" height="24" aria-hidden="true">
      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
    </svg>
  </button>
</template>

1. aria-expanded özelliği, ekran okuyucu yazılımına düğmenin kontrol ettiği öğenin genişletilip genişletilmediğini bildirir.
2. aria-label, düğmeye erişilebilir bir ad (hamburger simgesinin metin alternatifi) verir.
3. aria-label tarafından sağlanan bir metin etiketi bulunduğundan <svg>'ü aria-hidden kullanarak yardımcı teknolojiden gizleyebilirsiniz.
4. aria-controls, özelliği destekleyen yardımcı teknolojiye (örneğin, JAWS) düğmenin hangi öğeyi kontrol ettiğini bildirir.

const nav = document.querySelector('#mainnav')
const list = nav.querySelector('ul');
const burgerClone = document.querySelector('#burger-template').content.cloneNode(true);
const button = burgerClone.querySelector('button');

// Toggle aria-expanded attribute
button.addEventListener('click', e => {
  // aria-expanded="true" signals that the menu is currently open
  const isOpen = button.getAttribute('aria-expanded') === "true"
  button.setAttribute('aria-expanded', !isOpen);
});

// Hide list on keydown Escape
nav.addEventListener('keyup', e => {
  if (e.code === 'Escape') {
    button.setAttribute('aria-expanded', false);
  }
});

// Add the button to the page
nav.insertBefore(burgerClone, list);

1. Kullanıcıların, örneğin Escape tuşuna basarak istedikleri zaman gezinme menüsünü kapatabilmesi kullanışlıdır.
2. Düğme, gezinme menünüzdeki ilk öğe olması gerektiğinden appendChild yerine insertBefore kullanmanız önemlidir. Klavye veya ekran okuyucu kullanıcısı, düğmeyi tıkladıktan sonra Tab tuşuna basarsa listedeki ilk öğenin odağa alınmasını bekler. Düğme listeden sonra gelirse bu durum söz konusu olmaz.

Ardından, düğmenin varsayılan stilini sıfırlayın ve yalnızca dar görüntü alanlarında göründüğünden emin olun.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
  }
}

/* Reset button styling */
button {
  all: unset;
  display: var(--nav-button-display, flex);
}

Liste gizleniyor

Listeyi gizlemeden önce gezinme menüsünü ve listeyi, düzenin dar görüntü alanı için optimize edildiği ancak büyük ekranlarda da iyi görüneceği şekilde konumlandırın ve biçimlendirin.
Öncelikle <nav>'ı sayfanın doğal akışından kaldırın ve görüntü alanının üst köşesine yerleştirin.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
}

nav {
  position: var(--nav-position, fixed);
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

Ardından, yeni bir özel mülk (—-nav-list-layout) ekleyerek dar görüntü alanlarında düzeni değiştirin. Düzen varsayılan olarak sütun şeklindedir ve daha büyük ekranlarda satıra geçer.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }

  ul {
    --nav-list-layout: row;
  }
}

ul {
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

Gezinme menünüz dar ekran görünümlerinde aşağıdaki gibi görünmelidir.

Listenin CSS'ye ihtiyacı olduğu belli. Onu en üst köşeye taşıyacağız, dikey olarak ekranın tamamını doldurmasını sağlayacağız, bir background-color ve bir box-shadow uygulayacağız.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
  
  ul {
    --nav-list-layout: row;
    --nav-list-position: static;
    --nav-list-padding: 0;
    --nav-list-height: auto;
    --nav-list-width: 100%;
    --nav-list-shadow: none;
  }
}

ul {
  background: rgb(255, 255, 255);
  box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  height: var(--nav-list-height, 100vh);
  list-style: none;
  margin: 0;
  padding: var(--nav-list-padding, 2rem);
  position: var(--nav-list-position, fixed);
  inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
  inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
  width: var(--nav-list-width, min(22rem, 100vw));
}

button {
  all: unset;
  display: var(--nav-button-display, flex);
  position: relative;
  z-index: 1;
}

Liste, dar ekran görünümlerinde aşağıdaki gibi görünmelidir. Basit bir listeden ziyade kenar çubuğuna benzer.

Son olarak, listeyi gizleyin. Listeyi yalnızca kullanıcı düğmeyi bir kez tıkladığında gösterin ve tekrar tıkladığında gizleyin. Gezinmenin tamamını değil, yalnızca listeyi gizlemek önemlidir. Gezinmeyi gizlemek, önemli bir yer işaretini de gizlemek anlamına gelir.

Daha önce, aria-expanded özelliğinin değerini değiştirmek için düğmeye bir tıklama etkinliği eklemiştiniz. Bu bilgileri, CSS'de listeyi göstermek ve gizlemek için bir koşul olarak kullanabilirsiniz.

@media (min-width: 48em) {
  ul {
    --nav-list-visibility: visible;
  }
}

ul {
  visibility: var(--nav-list-visibility, visible);
}

/* Hide the list on narrow viewports, if it comes after an element with
   aria-expanded set to "false". */
[aria-expanded="false"] + ul {
  visibility: var(--nav-list-visibility, hidden);
}

Listeyi gizlemek için opacity: 0 veya translateX(100%) yerine visibility: hidden ya da display: none gibi bir özellik beyanı kullanmanız önemlidir. Bu özellikler, gezinme gizlendiğinde bağlantıların odaklanmamasını sağlar. opacity veya translate kullanılması içeriğin görsel olarak kaldırılmasına neden olur. Bu durumda bağlantılar görünmez olur, klavye kullanılarak ise erişilebilir hale gelir. Bu durum kafa karıştırıcı ve sinir bozucu olabilir. visibility veya display kullanıldığında görsel olarak gizlenir ve erişilemez hale gelir. Bu nedenle tüm kullanıcılar için gizlenir.

Listeyi animasyonlu hale getirme

display: none; yerine neden visibility: hidden; kullanmanız gerektiğini merak ediyorsanız bunun nedeni, görünürlüğü animasyonlu hale getirebilmenizdir. Yalnızca iki durumu (hidden ve visible) vardır ancak slayt veya belirme efekti oluşturmak için transform ya da opacity gibi başka bir özellikle birleştirebilirsiniz. Bu, görüntülü reklam ile işe yaramaz: Görüntülü reklam özelliği canlandırılamadığı için yok.

Aşağıdaki CSS geçişleri opacity, kaybolma ve görünme efekti oluşturmak için kullanılır.

ul {
  transition: opacity 0.6s linear, visibility 0.3s linear;
  visibility: var(--nav-list-visibility, visible);
}

[aria-expanded="false"] + ul {
  opacity: 0;
  visibility: var(--nav-list-visibility, hidden);
}

Bunun yerine hareketi canlandırmak istiyorsanız animasyonlar bazı kullanıcılarda bulantı, baş dönmesi ve baş ağrısı tetikleyebileceği için transition özelliğini azaltılmış hareket tercih eden medya sorgusuna sarmalamanız önerilir.

ul {
  visibility: var(--nav-list-visibility, visible);
}

@media (prefers-reduced-motion: no-preference) {
  ul {
    transition: transform 0.6s cubic-bezier(.68,-0.55,.27,1.55), visibility 0.3s linear;
  }
}

[aria-expanded="false"] + ul {
  transform: var(--nav-list-transform, translateX(100%));
  visibility: var(--nav-list-visibility, hidden);
}

Bu sayede, animasyonu yalnızca hareket azaltma tercihi olmayan kullanıcılar görür.

Odak stilini iyileştirme

Klavye kullanıcıları, bir sayfada yön ve gezinme için öğelerin odak stillerini kullanır. Varsayılan odak stilleri, odak stili olmamasına (outline: none ayarladığınızda gerçekleşir) kıyasla daha iyidir ancak daha net görülebilen özel odak stilleri kullanıcı deneyimini iyileştirir.

Chrome 103'te bağlantıdaki varsayılan odak stilleri aşağıdaki gibi görünür.

Kendi renklerinizi kullanarak kendi stillerinizi sağlayarak bunu artırabilirsiniz. :focus yerine :focus-visible kullanarak, odaklanma stillerinin ne zaman gösterileceğine tarayıcıya karar verebilirsiniz. :focus stilleri, ihtiyaç duyup duymadıklarına bakılmaksızın fare, klavye ve dokunmatik kullanıcılar dahil herkes tarafından görülebilir. :focus-visible ile tarayıcı, önerilerin yalnızca klavye kullanıcılarına mı yoksa herkese mi gösterileceğine karar vermek için dahili buluşsal yöntemler kullanır.

/* Remove the default :focus outline */
*:focus {
  outline: none;
}

/* Show a custom outline on :focus-visible */
*:focus-visible {
  outline: 2px solid var(--color-shades-dark);
  outline-offset: 4px;
}

:focus-visible için tarayıcı desteği

Odaklanan öğeleri vurgulamanın farklı yolları vardır. border ürününde meydana gelebilecek düzeni bozmadığı ve Windows'da yüksek kontrast modu ile iyi çalıştığı için outline özelliğinin kullanılması önerilir. Özel kontrast ayarlarıyla hiç gösterilmeyebilecekleri için iyi çalışmayan mülkler background-color veya box-shadow olarak gösterilir.

Tebrikler! Giderek gelişen, anlamsal açıdan zengin, erişilebilir ve mobil uyumlu bir ana gezinme menüsü oluşturdunuz.

Her zaman iyileştirilebilecek bir şey vardır. Örneğin:

• Odağı gezinmenin içine tutmayı veya sayfanın geri kalanını dar görüntü alanlarında ayarlama yapmayı düşünebilirsiniz.
• Klavye kullanıcılarının gezinmeyi atlamasına izin vermek için sayfanın en üstüne bir atlama bağlantısı ekleyebilirsiniz.

Bu makalenin, çözümün "ne çok basit ne de çok karmaşık olmaması" amacıyla başladığını hatırlarsanız, şu anda bulunduğumuz nokta budur. Ancak, gezinme menüsünü aşırı derecede karmaşık hale getirmek de mümkündür.

Gezinmeler ve menüler

Gezinme menüleri ile menüler arasında belirgin bir fark vardır. Gezinmeler, ilgili dokümanlarda gezinmeye yönelik bağlantı koleksiyonlarıdır. Menüler, bir dokümanda gerçekleştirilecek işlem koleksiyonlarıdır. Bazen bu görevler çakışır. Kalıcı pencere açma gibi bir işlemi gerçekleştiren bir düğme de içeren bir gezinmeniz veya bir işlemin başka bir sayfaya gitmekte olduğu bir menü (ör. yardım sayfası) olabilir. Bu durumda, ARIA rollerini bir araya getirmemeniz, bileşeninizin ana amacını belirlemeniz ve işaretlemeyi ve rolleri buna göre seçmeniz önemlidir.

<nav> öğesinin, öğenin gezinme öğesi olduğunu belirtmek için yeterli olan bir örtük ARIA gezinme rolü vardır. Ancak sitelerde genellikle menü, menü çubuğu ve menü öğesi de kullanılır. Bu terimleri bazen birbirinin yerine kullandığımız için ekran okuyucu kullanıcılarının deneyimini iyileştirmek amacıyla bunları birleştirmenin yararlı olabileceğini düşünüyoruz. Bunun genellikle neden geçerli olmadığını öğrenmeden önce bu rollerin resmi tanımına göz atalım.

Gezinme rolü

Belgede veya ilgili belgelerde gezinmek için kullanılan gezinme öğelerinin (genellikle bağlantılar) koleksiyonu.

navigation (rol) WAI-ARIA 1.1

Menü rolü

Menüler genellikle kullanıcının çağırabileceği genel işlemlerin veya işlevlerin listesidir. Menü rolü, menü öğeleri listesi bir masaüstü uygulamasındaki menüye benzer şekilde sunulduğunda uygundur.

menu (rol) WAI-ARIA 1.1

Menü çubuğu rolü

Genellikle görünür durumda kalan ve genellikle yatay olarak sunulan bir menü sunumu. Menü çubuğu rolü; Windows, Mac ve Gnome masaüstü uygulamalarındakine benzer bir menü çubuğu oluşturmak için kullanılır. Sık kullanılan komutlardan oluşan tutarlı bir küme oluşturmak için menü çubuğu kullanılır. Yazarlar, menü çubuğu etkileşiminin masaüstü grafik kullanıcı arayüzündeki tipik menü çubuğu etkileşimine benzer olmasını sağlamalıdır.

menü çubuğu (rol) WAI-ARIA 1.1

Menü öğesi rolü

Menü veya menü çubuğu içeren bir seçenek grubundaki seçenek.

menuitem (rol) WAI-ARIA 1.1

Buradaki şart çok açıktır. Dokümanda veya ilgili dokümanlarda gezinmek için gezinme menüsünü, yalnızca masaüstü uygulamalarındaki menülere benzer bir işlem veya işlev listesi için menü menüsünü kullanın. Bir sonraki Google Dokümanlar'ı oluşturmuyorsanız ana gezinme menüsü rollerinden herhangi birine ihtiyacınız yoktur.

Menü ne zaman uygun olur?

Menü öğelerinin birincil kullanımı gezinme değil, işlem gerçekleştirmektir. Veri listesi veya tablonuz olduğunu ve kullanıcıların listedeki her öğe üzerinde belirli işlemleri yapabileceğini varsayalım. Her satıra bir düğme ekleyebilir ve kullanıcılar düğmeyi tıkladığında işlemleri gösterebilirsiniz.

<ul>
  <li>
    Product 1

    <button aria-expanded="false" aria-controls="options1">Edit</button>

    <div role="menu" id="options1">
      <button role="menuitem">
        Duplicate
      </button>
      <button role="menuitem">
        Delete
      </button>
      <button role="menuitem">
        Disable
      </button>
    </div>
  </li>
  <li>
    Product 2
    ...
  </li>
</ul>

Menü rollerini kullanmanın sonuçları

Birçok sorunla karşılaşılabileceğinden bu menü rollerini akıllıca kullanmak çok önemlidir.

Menüler belirli bir DOM yapısı gerektirir. menuitem, menu öğesinin doğrudan bir alt öğesi olmalıdır. Aşağıdaki kod, anlamsal davranışı bozabilir:

 <!-- Wrong, don't do this -->
<ul role="menu">
  <li>
    <a href="#" role="menuitem">Item 1</a>
  </li>
</ul>

Bilgili kullanıcılar, belirli klavye kısayollarının menüler ve menü çubuklarıyla çalışmasını bekler. ARIA Yazarlık Uygulamaları Kılavuzu'na (APG) göre bunlar şunlardır:

• Menü öğelerini seçmek için Enter ve Boşluk tuşlarını kullanın.
• Öğeler arasında gezinmek için tüm yönlerdeki ok tuşları.
• Odağı sırasıyla ilk veya son öğeye taşımak için Home ve End tuşları.
• a-z, odağı, yazılan karakterle başlayan bir etikete sahip bir sonraki menü öğesine taşımak için kullanılır.
• Menüyü kapatmak için Esc tuşuna basın.

Ekran okuyucu bir menü algılarsa yazılım, daha önce bahsedilen kısayolların kullanılmasını sağlayarak tarama modunu otomatik olarak değiştirebilir. Deneyimsiz ekran okuyucu kullanıcıları, bu kısayolları veya nasıl kullanılacağını bilmediği için menüyü kullanamayabilir.

Bu kural, üst karakter ve üst karakter + sekme tuşlarını kullanabileceğini düşünen klavye kullanıcıları için de geçerlidir.

Menü ve menü çubukları oluştururken göz önünde bulundurmanız gereken birçok nokta vardır. Bunların başında, bu öğeleri kullanmanın uygun olup olmadığı gelir. Tipik bir web sitesi oluştururken ihtiyacınız olan tek şey, liste ve bağlantılar içeren nav öğesidir. Tek sayfalık uygulamalar (SPA) veya web uygulamaları da buna dahildir. Temel yığın önemli değildir. Masaüstü uygulamasına çok benzeyen bir şey oluşturmuyorsanız menü rollerinden kaçının.

Ek Kaynaklar

• Scott O'Hara'nın Fixing Lists (Listeleri Düzeltme) adlı kitabı
• Adrian Roselli'nin Site Gezinme İçin ARIA Menü Rollerini Kullanmayın başlıklı makalesi.
• Heydon Pickering tarafından yazılan Menüler ve Menü Düğmeleri.
• Marco Zehe tarafından yazılan WAI-ARIA menüleri ve bunları neden çok dikkatli bir şekilde ele almanız gerektiği başlıklı makale.
• Kitty Giraudel tarafından yazılan İçerikleri sorumlu bir şekilde gizleme.
• Matthias Ott, :focus-visible Is Here

Mick Haupt tarafından oluşturulan lokomotif resim