उपयोगकर्ताओं को आपकी साइट पर नेविगेट करने में मदद करने के लिए, रिस्पॉन्सिव और ऐक्सेस किए जा सकने वाले ब्रेडक्रंब कॉम्पोनेंट बनाने के बारे में बुनियादी जानकारी.
इस पोस्ट में, मैं ब्रेडक्रंब कॉम्पोनेंट बनाने के तरीके के बारे में आपको बताना चाहती हूं. डेमो देखें.
अगर आपको वीडियो देखना है, तो इस पोस्ट का YouTube वर्शन यहां देखें:
खास जानकारी
ब्रेडक्रंब कॉम्पोनेंट दिखता है साइट के क्रम में उपयोगकर्ता कहां है. यह नाम हैंडल और ग्रेटेल, जिन्होंने अपनी कार छोड़ी गहरे रंग के किसी जंगल में उनके पीछे रखे ब्रेडक्रंब और उन्हें घर का रास्ता मिल गया था टुकड़ों को पीछे की ओर ट्रेस करेंगे.
इस पोस्ट में मौजूद ब्रेडक्रंब मानक नहीं हैं
ब्रेडक्रंब,
तो वे ब्रेडक्रंब जैसे होते हैं. वे सिबलिंग को जोड़कर अतिरिक्त सुविधाएं देते हैं
पेजों को सीधे नेविगेशन में रखने के लिए, <select> के साथ कई लेवल वाला ऐक्सेस उपलब्ध कराता है
किया जा सकता है.
बैकग्राउंड का UX
ऊपर दिए गए कॉम्पोनेंट डेमो वीडियो में, प्लेसहोल्डर की कैटगरी इनकी शैलियां हैं
वीडियो गेम. इस पगडंडी को नीचे दिए गए रास्ते पर नेविगेट करके बनाया गया है: home »
rpg » indie » on sale, जैसा कि नीचे दिखाया गया है.
इस ब्रेडक्रंब कॉम्पोनेंट से उपयोगकर्ता, डेटा को एक जगह से दूसरी जगह ले जा सकेंगे जानकारी की हैरारकी; अलग-अलग शाखाओं वाले हिस्सों में तेज़ी से जाएं और तेज़ी से पेजों को चुनें कितना सटीक है.
इन्फ़ॉर्मेशन आर्किटेक्चर
मुझे संग्रह और आइटम के बारे में सोचना उपयोगी लगता है.
कलेक्शन
कलेक्शन, विकल्पों का एक कलेक्शन होता है. इसके होम पेज से इस पोस्ट का ब्रेडक्रंब प्रोटोटाइप, एफ़पीएस, आरपीजी, ब्रॉलर, और कलेक्शन हैं तहखाने वाला क्रॉलर, खेल, और पहेली.
आइटम
वीडियो गेम एक आइटम है. किसी खास कलेक्शन को एक आइटम भी माना जा सकता है, अगर वह एक और कलेक्शन के बारे में बताता है. उदाहरण के लिए, आरपीजी एक आइटम है और संग्रह. जब यह कोई आइटम है, तो उपयोगकर्ता उस संग्रह पेज पर होता है. उदाहरण के लिए, वे आरपीजी पेज पर होते हैं. इस पेज पर, आरपीजी गेम की सूची दिखती है. इनमें, AAA, इंडी, और सेल्फ़ पब्लिश की अन्य सब-कैटगरी.
कंप्यूटर साइंस की भाषा में, यह ब्रेडक्रंब कॉम्पोनेंट कई डाइमेंशन कलेक्शन:
const rawBreadcrumbData = {
"FPS": {...},
"RPG": {
"AAA": {...},
"indie": {
"new": {...},
"on sale": {...},
"under 5": {...},
},
"self published": {...},
},
"brawler": {...},
"dungeon crawler": {...},
"sports": {...},
"puzzle": {...},
}
आपके ऐप्लिकेशन या वेबसाइट में कस्टम इन्फ़ॉर्मेशन आर्किटेक्चर (आईए) होगा, जो फिर भी मुझे कई तरह से डाइमेंशन बनाने की पेज और हैरारकी ट्रैवर्सल इसे आपके ब्रेडक्रंब में भी बना सकते हैं.
लेआउट
मार्कअप
अच्छे कॉम्पोनेंट सही एचटीएमएल से शुरू होते हैं. अगले सेक्शन में, मैं अपने के विकल्प और वे पूरे कॉम्पोनेंट पर कैसे असर डालते हैं.
डार्क और लाइट स्कीम
<meta name="color-scheme" content="dark light">
ऊपर दिए गए कॉलम में मौजूद color-scheme मेटा टैग
स्निपेट, ब्राउज़र को बताता है कि इस पेज को हल्के और गहरे रंग वाला ब्राउज़र चाहिए
शैलियां. उदाहरण के तौर पर दिए गए ब्रेडक्रंब में इन कलर स्कीम के लिए कोई सीएसएस शामिल नहीं होता,
इसलिए, ब्रेडक्रंब ब्राउज़र से मिले डिफ़ॉल्ट कलर का इस्तेमाल करेंगे.
नेविगेशन एलिमेंट
<nav class="breadcrumbs" role="navigation"></nav>
इस टूल का इस्तेमाल करना सही है.
<nav> एलिमेंट
के लिए, जिसमें इंप्लिसिट ARIA की भूमिका है
नेविगेशन.
जांच के दौरान, मैंने देखा कि role एट्रिब्यूट की वजह से
स्क्रीन रीडर ने एलिमेंट के साथ इंटरैक्ट किया, तो असल में इसकी सूचना इस तौर पर दी गई थी:
मैंने इसे जोड़ना चुना है.
आइकॉन
जब किसी पेज पर एक आइकॉन को दोहराया जाता है, तो SVG
<use> एलिमेंट
इसका मतलब है कि आप path को एक बार तय कर सकते हैं और इसका इस्तेमाल
आइकन. यह समान पथ जानकारी को दोहराए जाने से रोकता है, जिसके कारण
और पाथ के एक जैसा न होने की संभावना होती है.
इस तकनीक का इस्तेमाल करने के लिए, पेज में छिपा हुआ SVG एलिमेंट जोड़ें और आइकॉन को रैप करें
यूनीक आईडी वाले <symbol> एलिमेंट में:
<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>
ब्राउज़र SVG एचटीएमएल को पढ़ता है, आइकॉन की जानकारी मेमोरी में रखता है, और के अतिरिक्त आइकन दिखाई दे सकता है, जैसे:
<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>
एक बार तय करें और जितनी बार चाहें उतनी बार इस्तेमाल करें. इससे पेज की परफ़ॉर्मेंस पर कम से कम असर पड़ेगा
आसानी से इस्तेमाल किया जा सकता है. सूचना aria-hidden="true" को SVG एलिमेंट में जोड़ा गया है.
यह आइकॉन किसी ऐसे व्यक्ति के लिए काम का नहीं है जो किसी व्यक्ति को सिर्फ़ कॉन्टेंट सुन रहा हो और वह छिपा हुआ हो
उन्हें ऐसा करने से रोका जाता है.
स्प्लिट लिंक .crumb
यहां पर पारंपरिक ब्रेडक्रंब और इस कॉम्पोनेंट में मौजूद ब्रेडक्रंब अलग-अलग होते हैं.
आम तौर पर, यह सिर्फ़ <a> लिंक होगा, लेकिन मैंने ट्रैवर्सल UX को
छिपी हुई चीज़ें चुनें. .crumb क्लास लिंक को अलग-अलग तरीके से समझाने और
आइकॉन को दबाएं. हालांकि, .crumbicon का इस्तेमाल, आइकॉन को स्टैक करने और चुनने के लिए किया जाता है
एलिमेंट को एक साथ कनेक्ट कर दिया जाता है. मैंने इसे स्प्लिट-लिंक कहा है, क्योंकि इसके फ़ंक्शन बहुत
स्प्लिट बटन की तरह,
पेज नेविगेशन के लिए.
<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>
एक लिंक और कुछ विकल्प कोई खास नहीं होते, लेकिन
सामान्य ब्रेडक्रंब. <select> एलिमेंट में title जोड़ना, स्क्रीन के लिए मददगार होता है
पाठक, उन्हें बटन की कार्रवाई के बारे में जानकारी देते हुए. हालांकि,
अन्य सभी लोगों को भी समान सहायता देता है, तो आपको
iPad. एक एट्रिब्यूट कई उपयोगकर्ताओं को बटन के बारे में जानकारी देता है.
सेपरेटर डेकोरेशन
<span class="crumb-separator" aria-hidden="true">→</span>
सेपरेटर का इस्तेमाल करना ज़रूरी नहीं है. किसी एक को जोड़ने से यह बहुत अच्छी तरह काम करता है (वीडियो में तीसरा उदाहरण देखें
ऊपर). इसलिए, मैं हर aria-hidden="true" को देती हूं, क्योंकि वे सजावटी हैं और नहीं
ऐसा नाम जो किसी स्क्रीन रीडर को पढ़कर सुनाए जाने की ज़रूरत होती है.
आगे दी गई gap प्रॉपर्टी, इनके स्पेस को आसान बनाती है.
स्टाइल
रंग में सिस्टम के रंगों का इस्तेमाल किया जाता है. इसलिए, इसमें स्टाइल के लिए ज़्यादातर गैप और स्टैक होते हैं!
लेआउट की दिशा और फ़्लो
मुख्य नेविगेशन एलिमेंट nav.breadcrumbs, स्कोप वाली कस्टम प्रॉपर्टी सेट करता है
जिन्हें बच्चे इस्तेमाल कर सकें. इसके अलावा, वर्टिकल तौर पर वर्टिकल तौर पर अलाइन करता है
लेआउट. इससे क्रंब, डिवाइडर, और आइकॉन को अलाइन किया जाता है.
.breadcrumbs {
--nav-gap: 2ch;
display: flex;
align-items: center;
gap: var(--nav-gap);
padding: calc(var(--nav-gap) / 2);
}
हर .crumb में वर्टिकल तौर पर अलाइन किया गया एक लेआउट भी मिलता है. इसमें कुछ
गैप होता है, लेकिन विशेष रूप से इसके लिंक चाइल्ड को लक्षित करता है और
white-space: nowrap. कई शब्दों वाले ब्रेडक्रंब के लिए यह बेहद ज़रूरी है, क्योंकि हम नहीं
हम चाहते हैं कि वे अलग-अलग लाइन में काम करें. बाद में हम इस पोस्ट में, आपके विज्ञापन के लिए
हॉरिज़ॉन्टल ओवरफ़्लो, इस white-space प्रॉपर्टी की वजह से हुआ.
.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" को जोड़ दिया गया है, ताकि मौजूदा पेज का लिंक
आराम. स्क्रीन रीडर इस्तेमाल करने वाले लोगों को साफ़ तौर पर यह पता चलेगा कि लिंक
वर्तमान पेज के लिए, हमने देख सकने वाले उपयोगकर्ताओं की सहायता के लिए एलिमेंट को विज़ुअल रूप से शैलीबद्ध किया है
एक जैसा उपयोगकर्ता अनुभव मिलता है.
.crumbicon कॉम्पोनेंट, ग्रिड का इस्तेमाल करके SVG आइकॉन को "करीब
नहीं दिख रहा है" <select> एलिमेंट.
.crumbicon {
--crumbicon-size: 3ch;
display: grid;
grid: [stack] var(--crumbicon-size) / [stack] var(--crumbicon-size);
place-items: center;
& > * {
grid-area: stack;
}
}
<select> एलिमेंट, डीओएम में आखिरी होता है, इसलिए यह स्टैक के सबसे ऊपर होता है,
और इंटरैक्टिव. opacity: .01 की कोई स्टाइल जोड़ें, ताकि एलिमेंट का इस्तेमाल किया जा सके,
और परिणाम में एक चयन बॉक्स होता है, जो आइकन के आकार में पूरी तरह फ़िट हो जाता है.
यह <select> एलिमेंट के लुक को पसंद के मुताबिक बनाने का एक अच्छा तरीका है.
पहले से मौजूद सुविधाओं को बनाए रखने में मदद मिलती है.
.disguised-select {
inline-size: 100%;
block-size: 100%;
opacity: .01;
font-size: min(100%, 16px); /* Defaults to 16px; fixes iOS zoom */
}
ओवरफ़्लो
ब्रेडक्रंब एक बहुत लंबा रास्ता होना चाहिए. मुझे अनुमति देना बहुत पसंद है जब सही हो, तब हॉरिज़ॉन्टल तौर पर ऑफ़स्क्रीन किया जा सकता है और मुझे यह महसूस हुआ ब्रेडक्रंब कॉम्पोनेंट अच्छी तरह क्वालिफ़ाइड हैं.
.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;
}}
}
ओवरफ़्लो स्टाइल इन UX को सेट अप करती हैं:
- ओवरस्क्रोल कंटेनमेंट के साथ हॉरिज़ॉन्टल स्क्रोलिंग.
- हॉरिज़ॉन्टल स्क्रोल पैडिंग.
- बचे हुए खाने के लिए एक स्नैप पॉइंट. इसका मतलब है कि पेज लोड होने पर क्रंब लोड स्नैप किए गए और दिखाई देते हैं.
- Safari से स्नैप पॉइंट को हटाता है, जो हॉरिज़ॉन्टल से मुश्किल होता है स्नैप इफ़ेक्ट का इस्तेमाल किया जा सकता है.
मीडिया क्वेरी
छोटे व्यूपोर्ट के लिए एक सूक्ष्म समायोजन "होम" छिपाना है लेबल, जा रहा है आइकन:
@media (width <= 480px) {
.breadcrumbs .home-label {
display: none;
}
}
सुलभता
मोशन
इस कॉम्पोनेंट में बहुत ज़्यादा मोशन नहीं है, लेकिन
prefers-reduced-motion की जांच में ट्रांज़िशन करते हैं, तो हम अनचाही हलचल को रोक सकते हैं.
@media (prefers-reduced-motion: no-preference) {
.crumbicon {
transition: box-shadow .2s ease;
}
}
इनमें से किसी भी स्टाइल को बदलने की ज़रूरत नहीं है. होवर और फ़ोकस इफ़ेक्ट बहुत अच्छे हैं
और transition के बिना अर्थपूर्ण होता है, लेकिन अगर गति ठीक है, तो हम
ट्रांज़िशन पर.
JavaScript
पहला, भले ही आप अपनी साइट या ऐप्लिकेशन में किसी भी तरह के राऊटर का इस्तेमाल करें,
जब कोई उपयोगकर्ता ब्रेडक्रंब बदलता है, तो यूआरएल को अपडेट करना ज़रूरी होता है. इसके बाद उपयोगकर्ता को
उचित पेज दिखाया गया. दूसरा, उपयोगकर्ता अनुभव को सामान्य बनाने के लिए,
जब उपयोगकर्ता सिर्फ़ <select> ब्राउज़ कर रहे होते हैं, तो अचानक कोई नेविगेशन नहीं होता है
के विकल्प.
JavaScript की मदद से उपयोगकर्ता अनुभव को बेहतर बनाने के लिए ये दो ज़रूरी उपाय हैं:
<select> इवेंट ट्रिगर होने की रोकथाम को बदला गया और उत्सुकता से बदलने वाला.
<select> के इस्तेमाल की वजह से, उत्सुक घटना को रोकने की ज़रूरत है
एलिमेंट. Windows Edge और शायद दूसरे ब्राउज़र पर भी, changed चुनें
जैसे ही उपयोगकर्ता कीबोर्ड से विकल्पों को ब्राउज़ करता है, इवेंट सक्रिय हो जाता है. इसलिए,
इसे ईगर कहा जाता है, क्योंकि उपयोगकर्ता ने विकल्प को केवल स्यूडो चुना है, जैसे
या फ़ोकस ने अभी तक enter या click से पसंद की पुष्टि नहीं की है. ईगर
इवेंट की वजह से इस कॉम्पोनेंट की कैटगरी में बदलाव की सुविधा ऐक्सेस नहीं की जा सकती, क्योंकि
चयन बॉक्स को खोलने और केवल किसी आइटम को ब्राउज़ करने से इवेंट सक्रिय हो जाएगा और
उपयोगकर्ता के तैयार करने से पहले पेज में बदलाव करें.
<select> से बेहतर बदला गया इवेंट
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
})
})
इसके लिए रणनीति यह है कि हर <select> पर कीबोर्ड डाउन इवेंट को देखा जाए
एलिमेंट खोलें और तय करें कि दबाई गई कुंजी नेविगेशन की पुष्टि थी या नहीं (Tab या
Enter) या स्पेशल नेविगेशन (ArrowUp या ArrowDown). इसके साथ
तय करने के बाद, कॉम्पोनेंट इंतज़ार करने या जाने का फ़ैसला ले सकता है, तो
<select> एलिमेंट ट्रिगर होता है.
नतीजा
अब जब आपको पता है कि मैंने इसे कैसे किया, तो आप कैसे करेंगे ‽ 🙂
आइए, हम अलग-अलग तरह के काम करते हैं और वेब पर काम करने के सभी तरीके सीखते हैं. एक डेमो बनाएं, मुझे ट्वीट करें और मैं इसे जोड़ दूंगा कम्यूनिटी रीमिक्स बनाने के लिए यहां दिए गए सेक्शन पर जाएं!
कम्यूनिटी रीमिक्स
- वेब कॉम्पोनेंट के तौर पर Tux Salbakk: डेमो और कोड