İçerik haritası bileşeni oluşturma

Kullanıcıların sitenizde gezinmesi için duyarlı ve erişilebilir bir içerik haritası bileşeni oluşturmaya dair temel bir genel bakış.

Adam Argyle

Bu gönderide, içerik haritası bileşenlerini oluşturmanın bir yolu üzerine düşüncelerimi paylaşmak istiyorum. Demoyu deneyin.

Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:

Genel Bakış

İçerik haritaları bileşeni, nerede olduğunu gösterir. Adı Hansel ve Gretel, bırakan bu karanlık ormanlarda uyuşturucu kırıntıları vardı ve evin yolunu geriye doğru izleyerek bunu yapabilirsiniz.

Bu gönderideki içerik haritaları standart değildir. içerik haritaları, içerik haritasına benzer. Eşdüzey öğeye yer vererek ek işlevler sunarlar. <select> ile sayfaların doğrudan gezinme imkânına ulaşmasını sağlayarak çok katmanlı erişim yapmasını sağlar.

Arka plan kullanıcı deneyimi

Yukarıdaki bileşen demo videosunda yer tutucu kategoriler şu türlerdir: video oyunları. Bu patika, aşağıda gösterildiği gibi home » rpg » indie » on sale yolunda gidilerek oluşturulur.

Bu içerik haritası bileşeni, kullanıcıların bu sayfada bilgi hiyerarşisi; hızlı bir şekilde ve hızlı bir şekilde dallara atlayıp sayfaları seçerek emin olun.

Bilgi mimarisi

Koleksiyonlar ve öğeler açısından düşünmeyi faydalı buluyorum.

Koleksiyonlar

Koleksiyon, aralarından seçim yapabileceğiniz bir dizi seçenektir. Şu sayfanın ana sayfasından: Bu yayının içerik haritası prototipini oluşturuyorsunuz. Koleksiyonlar arasında FPS, RPG, kavga zindan tarayıcısı, spor ve bulmaca.

Öğe sayısı

Video oyunu bir öğedir. Belirli bir koleksiyon da öğe olabilir. başka bir koleksiyonu temsil eder. Örneğin, RYO bir öğe ve geçerli bir koleksiyonudur. Öğe olduğunda kullanıcı bu koleksiyon sayfasındadır. Örneğin, RPG sayfasında bulunuyor. Burada, RPG oyunlarının bir listesi yer alıyor. AAA, Bağımsız ve Self Yayınlanan ek alt kategorileri var.

Bilgisayar bilimleri terimlerinde, bu içerik haritası bileşeni bir çok boyutlu dizi:

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

Uygulamanız veya web siteniz, özel bilgi mimarisi (IA) ile çok boyutlu bir diziyi içeriyor. Umarım koleksiyon sonuca sayfa ve hiyerarşi geçişi de içerik haritalarınıza dahil edilebilir.

Düzenler

Brüt kar

İyi bileşenler uygun HTML ile başlar. Bu bölümde, proje yönetimiyle ilgili işaretleme seçeneklerini ve bunların genel bileşeni nasıl etkilediğini açıklayacağız.

Koyu ve açık şema

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

Yukarıdaki color-scheme meta etiketi snippet, tarayıcıya bu sayfanın açık ve koyu renkli tarayıcı istediğini bildirir stillerini ayarlayın. Örnek içerik haritaları bu renk şemaları için herhangi bir CSS içermez. Bu nedenle, hesapta görüntülenen yeri gösteren bağlantılar tarayıcı tarafından sağlanan varsayılan renkleri kullanır.

Gezinme öğesi

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

Bilgi edinmek için <nav> öğe yardımcı olur. Bu dönüşüm için dolaylı ARIA gezinme. Test sırasında, role özelliğine sahip olmanın bir web sitesi öğeyle etkileşime girdiği için bundan böyle bu yüzden onu eklemeyi seçtim.

Simgeler

Bir simge bir sayfada tekrarlandığında, SVG <use> öğe path öğesini bir kez tanımlayabilir ve bunu tüm reklam örnekleri için simgesini tıklayın. Bu, aynı yol bilgilerinin tekrarlanmasını önleyerek ve yol tutarsızlığı potansiyeli anlamına gelir.

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

<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'sini okur, simge bilgisini belleğe yerleştirir ve sayfanın geri kalanında, başka kullanımlar için kimliği referans alan simge şu şekilde görünür:

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

Sayfa performansını en az düzeyde etkileyerek bir kez tanımlayın ve istediğiniz kadar kullanın. ve esnek bir stil sağlar. SVG öğesine aria-hidden="true" eklendiğine dikkat edin. Simgeler, yalnızca içeriği duyan, göz atan ve gizlenen bir kullanıcının gereksiz gürültü eklemelerini engeller.

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

Geleneksel içerik haritası ile bu bileşendekiler burada ayrılır. Normalde bu yalnızca bir <a> bağlantısı olurdu ancak ben gizli seçimdir. .crumb sınıfı, bağlantıyı düzenlemekten ve .crumbicon simgesi ise simgeyi yığmaktan sorumludur. birlikte çalışır. İşlevleri çok büyük olduğu için buna bölünmüş bağlantı bölünmüş düğmeye benzer, yalnızca sayfada gezinme için geçerlidir.

<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 değildir ancak içerik haritası oluşturur. <select> öğesine title eklemek ekran açısından faydalı Okuyucu kullanıcıları'nı kullanarak, düğmenin hareketleri hakkında bilgi verebilirler. Ancak o diğer herkese de aynı yardımı sağlıyorsa bu projenin iPad'e dokunun. Bir özellik, birçok kullanıcıya düğme bağlamı sağlar.

Ayırıcı süslemeleri

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

Ayırıcılar isteğe bağlıdır, yalnızca bir tanesi eklemek de çok işe yarar (Videodaki üçüncü örneğe bakın.) bölümüne bakın). Dekoratif değil ve dekoratif olduğundan her bir aria-hidden="true" öğesini ayrı ayrı veriyorum ekran okuyucunun duyurması gereken bir şey olabilir.

Bir sonraki adımda ele alınacak olan gap özelliği, bu boşlukların basit şekilde ayarlanmasını sağlar.

Stiller

Renk, sistem renklerini kullandığından stiller için çoğunlukla boşluklar ve yığınlardan oluşur.

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

nav.breadcrumbs birincil gezinme öğesi, kapsamlı bir özel mülk ayarlar görüntüler veya yatay olarak dikey olarak hizalı kullanır. Bu şekilde 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);
}

Her .crumb ayrıca bazı öğeler için yatay olarak dikey olarak hizalanan bir düzen boşluk ekler, ancak özel olarak bağlantı alt öğelerini hedefler ve stili belirtir white-space: nowrap. Birden fazla kelimeden oluşan içerik haritaları için bu çok satırlı olmasını istiyorsunuz. Bu gönderinin ilerleyen bölümlerinde, bu white-space özelliğinde yatay taşma neden oldu.

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

  & > a {
    white-space: nowrap;

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

aria-current="page", mevcut sayfa bağlantısının öne çıkmasına yardımcı olmak için eklendi mola vermektir. Ekran okuyucu kullanıcıları, bağlantının sorunsuz bir şekilde öğeyi, gören kullanıcılara yardımcı olacak şekilde görsel olarak biçimlendirdik. benzer bir deneyim yaşarsınız.

.crumbicon bileşeni, bir SVG simgesini "yaklaşık olarak görünmez" <select> öğesi.

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

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

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

<select> öğesi, DOM'de son sırada olduğu için yığının en üstündedir. ve etkileşimlidir. Öğenin hâlâ kullanılabilir olması için opacity: .01 stili ekleyin. Sonuç olarak, simgenin şekline mükemmel şekilde uyan bir seçim kutusu ortaya çıkıyor. Bu, öğe otoritesine yer verirken bir <select> öğesinin görünümünü özelleştirmenin yerleşik işlevselliği sağlar.

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

Taşma

İçerik haritaları çok uzun bir yolu temsil edebilmelidir. Yalnızca YouTube'da şeylerin yatay olarak kaydırılması gerektiğini fark ettim. içerik haritası bileşeni iyi bir şekilde nitelikli.

.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 ayarlamıştır:

• Fazla kaydırma içeren yatay kaydırma.
• Yatay kaydırma dolgusu.
• Son harita üzerinde bir tutturma noktası. Bu, sayfa yüklendiğinde ilk kırıntı yüklemeleri tutturulup görüntülenir.
• Yatay düzenlemede sorun yaşayan, tutturma noktasını Safari'den kaldırır. kombinasyonlarını kullanabilirsiniz.

Medya sorguları

Daha küçük görüntü alanlarına yönelik ince bir düzenleme de "Ana Ekran"ı etiket, ayrılıyor yalnızca simgeyi görebilirsiniz:

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

Erişilebilirlik

Hareket

Bu bileşende çok fazla hareket yoktur; bunun yerine, prefers-reduced-motion kontrolündeyken istenmeyen hareketi engelleyebiliriz.

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

Diğer stillerin hiçbirinin değiştirilmesi gerekmez, fareyle üzerine gelme ve odaklama efektleri mükemmeldir ve transition olmadan da anlamlıdır, ancak hareket kabul edilirse, temsil eder.

JavaScript

Öncelikle, sitenizde veya uygulamanızda kullandığınız yönlendiricinin türünden bağımsız olarak, Kullanıcı içerik haritalarını değiştirdiğinde URL'nin güncellenmesi ve kullanıcı tarafından ilgili sayfa gösteriliyor. İkincisi, kullanıcı deneyimini normalleştirmek için Kullanıcılar yalnızca <select> sitesine göz atarken beklenmedik gezinmeler yaşanmaz seçenekleri vardır.

JavaScript tarafından ele alınacak iki kritik kullanıcı deneyimi önlemi: değiştirilmiş ve istekli <select> değişiklik etkinliği etkinleşme önleyicisi.

<select> kullanımı nedeniyle daha hızlı etkinlik önleme gerekiyor öğesine dokunun. Windows Edge'de ve muhtemelen diğer tarayıcılarda da changed Etkinlik, kullanıcı klavyeyle seçeneklere göz atarken tetiklenir. Bu nedenle kullanıcı, fareyle üzerine gelme gibi yalnızca sözde bir seçeneği belirlediğinden, bunu istekli olarak adlandırır. veya odağı henüz enter ya da click ile onaylamadı. İstekli etkinliği, bu bileşen kategorisi değişikliği özelliğine erişilemez hale gelir, çünkü seçim kutusunu açmak ve bir öğeye göz atmak, etkinliği tetikler ve sayfayı değiştirebilmelisiniz.

Daha iyi bir <select> değiştirilmiş 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
  })
})

Bunun stratejisi, her bir <select> klavyesinde klavye tuşuna basma etkinliklerini izlemektir. öğesi seçin ve basılan tuşun gezinme onayı (Tab veya Enter) veya konumsal gezinme (ArrowUp ya da ArrowDown). Bununla daha hassas bir şekilde gerçekleştirildiğinde, bileşen bu etkinlik <select> öğesi etkinleşiyor.

Sonuç

Şimdi bunu nasıl yaptığımı öğrendiğinize göre siz nasıl ‽ 🙂

Gelin, yaklaşımlarımızı çeşitlendirelim ve web'de içerik geliştirmenin tüm yollarını öğrenelim. Bir demo oluşturup beni tweet'le bağlantıları eklerim aşağıdaki topluluk remiksleri bölümüne gidin!

Topluluk remiksleri

• Web bileşeni olarak Tux Solbakk: demo ve kod