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

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

Manuel Matuzović

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

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

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

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

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

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

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

ध्यान दें: अगर आपने अपने एचटीएमएल की पुष्टि की है और पुष्टि करने वाली सेवा से "एलिमेंट 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 और CSS की बुनियादी जानकारी है, तो यह काम किया जा सकता है. हालांकि, आपको UX और सुलभता के मामले में कई बातों का ध्यान रखना होगा.

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

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

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

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

Browser Support

• 86
• 86
• 85
• 15.4

Source

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

menubar (role) WAI-ARIA 1.1

menuitem की भूमिका

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

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>

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

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

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

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

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

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

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

कीबोर्ड का इस्तेमाल करने वाले लोग भी Shift और Shift + Tab का इस्तेमाल कर सकते हैं.

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

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

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

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