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

Bu eğitimde, bir web sitesinde erişilebilir bir ana gezinmenin nasıl oluşturulacağı açıklanmaktadır. Anlamsal HTML'yi, erişilebilirliği ve ARIA özelliklerini kullanmanın bazen faydadan çok zarara yol açabileceğini öğreneceksiniz.

Bir web sitesinin ana gezinme şeklini oluşturmak için stil, işlevsellik, temel biçimlendirme ve anlamsal bilgiler açısından birçok farklı yol vardır. Uygulama çok minimalistse çoğu kişinin işine yarar ancak kullanıcı deneyimi çok iyi olmayabilir. Söz konusu sistemde aşırı mühendislik çalışması yapıldığında kullanıcıların kafasını karıştırabilir, hatta ürüne erişmelerini bile engelleyebilir.

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

Katman bazında oluşturma

Bu eğitimde temel bir kurulumla başlayacak ve çoğu kullanıcıyı memnun edecek kadar bilgi, stil ve işlevsellik sağladığınız noktaya kadar özellikleri katmanlar halinde ekleyeceksiniz. Bunu başarmak için, en temel ve sağlam çözümle başlamanızı ve kademeli olarak işlevsellik katmanları eklemenizi gerektiren progresif geliştirme ilkesinden yararlanırsınız. Bir katman bir nedenden dolayı çalışmazsa, gezinme işlemi yine de alttaki katmana geri çekilir.

Temel yapı

Temel bir gezinme 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ç CSS satırı.

<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 işlem, siteye nasıl erişiyor olursa olsun çoğu kullanıcı için faydalıdır. Gezinmeye fare, klavye, dokunmatik cihaz veya ekran okuyucuyla erişebilirsiniz ancak daha fazla iyileştirme yapılabilir. Bu temel kalıbı ek işlevler ve bilgilerle genişleterek deneyimi geliştirebilirsiniz.

Şunları yapabilirsiniz:

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

Etkin sayfayı vurgula

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

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

Bu yaklaşımdaki sorun, hangi bağlantının etkin olduğunu sadece görsel olarak aktarmasıdır. Görme engelli bir ekran okuyucu kullanıcısı, etkin sayfa ile diğer sayfalar arasındaki farkı anlayamadı. 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 (eyalet), bir kapsayıcı veya ilgili öğeler grubu içindeki geçerli öğeyi temsil eden öğeyi belirtir. Sayfa jetonu, sayfalandırma bağlantıları grubu içindeki bir bağlantıyı belirtmek için kullanılan ve bağlantının o anda görüntülenen sayfayı temsil edecek şekilde görsel olarak biçimlendirildiği bir sayfa jetonu. [Erişilebilir Zengin İnternet Uygulamaları (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria/#aria-current)

Bu ek özellik sayesinde bir ekran okuyucu artık sadece "bağlantı, Hakkımızda" yerine "mevcut sayfa, bağlantı, Hakkımızda" gibi bir şey duyurmaktadır.

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

Kullanışlı bir yan etki de, CSS'de etkin bağlantıyı seçmek için bu özelliği kullanabilmenizdir. Bu da active-page sınıfını geçersiz hale getirir.

<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ı söyle

Gören kullanıcılar gezinmeye bakarak yalnızca dört bağlantı içerdiğini anlayabilir. Görme engelli ekran okuyucu kullanıcıları bu bilgilere hızla erişemez. Tüm bağlantı listesinde baştan sona ilerlemeleri gerekebilir. Liste, bu örnekteki gibi kısaysa bu sorun olmayabilir, ancak 40 bağlantı içeriyorsa bu görev zahmetli olabilir. Ekran okuyucu kullanan bir kullanıcı, gezinmenin çok sayıda bağlantı içerdiğini önceden bilirse, site arama gibi farklı ve daha verimli bir gezinme yöntemi kullanmaya karar verebilir.
Öğe sayısını önceden bildirmenin iyi bir yolu, her bağlantıyı sıralanmamış bir listede (<ul>) iç içe yerleştirilmiş bir liste öğesinde (<li>) sarmalamaktır.

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

Ekran okuyucu kullanan bir kullanıcı listeyi bulduğunda, yazılımında "liste, 4 öğe" gibi bir ses duyurulur.

Aşağıda, Windows'da ekran okuyucuyla NVDA ile kullanılan gezinmeyi öğrenebilirsiniz.

Ş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;
}

Listeleri kullanmak, ekran okuyucu kullanıcıları için birçok avantaj sağlayabilir:

• Öğelerle etkileşimde bulunmadan önce toplam öğe sayısını alabilirler.
• Liste öğesinden liste öğesine atlamak için kısayolları kullanabilirler.
• Listeler arasında geçiş yapmak için kısayollardan yararlanabilirler.
• Ekran okuyucu geçerli öğenin dizinini duyurabilir (örneğin, "liste öğesi, dörtten ikinci").

Üstelik, sayfa CSS olmadan sunuluyorsa listede bağlantılar sadece bir bağlantı yığını yerine tutarlı bir öğe grubu olarak gösterilir.

Safari'de VoiceOver ile ilgili dikkate değer bir ayrıntı, list-style: none özelliğini ayarladığınızda tüm bu avantajları kaybetmenizdir. Bu, tasarımdan kaynaklanmaktadır. WebKit ekibi, bir liste liste gibi görünmediğinde liste anlamlarını kaldırmaya karar verdi. Gezinmenin karmaşıklığına bağlı olarak, bu bir sorun olabilir veya olmayabilir. Bir yandan, gezinme hâlâ kullanılabilir ve Safari'de yalnızca VoiceOver'ı etkiler. Chrome veya Firefox'ta VoiceOver, öğelerin sayısını ve NVDA gibi diğer ekran okuyucularını duyurmaya devam eder. Diğer yandan, anlamsal bilgiler bazı durumlarda çok yararlı olabilir. Bu kararı vermek için gezinmeyi 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 çalışmasını istiyorsanız <ul> üzerinde ARIA listesi rolünü açıkça ayarlayarak sorunu çözebilirsiniz. Bu işlem, davranışı liste stilini kaldırmadan önceki haline geri döndürür. Görsel olarak, liste aynı görünmektedir.

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

Önemli nokta ekle

Çok az çaba göstererek ekran okuyucu kullanıcıları için harika iyileştirmeler yaptınız, ancak yapabileceğiniz bir şey daha var. Gezinme semantik olarak hâlâ yalnızca bir bağlantı listesidir ve bu listenin web sitenizin ana gezinme menüsü olduğunu söylemek zordur. <ul> öğesini bir <nav> öğesine sarmalayarak bu sıradan listeyi gezinme listesine dönüştürebilirsiniz.

<nav> öğesi kullanmanın çeşitli avantajları vardır. Örneğin, kullanıcı bir ekran okuyucuyla etkileşimde bulunduğunda "gezinme" gibi bir şeyi duyurur ve sayfaya bir nitelik ekler. Önemli noktalar, sayfa üzerinde ekran okuyucunun atlayabileceği <header>, <footer> veya <main> gibi özel bölgelerdir. Bir sayfada önemli noktaların bulunması, ekran okuyucu kullanıcılarının sayfanın geri kalanıyla etkileşimde bulunmak 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 noktadan önemli noktaya atlayabilirsiniz. Seslendirme'de VO + U tuşlarına basarak sayfadaki tüm önemli noktaları listelemek için rotoru kullanabilirsiniz.

Bu listede 4 önemli nokta görürsünüz: <header> öğesi olan banner, gezinme <nav>, ana <main> öğesi ve içerik bilgileri <footer>'dir. Bu liste çok uzun olmamalıdır. Site arama, yerel gezinme veya sayfalara ayırma gibi kullanıcı arayüzünüzün önemli kısımlarını önemli noktalar olarak işaretlemelisiniz.

Site genelinde gezinme, sayfa için yerel gezinme ve tek bir sayfada sayfalara ayırma özelliğini kullanıyorsanız 3 <nav> öğeniz de olabilir. Bu sorun değil, ancak şimdi üç gezinme önemli noktası var ve anlamsal olarak hepsi aynı görünüyor. Sayfanın yapısını gerçekten iyi bilmediğiniz sürece bunları birbirinden ayırt etmek zordur.

Ayırt edilebilir hale getirmek için aria-labelledby veya aria-label kullanarak etiketlemelisiniz.

<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 sayfada bir yerde zaten varsa aria-labelledby etiketini kullanabilir ve id özelliğini kullanarak mevcut etikete başvurabilirsiniz.

<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, fazla sözcük kullanmayın. Ekran okuyucu kullanıcılara zaten bu bilgileri sağladığından "gezinme" veya "menü" gibi ifadeleri atlayın.

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

Kişisel olarak, ana gezinmeyi dar görüntü alanlarında gizlemeyi pek sevmem ama bağlantı listesi çok uzarsa bunun bir yolu olmaz. Böyle bir 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 biliyorsanız bu yapılabilir bir görevdir, ancak kullanıcı deneyimi ve erişilebilirlik açısından dikkat etmeniz gereken birçok şey vardır.

• Listeyi erişilebilir bir şekilde gizlemeniz gerekir.
• Gezinmeye klavyeden erişilebilmelidir.
• Navigasyon, cihazın görünür olup olmadığını belirtmelidir.

Hamburger düğmesi ekleme

Progresif geliştirme ilkesini uyguladığınız için gezinmenizin JavaScript devre dışıyken bile çalıştığından ve anlamlı olduğundan emin olmalısınız.
Gezinmeniz için ilk olarak bir hamburger düğmesi gerekir. Bunu bir şablon öğesindeki HTML'de oluşturur, JavaScript'te klonlar ve gezinmeye 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 burger simgesi için metin alternatifi olan erişilebilir bir ad verir.
3. aria-label tarafından sağlanan bir metin etiketine sahip olduğundan, <svg> öğesini aria-hidden kullanarak yardımcı teknolojiden gizlediniz.
4. aria-controls, düğmenin kontrol ettiği özelliği (ör. JAWS) destekleyen yardımcı teknolojileri 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 istedikleri zaman, örneğin Escape tuşuna basarak gezinmeyi kapatabilmeleri için kullanışlıdır.
2. Düğmenin gezinmenizdeki ilk öğe olması gerektiğinden appendChild yerine insertBefore kullanmanız önemlidir. Klavye veya ekran okuyucu kullanıcısı düğmeyi tıkladıktan sonra Sekme tuşuna basarsa listedeki ilk öğeye odaklanmayı bekler. Düğme listeden sonra geliyorsa, bu durum söz konusu değildir.

Daha sonra, düğmenin varsayılan stilini sıfırlar ve yalnızca dar görüntü alanlarında göründüğünden emin olursunuz.

@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, düzenin dar görüntü alanları için optimize edilmesi, ancak büyük ekranlarda da iyi görünmesi için gezinme ve listeyi konumlandırın ve bunların stilini belirleyin.
Öncelikle, <nav> öğesini sayfanın doğal akışından kaldırın ve görüntü alanının en ü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 özellik ((—-nav-list-layout)) ekleyerek dar görüntü alanlarındaki 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;
}

Gezinmeniz dar görüntü alanlarında aşağıdaki gibi görünmelidir.

Liste elbette biraz CSS gerektiriyor. Reklam öğesini üst uç köşeye taşıyıp tüm ekranı dikey olarak dolduracak, background-color ve 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 görüntü alanlarında aşağıdakine benzer, basit bir listeden çok kenar çubuğu gibi görünmelidir.

Son olarak listeyi gizleyerek kullanıcı düğmeyi bir kez tıkladığında gösterebilir ve tekrar tıkladığında gizleyebilirsiniz. Gezinmeyi gizlemek, aynı zamanda önemli bir önemli noktayı gizlemek anlamına geleceğinden, gezinmenin tamamını değil, yalnızca listeyi gizlemek önemlidir.

Daha önce, aria-expanded özelliğinin değerini değiştirmek için düğmeye bir tıklama etkinliği ekliyordunuz. Bu bilgileri, listeyi CSS'de gösterme ve gizleme koşulu 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 veya display: none gibi bir özellik bildirimi kullanmanız önemlidir. Bu özellikler, gezinme gizlendiğinde bağlantıların odaklanılamamasını sağlar. opacity veya translate kullanılması içeriği görsel olarak kaldırır. Böylece bağlantılar görünmez olur ancak yine de klavye kullanılarak erişilebilirler. Bu da kafa karıştırıcı ve can sıkıcı olabilir. visibility veya display kullanılması öğe görsel olarak gizlenir ve erişilemez hale gelir, dolayısıyla tüm kullanıcılar için gizlenir.

Listeye animasyon ekleme

display: none; yerine neden visibility: hidden; kullanmanız gerektiğini merak ediyorsanız, bunun nedeni görünürlüğü canlandırabilmenizdir. Yalnızca iki durum (hidden ve visible) vardır ancak kaydırma veya kararma efekti oluşturmak için bu durumu transform ya da opacity gibi başka bir özellikle birleştirebilirsiniz. Bu, display ile çalışmaz: display özelliği canlandırılabilir olmadığından yok.

Aşağıdaki CSS, şeffaflaşma ve kararma efekti oluşturmak için opacity geçişi yapar.

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);
}

Animasyonlar bazı kullanıcılarda mide bulantısı, baş dönmesi ve baş ağrısını tetikleyebileceği için bunun yerine hareketi canlandırmak istiyorsanız prefers-reduced-motion medya sorgusuna sarmalamayı düşünebilirsiniz.transition

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, animasyonu yalnızca az hareket etmeyi tercih etmeyen kullanıcıların görmesini sağlar.

Odak stilini iyileştirin

Klavye kullanıcıları, sayfada yön ve gezinme için öğelerin odak stillerini kullanır. Varsayılan odak stilleri, hiç odak stili olmamasından daha iyidir (outline: none ayarladığınızda gerçekleşir). Ancak daha net şekilde görülebilen özel odak stillerine sahip olmak kullanıcı deneyimini iyileştirir.

Bağlantıdaki varsayılan odak stillerinin Chrome 103'te nasıl göründüğü aşağıda açıklanmıştır.

Kendi stillerinizi kendi renklerinizde sağlayarak bunu iyileştirebilirsiniz. :focus yerine :focus-visible kullandığınızda, odak stillerini ne zaman göstereceğimize tarayıcının karar vermesine izin vermiş olursunuz. :focus stiller, ihtiyaç duyup duymadıklarından bağımsız olarak, fare, klavye ve dokunmatik cihaz kullanıcıları dahil olmak üzere herkes tarafından görülebilir. :focus-visible ile tarayıcı, bunların yalnızca klavye kullanıcılarına mı yoksa herkese mi gösterileceğine karar vermek için dahili buluşsal yöntemleri 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

Odaklanılan öğeleri vurgulamanın farklı yolları vardır. Düzeni bozmayacağı (border ile ortaya çıkabileceği gibi) ve Windows'da yüksek kontrast moduyla iyi çalıştığı için outline özelliğinin kullanılması önerilir. Özel kontrast ayarlarıyla hiç görüntülenmeyebileceği için iyi performans göstermeyen özellikler background-color veya box-shadow'dir.

Tebrikler! Kademeli olarak geliştirilmiş, anlam açısından zengin, erişilebilir ve mobil uyumlu bir ana gezinme arayüzü oluşturdunuz.

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

• Odağı gezinmenin içine hapsedebilir veya sayfanın geri kalanını dar görüntü alanlarında dolaysız hale getirebilirsiniz.
• Klavye kullanıcılarının gezinmeyi atlamasına izin vermek için sayfanın üst kısmına bir atlama bağlantısı ekleyebilirsiniz.

Çözümün "ne çok basit ne de çok karmaşık" olması amacıyla bu makalenin nasıl başladığını hatırlıyorsanız şu anda tam da bu noktadayız. Ancak, bir gezinmede aşırı mühendislik uygulamak mümkündür.

Gezinmeler ve menüler

Gezinmeler ve menüler arasında net 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şlem gerçekleştiren düğme içeren bir gezinmeniz veya bir işlemin başka bir sayfaya (ör. yardım sayfası) gittiği bir menünüz olabilir. Böyle bir durumda ARIA rollerini birleştirmemeniz, ancak bileşeninizin ana amacını tanımlamanız ve işaretleme ile rolleri uygun şekilde seçmeniz önemlidir.

<nav> öğesinin, gezinme işlevi sağlayan dolaylı bir ARIA rolü vardır. Bu rol, öğenin bir gezinme öğesi olduğunu belirtmek için yeterli olur. Ancak çoğu zaman sitelerin, menü, menü çubuğu ve menü öğelerini de kullandığını görürsünüz. Bu terimleri bazen birbirinin yerine kullandığımızdan ekran okuyucu kullanıcılarının deneyimini iyileştirmek için birleştirmenin mantıklı olabileceğini düşünüyoruz. Genellikle neden böyle olmadığını öğrenmeden önce bu rollerin resmi tanımlarına bir göz atalım.

Gezinme rolü

Dokümanda veya ilgili dokümanlarda gezinmek için kullanılan gezinme öğeleri (genellikle bağlantılar) koleksiyonu.

gezinme (rol) WAI-ARIA 1.1

Menü rolü

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

menü (rol) WAI-ARIA 1.1

Menü çubuğu rolü

Çoğunlukla görülebilen ve genellikle yatay olarak sunulan bir menü gösterimi. Menü çubuğu rolü; Windows, Mac ve Gnome masaüstü uygulamalarında bulunanlara benzer bir menü çubuğu oluşturmak için kullanılır. Menü çubuğu, tutarlı bir sık kullanılan komut kümesi oluşturmak için 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.

menubar (rol) WAI-ARIA 1.1

Menü öğesi rolü

Bir menü veya menü çubuğu tarafından yer alan seçenek kümesindeki bir seçenek.

menuitem (rol) WAI-ARIA 1.1

Spesifikasyon burada oldukça nettir. Dokümanda veya ilgili dokümanlarda gezinirken gezinmeyi ve menüyü yalnızca masaüstü uygulamalarındaki menülere benzer bir işlem listesi veya işlev listesi için kullanın. Bir sonraki Google Dokümanlar dosyasını oluşturmuyorsanız muhtemelen ana gezinme için menü rollerinin hiçbirine ihtiyacınız olmayacaktır.

Menü hangi durumlarda kullanılabilir?

Menü öğelerinin birincil kullanım amacı gezinme değil, işlem gerçekleştirmektir. Bir veri listeniz veya tablonuz olduğunu ve kullanıcıların listedeki her öğe üzerinde belirli işlemleri gerçekleştirebildiğini varsayalım. Her satıra bir düğme ekleyebilir ve kullanıcılar düğmeyi tıkladığında gerçekleştirecek 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 etkileri

Bu menü rollerini akıllıca kullanmak çok önemlidir, çünkü çok fazla sorun yaşanabilir.

Menülerde belirli bir DOM yapısı gerekir. menuitem, menu öğesinin doğrudan 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>

Deneyimli kullanıcılar, belirli klavye kısayollarının menülerle ve menü çubuklarıyla çalışmasını bekler. ARIA Yazma Uygulamaları Kılavuzu (APG) uyarınca şunları içerir:

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

Ekran okuyucu bir menü algılarsa yazılım, tarama modunu otomatik olarak değiştirerek daha önce bahsedilen kısayolların kullanımını etkinleştirebilir. Deneyimsiz ekran okuyucu kullanıcıları, bu kısayolları veya nasıl kullanacaklarını bilmedikleri için menüyü kullanamayabilirler.

Bu durum, Üst Karakter ve Üst Karakter + Sekme tuşlarını kullanabilme ihtimali olan klavye kullanıcıları için de geçerlidir.

Menü ve menü çubuğu oluştururken göz önünde bulundurmanız gereken pek çok nokta vardır. Öncelikle bunları kullanmanın uygun olup olmadığı son derece önemlidir. Tipik bir web sitesi oluştururken, bir liste ve bağlantılar içeren nav öğesi yalnızca yeterlidir. Tek Sayfalık Uygulamalar (SPA) veya web uygulamaları da buna dahildir. Temel yığın önemli değildir. Bir masaüstü uygulamasına çok yakın bir şey oluşturmuyorsanız menü rollerinden kaçının.

Ek Kaynaklar

• Scott O'hara'dan Fixing Listings
• Adrian Roselli'den Site Nav için ARIA Menü Rollerini Kullanma.
• Heydon Pickering'den Menüler ve Menü Düğmeleri.
• Marco Zehe'den WAI-ARIA menüleri ve bunları neden bu kadar dikkatli hazırlamanız gerektiği.
• Kitty Giraudel tarafından içeriği sorumlu bir şekilde gizleme.
• Matthias Ott - :focus-visible Is Here.

Mick Haupt'ın ana görseli