नेविगेशन

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

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

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

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

"सीधे कॉन्टेंट पर जाएं" लिंक

कुछ साइटों पर "कॉन्टेंट पर जाएं" लिंक होता है. यह अक्सर फ़ोकस ऑर्डर में पहला एलिमेंट होता है. यह कुछ ऐसा दिख सकता है:

<a href="#main" class="skip-link button">Skip to main</a>

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

<main id="main">

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

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

सिर्फ़ ऐसे कॉन्टेंट को छिपाएं जो फ़ोकस में नहीं है और चालू नहीं है. इसके लिए, .visually-hidden:not(:focus):not(:active) जैसा सिलेक्टर इस्तेमाल करें.

लिंक टेक्स्ट की तरह ही, नाम से साफ़ तौर पर पता चलना चाहिए कि लिंक पर क्लिक करने से उपयोगकर्ता को कहां ले जाया जाएगा. लिंक का टारगेट, पेज के मुख्य कॉन्टेंट की शुरुआत होनी चाहिए.

कॉन्टेंट का टेबल

हमारे मुख्य कॉन्टेंट का पहला एलिमेंट, <h1> हेडिंग है. इसमें इस पेज का टाइटल दिया गया है: <h1>Navigation</h1>. मुख्य हेडिंग के बाद, इस ट्यूटोरियल के कॉन्टेंट के बारे में कम शब्दों में जानकारी दी गई है.

छोटी स्क्रीन पर, विषय-सूची हेडिंग के बाद दिखती है. बड़ी स्क्रीन पर, यह दाईं ओर अलाइन किए गए साइडबार में दिखता है.

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

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

id का इस्तेमाल करके, यह इस तरह दिख सकता है:

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
...
</nav>

दिखने वाले टेक्स्ट का अनुवाद, अनुवाद सेवाओं की मदद से किया जाता है. हालांकि, एट्रिब्यूट वैल्यू का अनुवाद नहीं किया जा सकता. इससे, एक ही जानकारी को बार-बार दिखाने की समस्या कम हो जाती है. अगर टेक्स्ट मौजूद है और वह लेबल के लिए ज़रूरी जानकारी देता है, तो एट्रिब्यूट टेक्स्ट का इस्तेमाल करने के बजाय उस टेक्स्ट का इस्तेमाल करें.

"इस पेज पर" नेविगेशन, कॉन्टेंट की टेबल होती है. अगर आपको aria-label का इस्तेमाल करना है, तो दिखने वाले टेक्स्ट को दोहराने के बजाय, उस कॉन्टेक्स्ट के बारे में बताएं:

<nav aria-label="Table of Contents">
  <p>On this page</p>
...
</nav>

किसी एलिमेंट पर ऐक्सेस किया जा सकने वाला नाम देने के लिए, आपको एलिमेंट का नाम शामिल नहीं करना चाहिए. स्क्रीन रीडर, उपयोगकर्ता को एलिमेंट का नाम बताते हैं. उदाहरण के लिए, <nav> एलिमेंट का इस्तेमाल करते समय, "नेविगेशन" शब्द शामिल न करें, क्योंकि यह जानकारी पहले से ही सिमैंटिक एलिमेंट के साथ शामिल होती है.

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

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
  <ul role="list">
    <li>
      <a href="#skip">Skip to content link</a>
    </li>
    <li>
      <a href="#toc">Table of contents</a>
    </li>
    <li>
      <a href="#bc">Page breadcrumbs</a>
    </li>
    <li>
      <a href="#ln">Local navigation</a>
    </li>
    <li>
      <a href="#global">Global navigation</a>
    </li>
  </ul>
</nav>

टैब के क्रम में बदलाव करने से बचें

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

हमने 1254 पिक्सल से ज़्यादा चौड़ाई वाले पेजों पर, नेविगेशन को साइडबार के तौर पर दिखाने के लिए सीएसएस का इस्तेमाल किया है.

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

पेज के ब्रेडक्रंब

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

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

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

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

const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"

ब्रेडक्रंब के सेक्शन, मौजूदा पेज से होम पेज तक का पाथ दिखाते हैं. साथ ही, बीच के हर लेवल को दिखाते हैं.

'एचटीएमएल सीखें' मॉड्यूल के हर पेज पर एक जैसा ब्रेडक्रंब नेविगेशन होता है. इसमें web.dev के Learn सेक्शन में मौजूद HTML लेसन की क्रमवार जानकारी दिखती है.

कोड कुछ ऐसा दिखना चाहिए:

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">web.dev</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">HTML</a>
    </li>
  </ol>
</nav>

<nav> एलिमेंट, लैंडमार्क की भूमिका निभाता है. यह सुलभता टेक्नोलॉजी को बताता है कि पेज पर ब्रेडक्रंब को नेविगेशन एलिमेंट के तौर पर दिखाएं. aria-label के साथ दिए गए "ब्रेडक्रंब" का ऐक्सेस किया जा सकने वाला नाम, इस नेविगेशन को एक ही दस्तावेज़ में मौजूद अन्य नेविगेशन लैंडमार्क से अलग करता है.

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

[aria-label^="breadcrumbs" i] li + li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  opacity: .8
}

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

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

आम तौर पर, ब्रेडक्रंब में होम पेज का लिंक, साइट के नाम या साइट के लोगो के बजाय "होम" के तौर पर दिखना चाहिए. ब्रेडक्रंब, दस्तावेज़ में सबसे ऊपर है. इसलिए, यह समझ में आता है कि इस एंटी-पैटर्न का इस्तेमाल क्यों किया गया.

मौजूदा पेज, नेविगेशन, को ब्रेडक्रंब में शामिल नहीं किया गया है.

वर्तमान पेज

जब मौजूदा पेज को ब्रेडक्रंब में शामिल किया जाता है, तो टेक्स्ट को लिंक के तौर पर इस्तेमाल नहीं किया जाना चाहिए. साथ ही, aria-current="page" को मौजूदा पेज के सूची आइटम में शामिल किया जाना चाहिए. अगर इसे शामिल नहीं किया गया है, तो यह बताना मददगार होता है कि इसके बाद वाली हेडिंग, मौजूदा पेज है. इसके लिए, आइकॉन या किसी अन्य सिंबल का इस्तेमाल करें.

इस प्रैक्टिस की मदद से, ब्रेडक्रंब के किसी अन्य वर्शन को देखें:

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
    <li aria-current="page">
      Navigation
    </li>
  </ol>
</nav>

ऐसा हो सकता है कि ब्रेडक्रंब, उस क्रम में न हों जिस क्रम में उपयोगकर्ता ने मौजूदा पेज पर पहुंचने के लिए कार्रवाई की थी. इस पॉइंट तक किए गए चरणों की सूची को <nav> में नेस्ट किया जा सकता है. हालांकि, इसे ब्रेडक्रंब के तौर पर लेबल नहीं किया जाना चाहिए.

लोकल नेविगेशन

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

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

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

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

aria-current="page" एट्रिब्यूट का इस्तेमाल करके भी मौजूदा पेज की पहचान की जा सकती है. इससे सहायक टेक्नोलॉजी को यह पता चलता है कि लिंक, मौजूदा पेज पर ले जाता है.

आदर्श रूप से, लोकल नेविगेशन में इस सूची आइटम के लिए एचटीएमएल कुछ ऐसा दिखेगा:

<li>
  <a aria-current="page" aria-selected="true" href="/learn/html/navigation">
    Navigation
  </a>
</li>

ग्लोबल नेविगेशन

ग्लोबल नेविगेशन से वेबसाइट के टॉप-लेवल पेजों पर पहुंचा जा सकता है. यह साइट के हर पेज पर एक जैसा होता है. किसी साइट का ग्लोबल नेविगेशन, टैब से भी बना हो सकता है. ये टैब, लिंक की नेस्ट की गई सूचियां खोलते हैं. ये लिंक, किसी साइट के सभी सब-सेक्शन या अन्य मेन्यू से लिंक होते हैं. इसमें टाइटल वाले सेक्शन, बटन, और खोज के लिए विजेट शामिल हो सकते हैं. इन अतिरिक्त सुविधाओं का इस्तेमाल करना ज़रूरी नहीं है. यह ज़रूरी है कि नेविगेशन हर पेज पर दिखे और हर पेज पर एक जैसा हो. साथ ही, मौजूदा पेज के किसी भी लिंक पर aria-current="page" मौजूद हो.

ग्लोबल नेविगेशन की मदद से, ऐप्लिकेशन या वेबसाइट में कहीं भी आसानी से जाया जा सकता है. Google की वेबसाइट के पेजों पर सबसे ऊपर ग्लोबल नेविगेशन नहीं है. Yahoo! करता है. Yahoo! की सभी मुख्य प्रॉपर्टी के स्टाइल अलग-अलग हैं. हालांकि, ज़्यादातर सेक्शन का कॉन्टेंट एक जैसा है.

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

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

आम तौर पर, फ़ुटर में कॉर्पोरेट लिंक शामिल होते हैं. जैसे, कानूनी स्टेटमेंट, कंपनी के बारे में जानकारी, करियर पेज, और काम के बाहरी सोर्स के लिंक. जैसे, सोशल मीडिया.

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

इसके बाद, हम डेटा टेबल को मार्क अप करने के बारे में जानेंगे.

देखें कि आपको कितना समझ आया

नेविगेशन के बारे में अपनी जानकारी को परखें.