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ış.
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