Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

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

इस ट्यूटोरियल में, किसी वेबसाइट के लिए सुलभ मुख्य नेविगेशन बनाने का तरीका बताया गया है. आपको सिमैंटिक एचटीएमएल, सुलभता, और 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);
}

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

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

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

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

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

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

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

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

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

aria-current (state) से उस एलिमेंट का पता चलता है जो किसी कंटेनर या मिलते-जुलते एलिमेंट के सेट में मौजूद मौजूदा आइटम को दिखाता है. पेज टोकन का इस्तेमाल, पेजों में बांटे गए खोज नतीजों के सेट में मौजूद किसी लिंक को दिखाने के लिए किया जाता है. इस लिंक को विज़ुअल तौर पर इस तरह से स्टाइल किया जाता है कि वह मौजूदा पेज को दिखाए. [Accessible Rich Internet Applications (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 लिंक हैं, तो यह काम मुश्किल हो सकता है. अगर स्क्रीन रीडर का इस्तेमाल करने वाले किसी व्यक्ति को पहले से पता है कि नेविगेशन में कई लिंक हैं, तो वह नेविगेशन के लिए कोई दूसरा और ज़्यादा असरदार तरीका इस्तेमाल कर सकता है. जैसे, साइट खोज.
आइटम की संख्या को पहले ही बताने का एक अच्छा तरीका है कि हर लिंक को सूची के आइटम (<li>) में रैप किया जाए. साथ ही, उसे बिना क्रम वाली सूची (<ul>) में नेस्ट किया जाए.

<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> पर एआरआईए सूची की भूमिका को साफ़ तौर पर सेट करके, इस समस्या को हल किया जा सकता है. इससे सूची की स्टाइलिंग को हटाने से पहले वाली स्थिति वापस आ जाती है. हालांकि, सूची अब भी पहले जैसी ही दिखती है.

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

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

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

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

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

चार लैंडमार्क की सूची: बैनर, नेविगेशन, मुख्य, कॉन्टेंट की जानकारी. — VoiceOver में रोटर, पेज पर मौजूद सभी लैंडमार्क की सूची दिखा रहा है.

इस सूची में आपको चार लैंडमार्क दिखते हैं: बैनर जो <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>

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

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

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

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

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

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

प्रोग्रेसिव एनहैंसमेंट के सिद्धांत का पालन करने के लिए, आपको यह पक्का करना होगा कि 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>

aria-expanded एट्रिब्यूट से स्क्रीन रीडर सॉफ़्टवेयर को पता चलता है कि बटन से कंट्रोल किया जाने वाला एलिमेंट बड़ा किया गया है या नहीं.
aria-label, बटन को ऐक्सेस किया जा सकने वाला नाम देता है. यह बर्गर आइकॉन के लिए टेक्स्ट का विकल्प है.
आपने aria-hidden का इस्तेमाल करके, सहायक टेक्नोलॉजी से <svg> को छिपाया है. ऐसा इसलिए, क्योंकि इसमें पहले से ही aria-label से मिला टेक्स्ट लेबल मौजूद है.
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);

उपयोगकर्ताओं के लिए यह सुविधाजनक होता है कि वे जब चाहें, नेविगेशन को बंद कर सकें. उदाहरण के लिए, Escape बटन दबाकर.
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 जैसी किसी दूसरी प्रॉपर्टी के साथ जोड़कर, स्लाइड-इन या फ़ेड-इन इफ़ेक्ट बनाया जा सकता है. यह display: none के साथ काम नहीं करेगा, क्योंकि display प्रॉपर्टी को ऐनिमेट नहीं किया जा सकता.

फ़ेड-इन और फ़ेड-आउट इफ़ेक्ट बनाने के लिए, यहां दिए गए सीएसएस ट्रांज़िशन 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 में, लिंक पर डिफ़ॉल्ट फ़ोकस स्टाइल इस तरह दिखती है.

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` के लिए ब्राउज़र सहायता

Browser Support

Source

साफ़ तौर पर दिखने वाली गहरे रंग की 2 पिक्सल की आउटलाइन, जिसमें अंदर स्पेस हो.

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

गहरे रंग के बैकग्राउंड वाली साइट, जिसमें फ़ोकस को बैंगनी रंग से हाइलाइट किया गया है.

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

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

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

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

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

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

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

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

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

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

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

मेन्यू, आम तौर पर की जाने वाली कार्रवाइयों या फ़ंक्शन की सूची होती है. उपयोगकर्ता, इस सूची में मौजूद कार्रवाइयां या फ़ंक्शन इस्तेमाल कर सकता है. मेन्यू रोल तब सही होता है, जब मेन्यू आइटम की सूची को डेस्कटॉप ऐप्लिकेशन पर मौजूद मेन्यू की तरह दिखाया जाता है.
menu (role) WAI-ARIA 1.1

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

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

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

मेन्यू या मेन्यूबार में मौजूद विकल्पों के सेट में से कोई विकल्प.
menuitem (role) WAI-ARIA 1.1

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

मेन्यू का इस्तेमाल कब करना चाहिए?

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

<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 का इस्तेमाल कर सकते हैं.

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

अन्य संसाधन

स्कॉट ओ'हारा का लेख, Fixing Lists.
Adrian Roselli का Don't Use ARIA Menu Roles for Site Nav.
हेडन पिकरिंग की Menus & Menu Buttons.
WAI-ARIA मेन्यू और आपको उन्हें बहुत सावधानी से क्यों मैनेज करना चाहिए, मार्को ज़ेहे का लेख.
किटी गिरौडेल का लेख, कॉन्टेंट को ज़िम्मेदारी से छिपाना.
:focus-visible Is Here, मैथियास ऑट का लेख.