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

Bu eğiticide, bir web sitesinin erişilebilir ana gezinme bölümünün nasıl oluşturulacağı açıklanmaktadır. Anlamsal HTML, erişilebilirlik ve ARIA özelliklerini kullanmanın bazen faydadan çok zarar vermesi hakkında bilgi edineceksiniz.

Manuel Matuzović

Stil, işlevsellik, temel işaretleme ve anlamsal bilgiler açısından bir web sitesinin ana gezinme yapısını oluşturmanın 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ı mühendislik uygulanmışsa kullanıcıların kafası karışabilir, hatta erişmelerini engelleyebilir.

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

Katman bazında oluşturma

Bu eğitimde, temel bir kurulumla başlayacak ve birçok kullanıcıyı memnun edecek kadar bilgi, stil ve işlevsellik sunduğunuz noktaya kadar katman halinde özellik katmanı ekleyeceksiniz. Bunu başarmak için, en temel ve sağlam çözümle işe başladığınızı ve kademeli olarak işlev katmanları eklediğinizi belirten progresif geliştirme ilkesinden yararlanacaksınız. Bir katman herhangi bir nedenden dolayı çalışmazsa gezinme, alttaki katmana sorunsuz bir şekilde geri döndüğünden çalışmaya 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 yöntem, siteye nasıl eriştiğinden bağımsız olarak çoğu kullanıcı için iyi sonuç verir. Gezinmeye fare, klavye, dokunmatik cihaz veya ekran okuyucuyla erişilebiliyor, 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.
• Ekran okuyucu kullanıcılarına öğe sayısını duyurun.
• Ö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 gezinmeyi gizleyin.
• Odaklanma stilini iyileştirin.

Etkin sayfayı vurgula

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, ilgili bağlantının tamamen görsel olarak etkin olan bilgiyi iletmesidir. Görme engelli bir ekran okuyucu kullanıcısı, etkin sayfa ile diğer sayfalar arasındaki farkı anlayamıyor. Neyse ki Erişilebilir Zengin İnternet Uygulamaları (ARIA) standardı bu bilgileri anlamsal olarak iletmenin bir yolunu da sunar. Bir sınıf yerine aria-current="page" özelliğini ve değerini kullanın.

aria-current (durum), bir kapsayıcı veya ilgili öğeler grubu içindeki geçerli öğeyi temsil eden öğeyi gösterir. Sayfalara ayırma bağlantıları kümesi içindeki bir bağlantıyı belirtmek için kullanılan ve bağlantının görüntülenmekte olan sayfayı temsil edecek şekilde 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 özellikle birlikte ekran okuyucular artık "geçerli sayfa, bağlantı, Hakkımızda" gibi bir şey okuyacak. "Hakkımızda bağlantı oluşturun" gibi ifadeler kullanabilirsiniz.

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

Kullanışlı bir yan etki olarak, CSS'de etkin bağlantıyı seçmek için özelliği kullanabilir ve active-page sınıfını geçersiz kılabilirsiniz.

<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örme engelli kullanıcılar gezinme menüsüne bakarak içeriğin yalnızca dört bağlantı içerdiğini anlayabilir. Görme engelli ekran okuyucu kullanıcıları bu bilgileri çok kısa sürede edinemez. Tüm bağlantı listesinde ilerlemeleri gerekebilir. Liste bu örnekteki gibi kısaysa bu bir sorun olmayabilir ancak 40 bağlantı içeriyorsa bu görev zahmetli olabilir. Bir ekran okuyucu kullanıcısı gezinmede çok sayıda bağlantı olduğunu önceden bilirse, site araması 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ı bir liste öğesinde (<li>) sarmalayıp sıralanmamış bir liste (<ul>) içine 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>

Ekran okuyucu kullanıcısı listeyi bulduğunda, yazılımı "liste, 4 öğe" gibi bir duyuru yapar.

Windows'da NVDA ekran okuyucusuyla kullanılan gezinmenin demosunu aşağıda 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;
}

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

• Öğelerle etkileşime geçmeden önce toplam öğe sayısını öğrenebilirler.
• Liste öğesinden liste öğesine atlamak için kısayollardan yararlanabilirler.
• Listeden listeye atlamak için kısayollardan yararlanabilirler.
• Ekran okuyucu, geçerli öğenin dizinini (örneğin, "liste öğesi, dört öğeden ikisi") duyurabilir.

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

Safari'de VoiceOver'la ilgili önemli bir nokta, list-style: none öğesini ayarladığınızda tüm bu avantajları kaybetmenizdir. Bu, tasarımdan kaynaklanmaktadır. WebKit ekibi, bir liste liste gibi görünmediğinde liste anlamını kaldırmaya karar verdi. Gezinme sürecinizin karmaşıklığına bağlı olarak, bu bir sorun olabilir veya olmayabilir. Bir yandan, gezinme özelliği hâlâ kullanılabilir durumda ve bu sorun yalnızca Safari'deki VoiceOver'ı etkiliyor. 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 gezinmeyi gerçek ekran okuyucu kullanıcılarıyla test etmeli ve onların geri bildirimlerini almalısınız. 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, liste stilini kaldırmadan önceki davranışı geri 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

Biraz çaba göstererek ekran okuyucu kullanıcıları için büyük iyileştirmeler yaptınız, ancak yapabileceğiniz bir şey daha var. Gezinme, anlam açısından hala sadece bir bağlantı listesidir ve bu özel listenin web sitenizin ana gezinme bölümü olduğunu söylemek zordur. <ul> öğesini bir <nav> öğesi içinde sarmalayarak bu sıradan listeyi gezinme listesine dönüştürebilirsiniz.

<nav> öğesini kullanmanın birçok avantajı 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. Bir sayfada önemli noktalar 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ığı için yararlı olabilir. Örneğin, NVDA'da D tuşuna basarak önemli noktadan önemli bir 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: banner <header> öğesi, gezinme <nav>, ana <main> öğesi ve içerik bilgisi <footer>. Bu liste çok uzun olmamalıdır. Site arama, yerel gezinme veya sayfalara ayırma gibi kullanıcı arayüzünüzün yalnızca önemli kısımlarını önemli noktalar olarak işaretlemek isteyebilirsiniz.

Site genelinde gezinme, sayfa için yerel gezinme ve tek bir sayfada sayfalara ayırma özelliğine sahipseniz 3 <nav> öğeniz de olabilir. Sorun değil, ancak şimdi üç tane gezinme önemli noktası var ve semantik olarak hepsi aynı görünüyor. Sayfanın yapısını çok iyi bilmezseniz bunları ayırt etmeniz zordur.

Ayırt edilebilir hale getirmek için aria-labelledby veya aria-label ile 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 sayfada zaten bir yerde bulunuyorsa 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. "Navigasyon" gibi ifadeleri atlayın veya "menü" Çünkü ekran okuyucu, kullanıcılara bu bilgileri zaten sağlar.

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 görür. veya hamburger simgesi ya da bunların kombinasyonu olabilir. Düğmeyi tıkladığınızda liste gösterilir ve gizlenir. Temel JavaScript ve CSS'yi biliyorsanız bu yapılabilir bir görevdir, ancak kullanıcı deneyimi ve erişilebilirlik ile ilgili olarak ilgilenmeniz gereken birkaç şey vardır.

• Listeyi erişilebilir bir şekilde gizlemeniz gerekir.
• Gezinme, klavyeden erişilebilir olmalıdır.
• Gezinme sistemi, görünür olup olmadığını belirtmelidir.

Hamburger düğmesi ekleme

Progresif geliştirme ilkesini kullandığınız için, JavaScript kapalıyken bile gezinmenizin çalışmaya devam ettiğinden ve sorunsuz çalıştığından emin olmak istersiniz.
Gezinmeniz için ilk gereken şey bir hamburger düğmesidir. Bunu HTML'de bir şablon öğesinde oluşturur, JavaScript'te klonlayıp 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 hamburger simgesinin metin alternatifi olan erişilebilir bir ad verir.
3. <svg>, aria-label tarafından sağlanan bir metin etiketine sahip olduğundan aria-hidden kullanarak bu yardımcı teknolojiden gizleniyorsunuz.
4. aria-controls, düğmenin kontrol ettiği öğeyi (ör. JAWS) destekleyen yardımcı teknolojiye bilgi verir.

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, örneğin Escape tuşuna basarak gezinmeyi istedikleri zaman kapatabilirler.
2. Düğmenin gezinmenizdeki ilk öğe olması gerektiğinden, appendChild yerine insertBefore kullanılması ö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 geçerli değildir.

Daha sonra, düğmenin varsayılan stilini sıfırlar ve düğmenin 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 ve listenin konumunu ve stilini, dar görüntü alanları için optimize edilecek ancak büyük ekranlarda da iyi görünecek şekilde konumlandırın ve biçimlendirin.
. İlk olarak <nav> öğesini sayfanın doğal akışından kaldırın ve görüntü alanının üst uç 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;
}

Daha sonra 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;
}

Dar görüntü alanlarında gezinmeniz aşağıdaki gibi görünmelidir.

Listenin CSS'ye ihtiyacı olduğu belli. Bunu en üst köşeye taşıyacak, tüm ekranı dikey olarak dolduracak ve 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, basit bir listeden çok bir kenar çubuğu gibi, dar görüntü alanlarında buna benzer olmalıdır.

Son olarak, listeyi gizleyin. Listeyi yalnızca kullanıcı düğmeyi bir kez tıkladığında gösterin ve tekrar tıkladığında gizleyin. Gezinme bölmesinin gizlenmesi önemli bir yer işaretinin de gizlenmesi anlamına geleceğinden, gezinme bölümünün 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ö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. Dolayısıyla bağlantılar görünmez olur, ancak klavye kullanılarak yine de erişilebilir olur. Bu da kafa karıştırıcı ve can sıkıcı olabilir. visibility veya display kullanıldığında öğe görsel olarak gizlenir ve erişilemez hale gelir, bu nedenle tüm kullanıcılar için gizlenir.

Listeye animasyon ekleme

display: none; yerine visibility: hidden; platformunu neden kullanmanız gerektiğini merak ediyorsanız bunun nedeni görünürlük animasyonu uygulayabilmenizdir. 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'de opacity geçişini yaparak kararma ve kararma efekti oluşturulur.

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 bulantı, baş dönmesi ve baş ağrısı tetikleyebileceği için transition özelliğini azaltılmış hareket tercih eder medya sorgusuna sarmalamanız gerekir.

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

Böylece, animasyonu yalnızca azaltılmış hareketi tercih etmeyen kullanıcılar görecektir.

Odaklanma stilini iyileştirin

Klavye kullanıcıları, bir sayfada yön ve gezinme için öğelerin odak stillerini kullanır. Varsayılan odak stilleri, hiç odak stili bulunmamasından daha iyidir (outline: none değerini ayarlarsanız bu durum gerçekleşir). Ancak özel odak stillerinin daha net görünür olması kullanıcı deneyimini iyileştirir.

Chrome 103'te bağlantıdaki varsayılan odaklama stillerinin görünümü aşağıda verilmiştir.

Kendi renklerinizi kullanarak kendi stillerinizi sağlayarak bunu artırabilirsiniz. :focus yerine :focus-visible kullandığınızda, odak stillerini göstermenin ne zaman uygun olacağına tarayıcının karar vermesine izin verirsiniz. :focus stilleri, ihtiyaç duymaları fark etmeksizin 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

Odaklandıkları öğ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. İyi çalışmayan özellikler, özel kontrast ayarlarıyla hiç görüntülenmeyebileceği için background-color veya box-shadow'dır.

Tebrikler! Gittikçe iyileştirilmiş, anlam açısından zengin, erişilebilir ve mobil uyumlu bir ana gezinme sistemi oluşturdunuz.

Her zaman iyileştirilebilecek bir şeyler 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 olanak tanımak için sayfanın üst kısmına 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. Bununla birlikte, gezinmeye fazla mühendislik uygulamak mümkündür.

Gezinmeler ve menüler

Gezinmeler ile 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ş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. Böyle bir durumda ARIA rollerini birleştirmemeniz, bunun yerine bileşeninizin ana amacını belirlemeniz ve işaretlemeyi ve rolleri buna göre seçmeniz önemlidir.

<nav> öğesi, öğenin bir gezinme olduğunu belirtmek için yeterli olan örtülü bir gezinme rolüne sahiptir ancak sitelerin genellikle menü, menü çubuğu ve menü öğesini de kullandığını görürsünüz. Bazen bu terimler birbirinin yerine kullanılır. Bu nedenle, ekran okuyucu kullanıcılarına daha iyi bir deneyim sunmak için bu terimleri birlikte kullanmak mantıklı olabilir. Bunun genellikle neden yaşanmadığını öğrenmeden önce bu rollerin resmi tanımlarına göz atalım.

Gezinme rolü

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

navigasyon (rol) WAI-ARIA 1.1

Menü rolü

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

menü (rol) WAI-ARIA 1.1

Menü çubuğu rolü

Genellikle görünür kalan ve 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ü

Bir menü veya menü çubuğu tarafından yer alan bir seçenek grubu içindeki bir seçenektir.

menuitem (rol) WAI-ARIA 1.1

Buradaki spesifikasyon çok nettir. Dokümanda veya ilgili dokümanlarda ve menüde gezinmek için gezinmeyi yalnızca masaüstü uygulamalarındaki menülere benzeyen işlem veya işlev listesi için kullanın. Bir sonraki Google Dokümanlar dosyasını oluşturamıyorsanız muhtemelen ana gezinme için menü rollerinin hiçbirine ihtiyacınız yoktur.

Menü ne zaman uygun olur?

Menü öğelerinin birincil kullanımı gezinme değil, işlemleri gerçekleştirmektir. Bir veri listeniz veya tablonuz olduğunu ve kullanıcıların listedeki her bir öğe için 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 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

Pek çok hata ters gidebileceği için bu menü rollerini akıllıca kullanmak gerçekten önemlidir.

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'na (APG) göre bu bilgiler şunları içerir:

• Menü öğelerini seçmek için Enter ve Boşluk tuşlarına basın.
• Öğeler arasında gezinmek için her yöndeki ok tuşları.
• 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şlarına basın.
• Menüyü kapatmak için Esc tuşuna basın.

Ekran okuyucu bir menü algılarsa yazılım, göz atma 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 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üler ve menü çubukları oluştururken göz önünde bulundurulması gereken çok nokta vardır. Her şeyden önce bunları kullanmanın uygun olup olmadığı göz önünde bulundurulur. Normal bir web sitesi oluştururken ihtiyacınız olan tek şey bir liste ve bağlantılar içeren gezinme öğesidir. Buna Tek Sayfalık Uygulamalar (SPA) veya web uygulamaları da 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'nın Fixing Lists (Listeleri Düzeltme).
• Adrian Roselli tarafından geliştirilen Site Nav için ARIA Menü Rollerini Kullanma
• Menüler ve Menü Düğmeleri: Heydon Pickering.
• Marco Zehe'den WAI-ARIA menüleri ve bu menüleri neden büyük özenle işlemeniz gerektiği.
• Kitty Giraudel'den içerikleri sorumlu bir şekilde gizleme
• Matthias Ott, :focus-visible Is Here

Mick Haupt'ın hero resmi