İçerik haritası bileşeni oluşturma

Kullanıcıların sitenizde gezinmesi için duyarlı ve erişilebilir bir ekmek kırıntısı bileşeni oluşturma hakkında temel bilgiler.

Adam Argyle

Bu yayında, gezinme yolu bileşenleri oluşturma yöntemleriyle ilgili düşüncelerimi paylaşmak istiyorum. Demoyu deneyin.

Demo

Video tercih ediyorsanız bu yayının YouTube versiyonunu aşağıda bulabilirsiniz:

Genel Bakış

İçerik haritası bileşeni, kullanıcının site hiyerarşisinde nerede olduğunu gösterir. Adını, Hansel ve Gretel'den alır. Bu karakterler, karanlık bir ormanda arkalarında içerik haritası bırakarak evlerine geri dönebilmişlerdir.

Bu yayındaki ekmek kırıntıları standart ekmek kırıntıları değil, ekmek kırıntılarına benzer. Kardeş sayfaları <select> ile doğrudan gezinme menüsüne yerleştirerek ek işlevler sunar ve çok katmanlı erişimi mümkün kılar.

Arka plan kullanıcı deneyimi

Yukarıdaki bileşen demo videosunda, yer tutucu kategoriler video oyunu türleridir. Bu iz, aşağıda gösterildiği gibi home » rpg » indie » on sale yolunu izleyerek oluşturulur.

Bu ekmek kırıntısı bileşeni, kullanıcıların bu bilgi hiyerarşisinde hareket etmesini, dallar arasında geçiş yapmasını ve sayfaları hızlı ve doğru bir şekilde seçmesini sağlamalıdır.

Bilgi mimarisi

Koleksiyonlar ve öğeler açısından düşünmenin faydalı olduğunu düşünüyorum.

Koleksiyonlar

Koleksiyon, aralarından seçim yapabileceğiniz bir seçenekler dizisidir. Bu yayının izlenecek yol prototipinin ana sayfasında koleksiyonlar FPS, RYO, dövüş oyunu, zindan keşif oyunu, spor ve bulmaca olarak sıralanıyor.

Öğe sayısı

Video oyunu bir öğedir. Belirli bir koleksiyon, başka bir koleksiyonu temsil ediyorsa da öğe olabilir. Örneğin, RPG bir öğe ve geçerli bir koleksiyondur. Öğe söz konusu olduğunda kullanıcı, ilgili koleksiyon sayfasındadır. Örneğin, AAA, bağımsız ve kendi kendine yayınlanan ek alt kategorilerini içeren bir RYO oyunları listesinin gösterildiği RYO sayfasında yer alırlar.

Bilgisayar bilimi açısından bu izleme yolu bileşeni bir çok boyutlu diziyi temsil eder:

const rawBreadcrumbData = {
  "FPS": {...},
  "RPG": {
    "AAA": {...},
    "indie": {
      "new": {...},
      "on sale": {...},
      "under 5": {...},
    },
    "self published": {...},
  },
  "brawler": {...},
  "dungeon crawler": {...},
  "sports": {...},
  "puzzle": {...},
}

Uygulamanız veya web siteniz, farklı bir çok boyutlu dizi oluşturan özel bir bilgi mimarisine (IA) sahip olacak. Ancak, koleksiyon açılış sayfaları ve hiyerarşi geçişi kavramının ekmek kırıntılarınıza da dahil edilebileceğini umuyorum.

Düzenler

Brüt kar

İyi bileşenler uygun HTML ile başlar. Bu sonraki bölümde, işaretleme seçimlerimden ve bunların genel bileşeni nasıl etkilediğinden bahsedeceğim.

Koyu ve açık renk şeması

<meta name="color-scheme" content="dark light">

Yukarıdaki snippet'te yer alan color-scheme meta etiketi, tarayıcıya bu sayfanın açık ve koyu tarayıcı stillerini istediğini bildirir. Örnek ekmek kırıntıları, bu renk şemaları için herhangi bir CSS içermediğinden ekmek kırıntıları, tarayıcı tarafından sağlanan varsayılan renkleri kullanır.

Gezinme öğesi

<nav class="breadcrumbs" role="navigation"></nav>

Site gezinmesi için <nav> öğesinin kullanılması uygundur. Bu öğe, navigation ARIA rolüne sahiptir. Test sırasında, role özelliğinin, ekran okuyucunun öğeyle etkileşim şeklini değiştirdiğini fark ettim. Bu özellik, aslında gezinme olarak duyuruluyordu. Bu nedenle, özelliği eklemeyi tercih ettim.

Simgeler

Bir sayfada tekrar eden simgeler olduğunda SVG <use> öğesi, path öğesini bir kez tanımlayabileceğiniz ve simgenin tüm örnekleri için kullanabileceğiniz anlamına gelir. Bu, aynı yol bilgilerinin tekrarlanmasını önleyerek daha büyük belgeler oluşturulmasını ve yol tutarsızlığı olasılığını engeller.

Bu tekniği kullanmak için sayfaya gizli bir SVG öğesi ekleyin ve simgeleri benzersiz bir kimliğe sahip <symbol> öğesine sarın:

<svg style="display: none;">

  <symbol id="icon-home">
    <title>A home icon</title>
    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
  </symbol>

  <symbol id="icon-dropdown-arrow">
    <title>A down arrow</title>
    <path d="M19 9l-7 7-7-7"/>
  </symbol>

</svg>

Tarayıcı, SVG HTML'yi okur, simge bilgilerini belleğe yerleştirir ve sayfanın geri kalanına simgenin ek kullanımları için kimliğe referans vererek devam eder. Örneğin:

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <use href="#icon-home" />
</svg>

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <use href="#icon-dropdown-arrow" />
</svg>

Oluşturulmuş bir SVG use öğesini gösteren DevTools.

Bir kez tanımlayın, istediğiniz kadar kullanın. Sayfa performansı üzerindeki etkisi minimum düzeydedir ve esnek stil oluşturma imkanı sunar. SVG öğesine aria-hidden="true" eklendiğini fark edin. Yalnızca içeriği dinleyen bir kullanıcı için simgeler faydalı değildir. Bu nedenle, simgeleri gizleyerek gereksiz gürültü eklenmesini önleyebilirsiniz.

Bölünmüş bağlantı `.crumb`

Geleneksel ekmek kırıntısı ve bu bileşendeki ekmek kırıntısı burada ayrışır. Normalde bu yalnızca bir <a> bağlantısı olurdu ancak gizlenmiş bir seçimle geçiş kullanıcı deneyimi ekledim. .crumb sınıfı bağlantıyı ve simgeyi yerleştirmekten, .crumbicon sınıfı ise simgeyi ve seçili öğeyi birlikte yığınlamaktan sorumludur. İşlevleri bölünmüş düğmeye çok benzediği için bu düğmeye bölünmüş bağlantı adını verdim. Ancak bu düğme sayfa gezinmesi için kullanılır.

<span class="crumb">
  <a href="#sub-collection-b">Category B</a>
  <span class="crumbicon">
    <svg>...</svg>
    <select class="disguised-select" title="Navigate to another category">
      <option>Category A</option>
      <option selected>Category B</option>
      <option>Category C</option>
    </select>
  </span>
</span>

Bağlantı ve bazı seçenekler özel bir şey olmasa da basit bir gezinme yoluna daha fazla işlevsellik katar. <select> öğesine title eklemek, ekran okuyucu kullanıcıları için faydalıdır. Bu kullanıcılar, düğmenin işlemi hakkında bilgi edinir. Ancak bu özellik, diğer tüm kullanıcılara da aynı yardımı sunar. Bu özelliği iPad'de ön planda ve merkezde görebilirsiniz. Bir özellik, birçok kullanıcıya düğme bağlamı sağlar.

Görünmez seçim öğesinin üzerine gelindiği ve bağlama duyarlı ipucunun gösterildiği ekran görüntüsü.

Ayırıcı süslemeler

<span class="crumb-separator" aria-hidden="true">→</span>

Ayırıcılar isteğe bağlıdır. Yalnızca bir ayırıcı eklemek de işe yarar (yukarıdaki videodaki üçüncü örneğe bakın). Ardından, dekoratif oldukları ve ekran okuyucunun okuması gereken bir şey olmadıkları için her aria-hidden="true" öğesine boşluk veriyorum.

Bir sonraki bölümde ele alınan gap özelliği, bu aralığı kolaylaştırır.

Stiller

Renk sistem renklerini kullandığından stiller için çoğunlukla boşluklar ve yığınlar bulunur.

Düzen yönü ve akışı

DevTools, içerik haritası gezinme hizalamasını flexbox yerleşimi özelliğiyle gösteriyor.

Birincil gezinme öğesi nav.breadcrumbs, alt öğelerin kullanması için kapsamlı bir özel özellik ayarlar ve aksi takdirde dikey olarak hizalanmış yatay bir düzen oluşturur. Bu sayede, ekmek kırıntıları, ayırıcılar ve simgeler hizalanır.

.breadcrumbs {
  --nav-gap: 2ch;

  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding: calc(var(--nav-gap) / 2);
}

Flexbox katmanlarıyla dikey olarak hizalanmış bir içerik haritası gösteriliyor.

Her .crumb, dikey olarak hizalanmış ve aralarında boşluk olan bir yatay düzen oluşturur ancak özellikle bağlantı alt öğelerini hedefler ve stili white-space: nowrap olarak belirtir. Bu, çok satırlı olmalarını istemediğimiz için çok kelimeli içerik haritaları için çok önemlidir. Bu yayının ilerleyen bölümlerinde, bu white-space özelliğinin neden olduğu yatay taşmayı işlemek için stiller ekleyeceğiz.

.crumb {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nav-gap) / 4);

  & > a {
    white-space: nowrap;

    &[aria-current="page"] {
      font-weight: bold;
    }
  }
}

Geçerli sayfa bağlantısının diğerlerinden öne çıkmasına yardımcı olmak için aria-current="page" eklenir. Ekran okuyucu kullanıcıları, bağlantının geçerli sayfaya ait olduğunu net bir şekilde anlayacak. Ayrıca, görme engelli olmayan kullanıcıların benzer bir kullanıcı deneyimi elde etmesine yardımcı olmak için öğeyi görsel olarak şekillendirdik.

.crumbicon bileşeni, SVG simgesini "neredeyse görünmez" bir <select> öğesiyle üst üste yerleştirmek için ızgarayı kullanır.

Satır ve sütunun her ikisinin de yığın olarak adlandırıldığı bir düğmenin üzerinde gösterilen Izgara DevTools.

.crumbicon {
  --crumbicon-size: 3ch;

  display: grid;
  grid: [stack] var(--crumbicon-size) / [stack] var(--crumbicon-size);
  place-items: center;

  & > * {
    grid-area: stack;
  }
}

<select> öğesi DOM'da en son olduğundan yığının en üstünde yer alır ve etkileşimlidir. Öğenin kullanılabilirliğini korumak için opacity: .01 stili ekleyin. Sonuç, simgenin şekline mükemmel şekilde uyan bir seçim kutusu olur. Bu, yerleşik işlevselliği korurken <select> öğesinin görünümünü özelleştirmek için iyi bir yöntemdir.

.disguised-select {
  inline-size: 100%;
  block-size: 100%;
  opacity: .01;
  font-size: min(100%, 16px); /* Defaults to 16px; fixes iOS zoom */
}

Taşma

Ekmek kırıntıları çok uzun bir yolu temsil edebilmelidir. Gerekli durumlarda öğelerin yatay olarak ekranın dışına çıkmasına izin verilmesini tercih ediyorum ve bu izleme yolu bileşeninin bu koşulu iyi karşıladığını düşünüyorum.

.breadcrumbs {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: calc(var(--nav-gap) / 2);

  & > .crumb:last-of-type {
    scroll-snap-align: end;
  }

  @supports (-webkit-hyphens:none) { & {
    scroll-snap-type: none;
  }}
}

Taşma stilleri aşağıdaki kullanıcı deneyimini oluşturur:

Aşırı kaydırma sınırlamasıyla yatay kaydırma.
Yatay kaydırma dolgusu.
Son kırıntıda bir tutturma noktası. Bu, sayfa yüklendiğinde ilk küçük resmin görünür şekilde yüklendiği anlamına gelir.
Yatay kaydırma ve tutturma efekti kombinasyonlarında sorun yaşayan Safari'den tutturma noktasını kaldırır.

Medya sorguları

Daha küçük görüntü alanları için "Ana Sayfa" etiketini gizleyerek yalnızca simgeyi bırakmak ince bir ayarlamadır:

@media (width <= 480px) {
  .breadcrumbs .home-label {
    display: none;
  }
}

Karşılaştırma için ana sayfa etiketi olan ve olmayan ekmek kırıntılarının yan yana gösterimi.

Erişilebilirlik

Hareket

Bu bileşende çok fazla hareket olmasa da geçişi bir prefers-reduced-motion kontrolüyle sarmalayarak istenmeyen hareketleri önleyebiliriz.

@media (prefers-reduced-motion: no-preference) {
  .crumbicon {
    transition: box-shadow .2s ease;
  }
}

Diğer stillerin hiçbirinin değiştirilmesi gerekmiyor. Fareyle üzerine gelme ve odaklanma efektleri, transition olmadan harika ve anlamlı. Ancak hareket uygunsa etkileşime ince bir geçiş ekleyeceğiz.

JavaScript

Öncelikle, sitenizde veya uygulamanızda kullandığınız yönlendiricinin türünden bağımsız olarak, kullanıcı ekmek kırıntılarını değiştirdiğinde URL'nin güncellenmesi ve kullanıcıya uygun sayfanın gösterilmesi gerekir. İkincisi, kullanıcı deneyimini normalleştirmek için kullanıcılar yalnızca <select>seçeneklere göz atarken beklenmedik gezinmelerin gerçekleşmediğinden emin olun.

JavaScript tarafından işlenecek iki kritik kullanıcı deneyimi ölçümü: select has changed ve eager <select> change event firing prevention.

<select> öğesi kullanıldığı için erken etkinlik önleme gereklidir. Windows Edge'de ve muhtemelen diğer tarayıcılarda da kullanıcı klavyeyle seçeneklere göz atarken select changed event tetiklenir. Bu nedenle, kullanıcı seçeneği yalnızca sözde olarak seçtiği (ör. fareyle üzerine gelme veya odaklanma) ancak seçimi enter veya click ile onaylamadığı için bu seçeneğe "istekli" adını verdim. İstekli etkinlik, bu bileşen kategorisi değiştirme özelliğine erişimi engeller. Çünkü kullanıcı hazır olmadan önce, seçim kutusunun açılması ve bir öğeye göz atılması etkinliği tetikleyip sayfayı değiştirir.

Daha iyi bir `<select>` değiştirilen etkinlik

const crumbs = document.querySelectorAll('.breadcrumbs select')
const allowedKeys = new Set(['Tab', 'Enter', ' '])
const preventedKeys = new Set(['ArrowUp', 'ArrowDown'])

// watch crumbs for changes,
// ensures it's a full value change, not a user exploring options via keyboard
crumbs.forEach(nav => {
  let ignoreChange = false

  nav.addEventListener('change', e => {
    if (ignoreChange) return
    // it's actually changed!
  })

  nav.addEventListener('keydown', ({ key }) => {
    if (preventedKeys.has(key))
      ignoreChange = true
    else if (allowedKeys.has(key))
      ignoreChange = false
  })
})

Bu stratejide, her <select> öğesinde klavye tuşuna basma etkinlikleri izlenir ve basılan tuşun gezinme onayı (Tab veya Enter) mı yoksa uzamsal gezinme (ArrowUp veya ArrowDown) tuşu mu olduğu belirlenir. Bu belirleme sayesinde, <select> öğesi için etkinlik tetiklendiğinde bileşen beklemeye veya devam etmeye karar verebilir.

Sonuç

Bunu nasıl yaptığımı öğrendiğinize göre, siz nasıl yapardınız?‽ 🙂

Yaklaşımlarımızı çeşitlendirelim ve web'de içerik oluşturmanın tüm yollarını öğrenelim. Bir demo oluşturun, bağlantıları bana tweet atın. Ben de bu bağlantıları aşağıdaki topluluk remiksleri bölümüne ekleyeyim.

Topluluk remiksleri

Web bileşeni olarak Tux Solbakk: demo ve kod