Bu kural ne anlama geliyor

WCAG 2.4.8, kullanıcıların bir web sitesinin yapısı içindeki konumlarını belirleyebilmesini gerektirir. Bu, hangi sayfada olduklarını, o sayfanın site hiyerarşisi içinde nerede olduğunu ve ilgili içeriklere nasıl gideceklerini bilmeyi içerir. Yaygın teknikler arasında içerik kırıntısı yolları, vurgulanan gezinme öğeleri, site haritaları ve çok adımlı süreçlerdeki adım göstergeleri bulunur.

Bu, 2.4.5 (Birden Fazla Yol) gezinme temellerini genişleten bir AAA düzey kriterdir. 2.4.5 kullanıcıların sayfaları bulabilmesini sağlarken, 2.4.8 kullanıcıların her zaman nerede olduklarını bilmesini sağlar.

Neden önemlidir

Bilişsel engelli kullanıcılar karmaşık web sitelerinde gezinirken yönünü kaybedebilir. İçerik kırıntıları ve görsel konum göstergeleri bilişsel yükü azaltan sürekli yol bulma ipuçları sağlar. Ekran okuyucu kullanıcıları, gezinme menüsünün keşfini gerektirmeden site hiyerarşisinin özlü bir özetini sağladıkları için içerik kırıntılarından fayda görür.

Konum bilgisi ayrıca tüm kullanıcıların sitenin yapısını ve kapsamını anlamasına, gezinme hatalarından kurtulmasına ve üst veya kardeş bölümlere hızla geçmesine yardımcı olur.

İlgili axe-core kuralları

Bu kriter için otomatik axe-core kuralı yoktur. Konum göstergelerinin manuel incelemesi gerektirir.

Nasıl test edilir

Site hiyerarşisinin farklı düzeylerindeki birden fazla sayfaya gidin ve konum bilgisinin mevcut olduğunu doğrulayın.
İçerik kırıntısı yollarının sayfa hiyerarşisini doğru yansıttığını kontrol edin.
Mevcut sayfanın gezinme menüsünde vurgulandığını veya belirtildiğini doğrulayın.
Çok adımlı süreçlerde mevcut konumu gösteren bir adım göstergesini onaylayın.

İçerik kırıntılarının nav ve aria-label ile uygun semantik işaretleme kullandığını doğrulayın.
Bir ekran okuyucu ile test ederek konum bilgisinin duyurulduğunu onaylayın.

Nasıl düzeltilir

İçerik kırıntısı gezinmesi uygulayın, gezinmede mevcut sayfayı vurgulayın ve çok adımlı süreçlere adım göstergeleri ekleyin.

Schema.org ile içerik kırıntısı gezinmesi

<nav aria-label="İçerik kırıntısı">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">Ana Sayfa</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/bb"><span itemprop="name">Bilgi Bankası</span></a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name" aria-current="page">Konum</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

Gezinmede mevcut sayfa göstergesi

<nav aria-label="Ana gezinme">
  <ul>
    <li><a href="/">Ana Sayfa</a></li>
    <li><a href="/hizmetler">Hizmetler</a></li>
    <li><a href="/bb" aria-current="page">Bilgi Bankası</a></li>
    <li><a href="/iletişim">İletişim</a></li>
  </ul>
</nav>

<style>
[aria-current="page"] {
  font-weight: bold;
  border-bottom: 3px solid currentColor;
}
</style>

Çok adımlı süreç için adım göstergesi

<nav aria-label="İlerleme">
  <ol>
    <li aria-current="step">
      <span>Adım 1: Hesap bilgileri</span>
    </li>
    <li>
      <span>Adım 2: Site yapılandırması</span>
    </li>
    <li>
      <span>Adım 3: İnceleme ve onay</span>
    </li>
  </ol>
</nav>

Sık yapılan hatalar

Hiçbir sayfada içerik kırıntısı veya konum göstergesi olmaması, kullanıcıları yönelim ipuçları olmadan bırakmak.
Gerçek sayfa hiyerarşisini yansıtmayan veya yanlış yollar gösteren içerik kırıntıları.
Mevcut sayfanın diğer öğelerden görsel olarak ayırt edilmediği gezinme menüleri.
Mevcut sayfayı belirtmek için aria-current'in yanlış kullanılması veya hiç kullanılmaması.
Kullanıcının mevcut konumunu gösteren bir adım göstergesi olmayan çok adımlı süreçler.

2.4.8 Konum