किसी वेबसाइट के लिए मुख्य नेविगेशन बनाना

इस ट्यूटोरियल में, किसी वेबसाइट के लिए ऐक्सेस किया जा सकने वाला मुख्य नेविगेशन बनाने का तरीका बताया गया है. आपको सिमैंटिक एचटीएमएल, सुलभता, और ARIA एट्रिब्यूट का इस्तेमाल करने के बारे में जानकारी मिलती है. इससे कभी-कभी अच्छे से ज़्यादा नुकसान हो सकता है.

Manuel Matuzović

शैली, काम करने के तरीके, और बुनियादी मार्कअप और सिमैंटिक जानकारी के हिसाब से किसी वेबसाइट का मुख्य नेविगेशन बनाने के कई तरीके हैं. अगर इसे लागू करना बहुत आसान है, तो यह ज़्यादातर लोगों के काम आता है, लेकिन हो सकता है कि उपयोगकर्ता अनुभव (UX) अच्छा न हो. अगर इसका ज़्यादा इस्तेमाल किया गया है, तो उपयोगकर्ताओं को इसका भ्रम हो सकता है. इसके अलावा, इन्हें देखने में परेशानी भी हो सकती है.

ज़्यादातर वेबसाइटों के लिए, आप कुछ ऐसा बनाना चाहते हैं जो न तो बहुत आसान है और न ही बहुत जटिल.

लेयर के हिसाब से बिल्डिंग

इस ट्यूटोरियल में, आपने बुनियादी सेटअप के साथ शुरुआत की है. साथ ही, लेयर के हिसाब से सुविधाओं को उस लेवल तक जोड़ा है जहां आपको उपयोगकर्ताओं को खुश करने के लिए ज़रूरी जानकारी, स्टाइल, और फ़ंक्शन उपलब्ध कराए जा सकते हैं. प्रोग्रेसिव एन्हैंसमेंट के सिद्धांत का इस्तेमाल करें. इसके तहत, सबसे बुनियादी और मज़बूत समाधान के साथ शुरुआत की जा सकती है. साथ ही, सुविधाओं में लगातार लेयर जोड़ी जा रही हैं. अगर कोई एक लेयर किसी वजह से काम नहीं करती, तो भी नेविगेशन अब भी काम करेगा. ऐसा इसलिए, क्योंकि यह बुनियादी लेयर पर वापस आ जाता है.

बुनियादी स्ट्रक्चर

सामान्य नेविगेशन के लिए आपको दो चीज़ों की ज़रूरत होती है: <a> एलिमेंट और सीएसएस की कुछ लाइनें. इससे लिंक की डिफ़ॉल्ट स्टाइल और लेआउट को बेहतर बनाया जा सकता है.

<a href="/home">Home</a>
<a href="/about-us">About us</a>
<a href="/pricing">Pricing</a>
<a href="/contact">Contact</a>

/* Define variables for your colors */
:root {
  --color-shades-dark: rgb(25, 25, 25);
}

/* Use the alternative box model
Details: <https://web.dev/learn/css/box-model/> */
*{
  box-sizing: border-box;
}

/* Basic font styling */
body {
  font-family: Segoe UI, system-ui, -apple-system, sans-serif;
  font-size: 1.6rem;
}

/* Link styling */
a {
  --text-color: var(--color-shades-dark);
  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  display: inline-block;
  margin-block-end: 0.5rem; /* See note at the bottom of this chapter */
  margin-inline-end: 0.5rem;
  padding: 0.1rem;
  text-decoration: none;
}

/* Change the border-color on :hover and :focus */
a:where(:hover, :focus) {
  --border-color: var(--text-color);
}

देखें चरण 1: बेसिक एचटीएमएल और सीएसएस" CodePen पर.

यह सुविधा ज़्यादातर लोगों के लिए अच्छी है, चाहे वे साइट को किसी भी तरह से ऐक्सेस कर रहे हों. माउस, कीबोर्ड, टच डिवाइस या स्क्रीन रीडर से नेविगेशन को ऐक्सेस किया जा सकता है, लेकिन इसे बेहतर भी बनाया जा सकता है. इस बुनियादी पैटर्न को बेहतर बनाने के लिए, अतिरिक्त सुविधाओं और जानकारी का इस्तेमाल किया जा सकता है.

यहां बताया गया है कि आपको क्या करना है:

• ऐक्टिव पेज को हाइलाइट करें.
• स्क्रीन रीडर का इस्तेमाल करने वालों को आइटम की संख्या बताएं.
• कोई लैंडमार्क जोड़ें और स्क्रीन रीडर इस्तेमाल करने वाले लोगों को शॉर्टकट का इस्तेमाल करके, सीधे नेविगेशन ऐक्सेस करने की अनुमति दें.
• छोटे व्यूपोर्ट पर नेविगेशन छिपाएं.
• फ़ोकस की स्टाइल को बेहतर बनाएं.

ध्यान दें: margin-inline-end और margin-block-end को लॉजिकल प्रॉपर्टी कहा जाता है. साथ ही, इन्हें margin-right और margin-bottom लिखने के विकल्प के तौर पर जाना जाता है. लॉजिकल प्रॉपर्टी, निर्देशों और डाइमेंशन के साथ काम करने का एक नया तरीका है. इसकी मदद से, फ़िज़िकल मैपिंग के बजाय, लॉजिकल तरीके से लेआउट को कंट्रोल किया जा सकता है. यह सुविधा खास तौर पर तब काम आती है, जब आपको ऐसी वेबसाइटों का इस्तेमाल करना हो जिन्हें अलग-अलग भाषाओं और लिखने के मोड, जैसे कि दाईं से बाईं ओर दिखाया जाता है. "फ़िज़िकल बनाम लॉजिकल प्रॉपर्टी" देखें.

ऐक्टिव पेज को हाइलाइट करें

ऐक्टिव पेज को हाइलाइट करने के लिए, उससे जुड़े लिंक में क्लास जोड़ी जा सकती है.

<a href="/about-us" class="active-page">About us</a>

इस अप्रोच में समस्या यह है कि यह सिर्फ़ ऐसी जानकारी देता है जो विज़ुअल तौर पर ऐक्टिव है. दृष्टिहीन स्क्रीन रीडर इस्तेमाल करने वाला व्यक्ति, चालू पेज और दूसरे पेजों के बीच फ़र्क़ नहीं कर पाता. अच्छी बात यह है कि ऐक्सेसिबल रिच इंटरनेट ऐप्लिकेशन (ARIA) स्टैंडर्ड, इस जानकारी को शब्दों के ज़रिए भी ज़ाहिर करने की सुविधा देता है. क्लास के बजाय, aria-current="page" एट्रिब्यूट और वैल्यू का इस्तेमाल करें.

aria-current (स्टेट) उस एलिमेंट के बारे में बताता है जो किसी कंटेनर या मिलते-जुलते एलिमेंट के सेट में मौजूदा आइटम को दिखाता है. पेज टोकन, जो पेज नंबर वाले लिंक के किसी सेट में मौजूद लिंक को दिखाने के लिए इस्तेमाल किया जाता है. इसमें लिंक को, मौजूदा समय में दिख रहे पेज को दिखाने के लिए विज़ुअल तौर पर स्टाइल किया जाता है. [ऐक्सेस किए जा सकने वाले रिच इंटरनेट ऐप्लिकेशन (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria/#aria-current)

इस अतिरिक्त एट्रिब्यूट की मदद से स्क्रीन रीडर, "मौजूदा पेज, लिंक, हमारे बारे में जानकारी" जैसी जानकारी देता है के बजाय "लिंक, हमारे बारे में" पर क्लिक करें.

<a href="/about-us" aria-current="page" class="active-page">About us</a>

इसका एक अच्छा असर यह होता है कि इस एट्रिब्यूट का इस्तेमाल, सीएसएस में ऐक्टिव लिंक चुनने के लिए किया जा सकता है. इससे active-page क्लास पुरानी हो जाएगी.

<a href="/home">Home</a>
<a href="/about-us" aria-current="page">About us</a>
<a href="/pricing">Pricing</a>
<a href="/contact">Contact</a>

/* Change border-color and color for the active page */
[aria-current="page"] {
  --border-color: var(--color-highlight);
  --text-color: var(--color-highlight);
}

देखें कि दूसरा चरण: CodePen पर ऐक्टिव पेज को हाइलाइट करें.

आइटमों की संख्या बताएं

नेविगेशन को देखकर, देख सकने वाले उपयोगकर्ता बता सकते हैं कि इसमें केवल चार लिंक हैं. दृष्टिहीन स्क्रीन रीडर इस्तेमाल करने वाला व्यक्ति, इस जानकारी को तुरंत हासिल नहीं कर सकता. उन्हें लिंक की पूरी सूची में से अपना काम करना पड़ सकता है. अगर सूची छोटी है, तो हो सकता है कि यह कोई समस्या न हो, लेकिन अगर इसमें 40 लिंक हैं, तो यह काम मुश्किल हो सकता है. अगर स्क्रीन रीडर इस्तेमाल करने वाले व्यक्ति को पहले से पता हो कि नेविगेशन में बहुत सारे लिंक हैं, तो वह नेविगेशन के लिए किसी दूसरे और ज़्यादा बेहतर तरीके, जैसे कि साइट खोज का इस्तेमाल करने का फ़ैसला ले सकता है.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है आइटम की संख्या पहले ही बताने का एक अच्छा तरीका यह है कि हर लिंक को बिना क्रम वाली सूची (<ul>) में नेस्ट किए गए आइटम की सूची (<li>) में रैप किया जाता है.

<ul>
  <li>
     <a href="/home">Home</a>
  </li>
  <li>
    <a href="/about-us" aria-current="page">About us</a>
  </li>
  <li>
    <a href="/pricing">Pricing</a>
  </li>
  <li>
    <a href="/contact">Contact</a>
  </li>
</ul>

जब किसी स्क्रीन रीडर उपयोगकर्ता को सूची मिलेगी, तो उसका सॉफ़्टवेयर "सूची, चार आइटम" जैसा कुछ बताएगा.

Windows पर स्क्रीन रीडर NVDA के साथ इस्तेमाल किए गए नेविगेशन का डेमो दिया गया है.

अब आपको स्टाइल में बदलाव करना होगा, ताकि यह पहले जैसा दिखे.

/* Remove the default list styling and create a flexible layout for the list */
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Basic link styling */
a {
  --text-color: var(--color-shades-dark);

  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  padding: 0.1rem;
  text-decoration: none;
}

स्क्रीन रीडर का इस्तेमाल करने वालों को सूचियों का इस्तेमाल करने के कई फ़ायदे हो सकते हैं:

• आइटम से इंटरैक्ट करने से पहले, उन्हें आइटम की कुल संख्या का पता चल सकता है.
• वे सूची आइटम से सूची आइटम पर जाने के लिए शॉर्टकट का इस्तेमाल कर सकते हैं.
• वे एक सूची से सूची पर जाने के लिए शॉर्टकट का इस्तेमाल कर सकते हैं.
• स्क्रीन रीडर मौजूदा आइटम के इंडेक्स के बारे में बता सकता है (उदाहरण के लिए, "सूची आइटम, चार में से दो").

इसके अलावा, अगर पेज को सीएसएस के बिना दिखाया जाता है, तो सूची में लिंक सिर्फ़ लिंक के ढेर के बजाय, आइटम के एक साथ दिखने वाले ग्रुप के तौर पर दिखते हैं.

Safari में VoiceOver के बारे में एक खास बात यह है कि list-style: none सेट करने पर आपको ये सभी फ़ायदे नहीं मिलेंगे. इसे डिज़ाइन से बनाया गया है. WebKit टीम ने सूची के सिमैंटिक को हटाने का फ़ैसला किया, जब कोई सूची सूची की तरह नहीं दिखती. आपके नेविगेशन की जटिलता पर निर्भर करता है कि इसमें कोई समस्या है या नहीं भी हो सकती है. एक तरफ़, नेविगेशन का इस्तेमाल अब भी किया जा सकता है और इससे Safari में सिर्फ़ VoiceOver पर असर पड़ता है. Chrome या Firefox के साथ VoiceOver अब भी आइटम के साथ-साथ अन्य स्क्रीन रीडर के बारे में बताता है, जैसे कि NVDA. दूसरी ओर, अर्थ संबंधी जानकारी कुछ परिस्थितियों में वास्तव में उपयोगी हो सकती है. यह फ़ैसला लेने के लिए, आपको स्क्रीन रीडर का इस्तेमाल करने वाले लोगों के साथ नेविगेशन की जांच करनी चाहिए और उनसे सुझाव, शिकायत या राय लेनी चाहिए. अगर आपको लगता है कि आपको Safari में VoiceOver की ज़रूरत है, तो वह अन्य सभी स्क्रीन रीडर की तरह काम करे, तो इस समस्या को हल करने के लिए, <ul> पर ARIA लिस्ट रोल को साफ़ तौर पर सेट किया जा सकता है. ऐसा करने से, सूची की स्टाइल को हटाने से पहले की स्थिति वापस आ जाती है. विज़ुअल तौर पर, सूची अब भी पहले जैसी ही दिखती है.

<ul role="list">
  <li>
     <a href="/home">Home</a>
  </li>
  ...
</ul>

ध्यान दें: अगर एचटीएमएल की पुष्टि की जाती है और पुष्टि करने वाली सेवा, "एलिमेंट ul के लिए सूची की भूमिका ज़रूरी नहीं है" जैसी चेतावनी दिखाती है, तो इसे अनदेखा किया जा सकता है.

देखें कि तीसरा चरण: CodePen पर आइटम की संख्या का एलान करना.

लैंडमार्क जोड़ें

आपने स्क्रीन रीडर इस्तेमाल करने वालों के लिए, बहुत कम मेहनत में काफ़ी सुधार किए हैं. हालांकि, यहां एक और चीज़ है, जो आप कर सकते हैं. शब्दों के हिसाब से नेविगेशन, सिर्फ़ लिंक की सूची ही होता है. साथ ही, यह कहना मुश्किल है कि यह सूची आपकी वेबसाइट का मुख्य नेविगेशन है. इस सामान्य सूची को नेविगेशन सूची में बदला जा सकता है. इसके लिए, आपको <ul> को <nav> एलिमेंट में रैप करना होगा.

<nav> एलिमेंट का इस्तेमाल करने के कई फ़ायदे हैं. खास बात यह है कि जब कोई व्यक्ति स्क्रीन से इंटरैक्ट करता है, तब स्क्रीन रीडर "नेविगेशन" जैसी जानकारी देता है. साथ ही, यह पेज पर लैंडमार्क जोड़ देता है. लैंडमार्क, पेज पर मौजूद खास इलाके होते हैं, जैसे कि <header>, <footer> या <main>. यहां जाकर स्क्रीन रीडर ऐक्सेस कर सकता है. पेज पर लैंडमार्क होना फ़ायदेमंद हो सकता है, क्योंकि इससे स्क्रीन रीडर इस्तेमाल करने वाले लोगों को पेज पर अहम जगहों को सीधे ऐक्सेस करने की सुविधा मिलती है. इससे, उन्हें पेज के बाकी हिस्सों से इंटरैक्ट करने की ज़रूरत नहीं पड़ती. उदाहरण के लिए, NVDA में D बटन दबाकर, लैंडमार्क से लैंडमार्क पर जाया जा सकता है. वॉइस ओवर में, VO + U दबाकर पेज पर मौजूद सभी लैंडमार्क की सूची बनाने के लिए, रोटर का इस्तेमाल किया जा सकता है.

VoiceOver में मौजूद रोटर, किसी पेज पर मौजूद सभी लैंडमार्क की सूची दिखाता है.

इस सूची में आपको 4 लैंडमार्क दिखते हैं: बैनर जो कि <header> एलिमेंट है, नेविगेशन हिस्सा <nav> है, <main> एलिमेंट मुख्य है, और कॉन्टेंट की जानकारी <footer> है. यह सूची बहुत लंबी नहीं होनी चाहिए, आप असल में अपने यूज़र इंटरफ़ेस (यूआई) के सिर्फ़ अहम हिस्सों को लैंडमार्क के तौर पर मार्क करना चाहते हैं, जैसे कि साइट खोज, लोकल नेविगेशन या पेज नंबर.

अगर आपकी साइट पर एक ही पेज पर अलग-अलग जगहों पर नेविगेट करने की सुविधा है, उस पर एक लोकल नेविगेशन दिया गया है, और एक ही पेज पर अलग-अलग पेज नंबर हैं, तो आपके पास तीन <nav> एलिमेंट भी हो सकते हैं. यह ठीक है, लेकिन अब नेविगेशन के लिए तीन लैंडमार्क हैं और शब्दार्थ रूप में वे सभी एक जैसे दिखते हैं. उन्हें एक-दूसरे से तब तक अलग करना मुश्किल है, जब तक कि आप पेज के स्ट्रक्चर के बारे में ठीक से न जान लें.

VoiceOver के रोटर में, बिना लेबल वाले तीन नेविगेशन लैंडमार्क दिखाए गए हैं.

इन्हें अलग दिखाने के लिए, आपको aria-labelledby या aria-label का इस्तेमाल करके इन्हें लेबल करना चाहिए.

<nav aria-label="Main">
    <ul>
      <li>
         <a href="/home">Home</a>
      </li>
      ...
  </ul>
</nav>
...
<nav aria-label="Select page">
    <ul>
      <li>
         <a href="/page-1">1</a>
      </li>
      ...
    </ul>
</nav>

अगर आपने जो लेबल चुना है, वह पेज पर पहले से ही कहीं मौजूद है, तो उसके बजाय aria-labelledby का इस्तेमाल किया जा सकता है. साथ ही, id एट्रिब्यूट की मदद से मौजूदा लेबल का रेफ़रंस दिया जा सकता है.

<nav aria-labelledby="pagination_heading">
  <h2 id="pagination_heading">Select a page</h2>
  <ul>
    <li>
       <a href="/page-1">1</a>
    </li>
    ...
  </ul>
</nav>

छोटे-छोटे लेबल बनाना ही काफ़ी है, ज़्यादा शब्दों का इस्तेमाल न करें. "नेविगेशन" जैसे एक्सप्रेशन शामिल न करें या "मेन्यू" क्योंकि स्क्रीन रीडर उपयोगकर्ताओं को यह जानकारी पहले से ही देता है.

VoiceOver में "बैनर", "मुख्य नेविगेशन", "मुख्य", "पेज नेविगेशन", "पेज नेविगेशन चुनें" जैसे लैंडमार्क की लिस्टिंग दिख रही है और "कॉन्टेंट की जानकारी" शामिल हैं.

चौथा चरण: CodePen पर लैंडमार्क जोड़ना देखें.

छोटे व्यूपोर्ट पर नेविगेशन छिपाएं

निजी तौर पर, मुझे छोटे व्यूपोर्ट पर मुख्य नेविगेशन को छिपाना ज़्यादा पसंद नहीं है, लेकिन अगर लिंक की सूची बहुत लंबी हो जाती है, तो कोई तरीका नहीं. अगर ऐसा है, तो सूची के बजाय, उपयोगकर्ताओं को "मेन्यू" लेबल वाला बटन दिखेगा या बर्गर आइकन या संयोजन शामिल है. बटन पर क्लिक करने से सूची दिखती और छिप जाती है. अगर आपको बुनियादी JavaScript और सीएसएस के बारे में जानकारी है, तो यह एक मुमकिन काम है, लेकिन UX और सुलभता के मामले में आपको कई चीज़ों का ध्यान रखना होगा.

• आपको सूची को इस तरह छिपाया जाना चाहिए कि उसे ऐक्सेस किया जा सके.
• नेविगेशन ऐसा होना चाहिए जिसे कीबोर्ड ऐक्सेस कर सके.
• नेविगेशन में यह बताया जाना चाहिए कि यह दिख रहा है या नहीं.

बर्गर बटन जोड़ना

आप प्रोग्रेसिव एन्हैंसमेंट के सिद्धांत का पालन कर रहे हैं, इसलिए आपको यह पक्का करना होगा कि JavaScript बंद होने पर भी आपका नेविगेशन ठीक से काम करता हो और समझ में आ रहा हो.
आपके नेविगेशन के लिए सबसे पहले बर्गर बटन की ज़रूरत है. इसे टेंप्लेट एलिमेंट में एचटीएमएल में बनाएं, JavaScript में उसका क्लोन बनाएं, और नेविगेशन में जोड़ें.

नतीजे: नेविगेशन में लिंक के बजाय, छोटे व्यूपोर्ट पर बर्गर बटन दिखता है.

<nav id="mainnav">
  ...
</nav>

<template id="burger-template">
  <button type="button" aria-expanded="false" aria-label="Menu" aria-controls="mainnav">
    <svg width="24" height="24" aria-hidden="true">
      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
    </svg>
  </button>
</template>

1. aria-expanded एट्रिब्यूट से, स्क्रीन रीडर सॉफ़्टवेयर को यह पता चलता है कि बटन से कंट्रोल किए जाने वाले एलिमेंट को बड़ा किया गया है या नहीं.
2. aria-label बटन को एक तथाकथित ऐक्सेस किया जा सकने वाला नाम देता है, जो बर्गर आइकॉन का एक टेक्स्ट विकल्प होता है.
3. आपने aria-hidden का इस्तेमाल करके, <svg> को सहायक टेक्नोलॉजी से छिपा दिया है. ऐसा इसलिए, क्योंकि इस टेक्नोलॉजी में aria-label से मिला टेक्स्ट लेबल पहले से मौजूद है.
4. aria-controls, सहायक टेक्नोलॉजी के बारे में बताता है. यह एट्रिब्यूट, बटन के एलिमेंट को कंट्रोल करने वाले एट्रिब्यूट (उदाहरण के लिए, JAWS) के साथ काम करता है.

const nav = document.querySelector('#mainnav')
const list = nav.querySelector('ul');
const burgerClone = document.querySelector('#burger-template').content.cloneNode(true);
const button = burgerClone.querySelector('button');

// Toggle aria-expanded attribute
button.addEventListener('click', e => {
  // aria-expanded="true" signals that the menu is currently open
  const isOpen = button.getAttribute('aria-expanded') === "true"
  button.setAttribute('aria-expanded', !isOpen);
});

// Hide list on keydown Escape
nav.addEventListener('keyup', e => {
  if (e.code === 'Escape') {
    button.setAttribute('aria-expanded', false);
  }
});

// Add the button to the page
nav.insertBefore(burgerClone, list);

1. उपयोगकर्ता जब चाहें, नेविगेशन को बंद कर सकते हैं. जैसे, Escape बटन दबाकर.
2. appendChild के बजाय insertBefore का इस्तेमाल करना ज़रूरी है, क्योंकि बटन को आपके नेविगेशन का पहला एलिमेंट होना चाहिए. अगर कीबोर्ड या स्क्रीन रीडर का कोई उपयोगकर्ता बटन पर क्लिक करने के बाद Tab दबाता है, तो वह सूची के पहले आइटम पर फ़ोकस करना चाहता है. अगर सूची के बाद बटन आता है, तो ऐसा नहीं होगा.

इसके बाद, आप बटन की डिफ़ॉल्ट स्टाइल को रीसेट करते हैं और पक्का करते हैं कि यह सिर्फ़ छोटे व्यूपोर्ट पर ही दिखे.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
  }
}

/* Reset button styling */
button {
  all: unset;
  display: var(--nav-button-display, flex);
}

देखें कि पांचवां चरण: CodePen पर बर्गर बटन जोड़ना.

सूची छिपाई जा रही है

सूची छिपाने से पहले, नेविगेशन और सूची को सही जगह पर रखें और उसकी स्टाइल करें, ताकि लेआउट को छोटे व्यूपोर्ट के लिए ऑप्टिमाइज़ किया जा सके, लेकिन बड़ी स्क्रीन पर भी अच्छा दिखे.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है सबसे पहले, <nav> को पेज के नैचुरल फ़्लो से हटाएं और उसे व्यूपोर्ट के सबसे ऊपर कोने में रखें.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
}

nav {
  position: var(--nav-position, fixed);
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

इसके बाद, नई कस्टम प्रॉपर्टी (—-nav-list-layout) जोड़कर, छोटे व्यूपोर्ट पर लेआउट बदलें. लेआउट, डिफ़ॉल्ट रूप से कॉलम होता है और बड़ी स्क्रीन पर पंक्ति पर स्विच करता है.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }

  ul {
    --nav-list-layout: row;
  }
}

ul {
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

छोटे व्यूपोर्ट पर आपका नेविगेशन कुछ ऐसा दिखना चाहिए.

बर्गर बटन और सूची, दोनों को व्यूपोर्ट के सबसे ऊपरी कोने में रखा जाता है.

सूची में कुछ सीएसएस की ज़रूरत होती है. हम इसे सबसे ऊपरी कोने पर ले जाएंगे, पूरी स्क्रीन को वर्टिकल तौर पर भरने के लिए, background-color और box-shadow लागू करेंगे.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
  
  ul {
    --nav-list-layout: row;
    --nav-list-position: static;
    --nav-list-padding: 0;
    --nav-list-height: auto;
    --nav-list-width: 100%;
    --nav-list-shadow: none;
  }
}

ul {
  background: rgb(255, 255, 255);
  box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  height: var(--nav-list-height, 100vh);
  list-style: none;
  margin: 0;
  padding: var(--nav-list-padding, 2rem);
  position: var(--nav-list-position, fixed);
  inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
  inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
  width: var(--nav-list-width, min(22rem, 100vw));
}

button {
  all: unset;
  display: var(--nav-button-display, flex);
  position: relative;
  z-index: 1;
}

छोटे व्यूपोर्ट पर सूची कुछ इस तरह से दिखनी चाहिए, जैसे कि सामान्य सूची के बजाय साइडबार की तरह.

आखिर में, सूची को छिपाएं, उसे सिर्फ़ तब दिखाएं, जब उपयोगकर्ता बटन पर एक बार क्लिक करे. जब वह फिर से क्लिक करे, तब उसे छिपाएं. पूरे नेविगेशन के बजाय, सिर्फ़ सूची को छिपाना ज़रूरी है. ऐसा इसलिए है, क्योंकि नेविगेशन छिपाने का मतलब यह भी होता है कि किसी अहम लैंडमार्क को छिपाया जा सकता है.

इससे पहले, आपने aria-expanded एट्रिब्यूट की वैल्यू को टॉगल करने के लिए, बटन में क्लिक इवेंट जोड़ा था. इस जानकारी का इस्तेमाल, सीएसएस में सूची दिखाने और छिपाने के लिए एक शर्त के तौर पर किया जा सकता है.

@media (min-width: 48em) {
  ul {
    --nav-list-visibility: visible;
  }
}

ul {
  visibility: var(--nav-list-visibility, visible);
}

/* Hide the list on narrow viewports, if it comes after an element with
   aria-expanded set to "false". */
[aria-expanded="false"] + ul {
  visibility: var(--nav-list-visibility, hidden);
}

सूची को छिपाने के लिए, opacity: 0 या translateX(100%) के बजाय visibility: hidden या display: none जैसी प्रॉपर्टी की जानकारी का इस्तेमाल करना ज़रूरी है. इन प्रॉपर्टी से यह पक्का होता है कि नेविगेशन के छिपे होने पर, लिंक पर फ़ोकस नहीं किया जा सकता. opacity या translate का इस्तेमाल करने पर, कॉन्टेंट साफ़ तौर पर हट जाएगा. इससे लिंक नहीं दिखेंगे, लेकिन कीबोर्ड से उन्हें ऐक्सेस किया जा सकेगा. इससे भ्रम की स्थिति पैदा होगी और परेशानी होगी. visibility या display का इस्तेमाल करने पर, यह विज़ुअल तौर पर छिप जाता है और इसे ऐक्सेस नहीं किया जा सकता. इसलिए, यह सभी उपयोगकर्ताओं के लिए छिप जाता है.

देखें कि छठा चरण: सूची छिपाना.

सूची ऐनिमेट की जा रही है

अगर आपको यह जानना है कि display: none; पर visibility: hidden; का इस्तेमाल क्यों करना चाहिए, तो इसकी वजह यह है कि आपके पास 'किसको दिखे' सेटिंग को ऐनिमेट करने का विकल्प है. इसमें सिर्फ़ दो स्थितियां होती हैं, hidden और visible. हालांकि, स्लाइड या फ़ेड-इन इफ़ेक्ट बनाने के लिए, इसे transform या opacity जैसी किसी अन्य प्रॉपर्टी के साथ जोड़ा जा सकता है. वह 'डिसप्ले' के साथ काम नहीं करेगा: कोई नहीं, क्योंकि डिसप्ले प्रॉपर्टी ऐनिमेट नहीं की जा सकती.

नीचे दिया गया सीएसएस, opacity को फ़ेड-इन और फ़ेड-आउट इफ़ेक्ट बनाने के लिए ट्रांज़िशन करता है.

ul {
  transition: opacity 0.6s linear, visibility 0.3s linear;
  visibility: var(--nav-list-visibility, visible);
}

[aria-expanded="false"] + ul {
  opacity: 0;
  visibility: var(--nav-list-visibility, hidden);
}

इसके बजाय, अगर आपको मोशन को ऐनिमेट करना है, तो transition प्रॉपर्टी को prefers-reduced-motion मीडिया क्वेरी में रैप करें. इसकी वजह यह है कि ऐनिमेशन से कुछ लोगों को मेटा, चक्कर आना, और सिर दर्द की समस्या हो सकती है.

ul {
  visibility: var(--nav-list-visibility, visible);
}

@media (prefers-reduced-motion: no-preference) {
  ul {
    transition: transform 0.6s cubic-bezier(.68,-0.55,.27,1.55), visibility 0.3s linear;
  }
}

[aria-expanded="false"] + ul {
  transform: var(--nav-list-transform, translateX(100%));
  visibility: var(--nav-list-visibility, hidden);
}

इससे यह पक्का हो जाता है कि ऐनिमेशन सिर्फ़ उन लोगों को दिखेगा जिन्होंने कम मोशन में विकल्प नहीं चुना है.

देखें कि सातवां चरण: CodePen पर सूची को ऐनिमेट करना.

फ़ोकस की स्टाइल को बेहतर बनाएं

कीबोर्ड इस्तेमाल करने वाले लोग किसी पेज पर ओरिएंटेशन और नेविगेशन के लिए, एलिमेंट की फ़ोकस स्टाइल पर भरोसा करते हैं. डिफ़ॉल्ट फ़ोकस स्टाइल, किसी भी फ़ोकस स्टाइल (ऐसा तब होता है, जब आप outline: none सेट करते हैं) से बेहतर होते हैं. हालांकि, ज़्यादा साफ़ तौर पर दिखने वाली कस्टम फ़ोकस स्टाइल होने से, उपयोगकर्ता अनुभव बेहतर होता है.

यहां बताया गया है कि Chrome 103 में, लिंक का डिफ़ॉल्ट फ़ोकस स्टाइल कैसा दिखता है.

इसे बेहतर बनाने के लिए, अपनी स्टाइल को अपने हिसाब से रंगें. :focus के बजाय :focus-visible का इस्तेमाल करने पर, ब्राउज़र को यह तय करने का विकल्प मिलता है कि फ़ोकस स्टाइल दिखाना कब सही होगा. :focus स्टाइल सभी को दिखेगा. साथ ही, माउस, कीबोर्ड, और टच उपयोगकर्ताओं को भी दिखेगा. इससे कोई फ़र्क़ नहीं पड़ता कि उन्हें इनकी ज़रूरत है या नहीं. :focus-visible के साथ ब्राउज़र यह तय करने के लिए अंदरूनी अनुभव का इस्तेमाल करता है कि उन्हें सिर्फ़ कीबोर्ड इस्तेमाल करने वालों को दिखाना है या सभी लोगों को.

/* Remove the default :focus outline */
*:focus {
  outline: none;
}

/* Show a custom outline on :focus-visible */
*:focus-visible {
  outline: 2px solid var(--color-shades-dark);
  outline-offset: 4px;
}

यह ब्राउज़र पर :focus-visible के साथ काम करता है

ब्राउज़र सहायता

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 86
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 86
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 85 साल
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 15.4

सोर्स

आइटम पर फ़ोकस होने के दौरान, उन्हें अलग-अलग तरीकों से हाइलाइट किया जा सकता है. हमारा सुझाव है कि आप outline प्रॉपर्टी इस्तेमाल करें, क्योंकि यह लेआउट को नहीं तोड़ता. ऐसा border के साथ हो सकता है. साथ ही, यह Windows पर हाई कंट्रास्ट मोड के साथ भी अच्छी तरह से काम करता है. background-color या box-shadow ऐसी प्रॉपर्टी होती हैं जो अच्छा काम नहीं करतीं. ऐसा इसलिए, क्योंकि हो सकता है कि वे कस्टम कंट्रास्ट सेटिंग की मदद से, बिलकुल भी न दिखें.

देखें कि आठवां चरण: CodePen पर फ़ोकस स्टाइल को बेहतर बनाना.

बधाई हो! आपने एक ऐसा मेन नेविगेशन तैयार किया है जो काफ़ी बेहतर और आसान हो गया है. साथ ही, यह मोबाइल फ़्रेंडली और मोबाइल फ़्रेंडली भी है.

हमेशा कुछ न कुछ सुधार किया जा सकता है, उदाहरण के लिए:

• आपके पास नेविगेशन में फ़ोकस करने या छोटे व्यूपोर्ट पर पेज के बाकी हिस्से को इनर्ट करने का विकल्प है.
• कीबोर्ड इस्तेमाल करने वाले लोगों को नेविगेशन स्किप करने की अनुमति देने के लिए, पेज में सबसे ऊपर एक स्किप लिंक जोड़ा जा सकता है.

अगर आपको याद है कि इस लेख की शुरुआत कैसे हुई थी, और आपका लक्ष्य "न तो बहुत आसान होना चाहिए, न ही बहुत जटिल होना चाहिए", तो हम यहीं हैं. हालांकि, नेविगेशन की ज़रूरत से ज़्यादा बदलाव करना मुमकिन है.

नेविगेशन बनाम मेन्यू

नेविगेशन और मेन्यू के बीच साफ़ अंतर होता है. नेविगेशन, मिलते-जुलते दस्तावेज़ों पर नेविगेट करने के लिए लिंक के कलेक्शन होते हैं. मेन्यू, किसी दस्तावेज़ में की जाने वाली कार्रवाइयों का कलेक्शन होते हैं. कभी-कभी ये टास्क ओवरलैप होते हैं. आपके पास ऐसा नेविगेशन हो सकता है जिसमें कार्रवाई करने वाला बटन भी शामिल हो, जैसे कि मॉडल विंडो खोलना. इसके अलावा, आपके पास ऐसा मेन्यू भी हो सकता है जिसमें कोई कार्रवाई किसी दूसरे पेज पर नेविगेट करती हो, जैसे कि सहायता पेज. जब ऐसा होता है, तो यह ज़रूरी है कि ARIA रोल को मैच न करें, लेकिन अपने कॉम्पोनेंट के मुख्य मकसद की पहचान करें और उसके हिसाब से मार्कअप और रोल चुनें.

<nav> एलिमेंट में नेविगेशन का इंप्लिसिट ARIA रोल होता है, जो यह बताने के लिए काफ़ी होता है कि एलिमेंट एक नेविगेशन है. हालांकि, अक्सर आपको साइटों में मेन्यू, मेन्यूबार, और मेन्यू आइटम का इस्तेमाल दिखता है. हम कभी-कभी इन शब्दों का इस्तेमाल एक-दूसरे की जगह पर करते हैं. इसलिए, स्क्रीन रीडर का इस्तेमाल करने वालों के अनुभव को बेहतर बनाने के लिए, इन्हें एक साथ इस्तेमाल करने पर विचार करना सही होगा. ऐसा होने की वजह जानने से पहले, आइए इन भूमिकाओं की आधिकारिक परिभाषा पर एक नज़र डालें.

नेविगेशन की भूमिका

दस्तावेज़ या उससे जुड़े दस्तावेज़ों पर नेविगेट करने के लिए, नेविगेशनल एलिमेंट (आम तौर पर, लिंक) का कलेक्शन.

नेविगेशन (भूमिका) WAI-ARIA 1.1

मेन्यू की भूमिका

मेन्यू में अक्सर ऐसी सामान्य कार्रवाइयों या फ़ंक्शन की सूची होती है जिन्हें उपयोगकर्ता शुरू कर सकता है. मेन्यू भूमिका तब सही होती है, जब मेन्यू आइटम की सूची को डेस्कटॉप ऐप्लिकेशन के मेन्यू की तरह ही दिखाया जाता है.

मेन्यू (भूमिका) WAI-ARIA 1.1

मेन्यू बार की भूमिका

मेन्यू का ऐसा प्रज़ेंटेशन जो आम तौर पर दिखता रहता है और जिसे आम तौर पर हॉरिज़ॉन्टल तौर पर दिखाया जाता है. मेन्यूबार वाली भूमिका का इस्तेमाल, मेन्यू बार बनाने के लिए किया जाता है. यह मेन्यू बार, Windows, Mac, और Gnome डेस्कटॉप ऐप्लिकेशन में मिलने वाले मेन्यू बार से मिलता-जुलता है. अक्सर इस्तेमाल किए जाने वाले कमांड का एक जैसा सेट बनाने के लिए, मेन्यू बार का इस्तेमाल किया जाता है. लेखकों को यह पक्का करना चाहिए कि मेन्यू बार इंटरैक्शन, डेस्कटॉप ग्राफ़िकल यूज़र इंटरफ़ेस के सामान्य मेन्यू बार इंटरैक्शन की तरह ही हो.

मेन्यूबार (भूमिका) WAI-ARIA 1.1

मेन्यू आइटम की भूमिका

मेन्यू या मेन्यूबार में मौजूद विकल्पों के सेट का कोई विकल्प.

मेन्यू आइटम (भूमिका) WAI-ARIA 1.1

यहां दी गई जानकारी पूरी तरह से साफ़ है. दस्तावेज़ या उससे जुड़े दस्तावेज़ों को नेविगेट करने के लिए, नेविगेशन का इस्तेमाल करें. ऐसा सिर्फ़ डेस्कटॉप ऐप्लिकेशन के मेन्यू से मिलती-जुलती कार्रवाइयों या फ़ंक्शन की सूची के लिए करें. अगर आप अगला 'Google दस्तावेज़' नहीं बना रहे हैं, तो हो सकता है कि आपको मुख्य नेविगेशन के लिए किसी भी मेन्यू भूमिका की ज़रूरत न हो.

मेन्यू कब सही होता है?

मेन्यू आइटम का मुख्य इस्तेमाल नेविगेशन नहीं होता, बल्कि कार्रवाइयां करना होता है. मान लें कि आपके पास डेटा की एक सूची या टेबल है और उपयोगकर्ता, सूची के हर आइटम पर कुछ खास कार्रवाइयां कर सकते हैं. हर पंक्ति में एक बटन जोड़ा जा सकता है. साथ ही, उपयोगकर्ताओं के बटन पर क्लिक करने पर कार्रवाइयां दिखाई जा सकती हैं.

<ul>
  <li>
    Product 1

    <button aria-expanded="false" aria-controls="options1">Edit</button>

    <div role="menu" id="options1">
      <button role="menuitem">
        Duplicate
      </button>
      <button role="menuitem">
        Delete
      </button>
      <button role="menuitem">
        Disable
      </button>
    </div>
  </li>
  <li>
    Product 2
    ...
  </li>
</ul>

मेन्यू में भूमिकाओं का इस्तेमाल करने से जुड़े असर

मेन्यू की इन भूमिकाओं का इस्तेमाल सोच-समझकर करना ज़रूरी है, क्योंकि इसमें बहुत सारी चीज़ें गलत हो सकती हैं.

मेन्यू में एक खास डीओएम स्ट्रक्चर की उम्मीद की जाती है. menuitem, menu का चाइल्ड आइटम होना चाहिए. यह कोड सिमैंटिक व्यवहार को तोड़ सकता है:

 <!-- Wrong, don't do this -->
<ul role="menu">
  <li>
    <a href="#" role="menuitem">Item 1</a>
  </li>
</ul>

जानकार उपयोगकर्ता उम्मीद करते हैं कि कुछ कीबोर्ड शॉर्टकट मेन्यू और मेन्यू के साथ काम करेंगे. ARIA ऑथरिंग प्रैक्टिस गाइड (एपीजी) में यह कॉन्टेंट शामिल है:

• मेन्यू आइटम चुनने के लिए, Enter और Space चुनें.
• आइटम के बीच नेविगेट करने के लिए सभी दिशाओं में तीर कुंजियां.
• फ़ोकस को पहले या आखिरी आइटम पर ले जाने के लिए, Home और End बटन.
• a-z दबाकर फ़ोकस को अगले मेन्यू आइटम पर ले जाएं.
• मेन्यू बंद करने के लिए, Esc.

अगर स्क्रीन रीडर को मेन्यू का पता चलता है, तो सॉफ़्टवेयर अपने-आप ब्राउज़िंग मोड को बदल सकता है. इससे, ऊपर बताए गए शॉर्टकट का इस्तेमाल करने में आसानी होगी. ऐसा हो सकता है कि स्क्रीन रीडर का इस्तेमाल न करने वाले लोग, मेन्यू का इस्तेमाल न कर पाएं, क्योंकि उन्हें इन शॉर्टकट या इन्हें इस्तेमाल करने का तरीका नहीं पता होता.

यह तरीका कीबोर्ड का इस्तेमाल करने वाले उन लोगों के लिए भी लागू होता है जो Shift और Shift + Tab का इस्तेमाल करने की उम्मीद कर सकते हैं.

मेन्यू और मेन्यू बार बनाते समय, आपको कई बातों का ध्यान रखना चाहिए. जैसे, उन्हें सबसे पहले इस्तेमाल करना सही है या नहीं. जब आप कोई सामान्य वेबसाइट बना रहे हों, तो आपको बस सूची और लिंक वाले नेविगेशन एलिमेंट की ज़रूरत होती है. इसमें सिंगल पेज ऐप्लिकेशन (एसपीए) या वेब ऐप्लिकेशन भी शामिल हैं. इसमें मौजूद स्टैक से कोई फ़र्क़ नहीं पड़ता. अगर किसी डेस्कटॉप ऐप्लिकेशन के बहुत पास कोई चीज़ नहीं बनाई जा रही है, तो मेन्यू भूमिकाओं से बचें.

अतिरिक्त संसाधन

• स्कॉट ओ'हारा की सूचियों को ठीक करना.
• एड्रियन रोज़ेली की ओर से Site Nav के लिए, ARIA मेन्यू रोल का इस्तेमाल न करें.
• मेन्यू और हायडन पिकरिंग की ओर से मेन्यू के बटन.
• मार्को ज़ेहे के WAI-ARIA मेन्यू में बताया गया है कि आपको इनका इस्तेमाल सावधानी से क्यों करना चाहिए.
• किटी जिरोडेल का कॉन्टेंट ज़िम्मेदारी से छिपाना.
• मथायस ओटीटी का :focus-visible Is Here

मिक हॉप्ट की हीरो इमेज