छिपाया गया कॉन्टेंट खोजना

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

कॉन्टेंट को विज़ुअल तौर पर छिपाने के लिए, एचटीएमएल <details> एलिमेंट या hidden="until-found" एट्रिब्यूट का इस्तेमाल किया जा सकता है. हालांकि, ऐसा करने पर भी उपयोगकर्ता कॉन्टेंट को खोज सकते हैं. साथ ही, यूआरएल फ़्रैगमेंट और "टेक्स्ट फ़्रैगमेंट पर स्क्रोल करें" लिंक के ज़रिए, कॉन्टेंट को डीप लिंक किया जा सकता है. आम तौर पर, <details> एलिमेंट का इस्तेमाल करने का सुझाव दिया जाता है. इसकी वजह यह है कि इसे लागू करना और मैनेज करना आसान होता है. हालांकि, कुछ मामलों में <details> एलिमेंट का इस्तेमाल करना काफ़ी नहीं होता और hidden="until-found" एलिमेंट का इस्तेमाल करना ज़रूरी हो जाता है.

उदाहरण के लिए:

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

इन्हें कैसे लागू करें

<details> एलिमेंट में, खोजा जा सकने वाला और ऐक्सेस किया जा सकने वाला टेक्स्ट डिफ़ॉल्ट रूप से मौजूद होता है. इसके लिए, किसी खास तरीके को अपनाने की ज़रूरत नहीं होती. अगर हो सके, तो hidden="until-found" के बजाय <details> का इस्तेमाल करें.

अगर आपको hidden="until-found" का इस्तेमाल करना है, तो यह तरीका अपनाएं:

1. एट्रिब्यूट लागू करें: hidden="until-found" एचटीएमएल एट्रिब्यूट को सीधे उन एलिमेंट में जोड़ें जिनमें मौजूद कॉन्टेंट को छिपाना है.
2. यूज़र इंटरफ़ेस (यूआई) की स्थिति को सिंक करना: अगर इंटरफ़ेस में ऐसी स्थितियां हैं जो कॉन्टेंट के दिखने पर निर्भर करती हैं (जैसे, ARIA एट्रिब्यूट अपडेट करना, सीएसएस क्लास को चालू/बंद करना या अकॉर्डियन आइकॉन को घुमाना):
   • आपको beforematch इवेंट के लिए, इवेंट लिसनर ज़रूर जोड़ना चाहिए.
   • beforematch इवेंट लिसनर को सीधे उस एलिमेंट पर रजिस्टर करें जिसमें hidden="until-found" एट्रिब्यूट मौजूद है. इवेंट बबल होने की वजह से, इवेंट डेलिगेशन का इस्तेमाल भी किया जा सकता है. इसके लिए, पैरंट एलिमेंट (जैसे, टैब कंटेनर) पर एक लिसनर को रजिस्टर करें, ताकि छिपे हुए कई सेक्शन को एक साथ मैनेज किया जा सके.
   • इवेंट लिसनर में, मिलते-जुलते यूज़र इंटरफ़ेस (यूआई) एलिमेंट को सिंक करने के लिए लॉजिक को लागू करें. जैसे, खुले हुए अन्य टैब बंद करना या टॉगल बटन की स्थिति बदलना.

कोड का उदाहरण

मकसद: एक छिपा हुआ कंटेनर रेंडर करना, जिसमें मौजूद कॉन्टेंट उपयोगकर्ता को तब तक नहीं दिखता, जब तक वह उस सेक्शन में मौजूद किसी शब्द को खोजता नहीं है.

<details> एलिमेंट का इस्तेमाल करना

<details>
  <summary>Click to expand</summary>
  <p>This content is visually hidden.</p>
</details>

म्यूचुअली एक्सक्लूसिव डिसक्लोज़र

एक-दूसरे से अलग कॉन्टेंट वाले सेक्शन को मैनेज करते समय, नेटिव एचटीएमएल <details> एलिमेंट का इस्तेमाल करें. साथ ही, शेयर किए गए name एट्रिब्यूट का इस्तेमाल करें. जैसे, खास अकॉर्डियन.

<div class="accordion-group">
  <!-- The name attribute creates an exclusive disclosure group -->
  <details class="disclosure" name="my-accordion">
    <summary>Section 1</summary>
    <p>Section 1 content</p>
  </details>

  <details class="disclosure" name="my-accordion" open>
    <summary>Section 2</summary>
    <p>Section 2 content</p>
  </details>

  <details class="disclosure" name="my-accordion">
    <summary>Section 3</summary>
    <p>Section 3 content</p>
  </details>
</div>

hidden="until-found" एट्रिब्यूट का इस्तेमाल करना

<!-- The browser automatically removes hidden="until-found" upon a search match -->
<div class="hidden-container" hidden="until-found">
  <p>This content is visually hidden.</p>
</div>

म्यूचुअली एक्सक्लूसिव डिसक्लोज़र को पसंद के मुताबिक बनाना

बाहरी बटन से कंट्रोल किए जाने वाले कस्टम म्यूचुअली एक्सक्लूसिव रीजन को मैनेज करते समय, पक्का करें कि सिर्फ़ मैच होने वाला पैनल दिखे. beforematch इवेंट हैंडलर में, आपको एआरआईए की संबंधित स्थितियों को सिंक करना होगा. जैसे, कंट्रोल करने वाले बटन पर aria-expanded="true" सेट करना.

<div class="custom-accordion">
  <div class="controls">
    <button aria-expanded="true" aria-controls="panel-1" id="btn-1">Section 1</button>
    <button aria-expanded="false" aria-controls="panel-2" id="btn-2">Section 2</button>
  </div>

  <div id="panel-1" class="panel">
    <p>Section 1 content (visible)</p>
  </div>

  <div id="panel-2" class="panel" hidden="until-found">
    <p>Section 2 content (hidden)</p>
  </div>
</div>

const accordion = document.querySelector('.custom-accordion');

accordion.addEventListener('beforematch', (e) => {
  // Hide all panels and synchronize button states before the browser reveals the matched panel
  accordion.querySelectorAll('.panel').forEach((panel) => {
    if (panel !== e.target) {
      panel.hidden = 'until-found';
    }
  });
  accordion.querySelectorAll('button').forEach((btn) => {
    const controls = btn.getAttribute('aria-controls');
    btn.setAttribute('aria-expanded', controls === e.target.id ? 'true' : 'false');
  });
});

hidden="until-found" के लिए सबसे सही तरीके

• hidden="until-found" एट्रिब्यूट वाले एलिमेंट पर सीधे तौर पर बॉर्डर, पैडिंग, और बैकग्राउंड लागू करने के बजाय, नेस्ट किए गए चाइल्ड रैपर पर लागू करें. इससे एलिमेंट के छिपे होने पर, लेआउट में अनचाहे बदलाव या विज़ुअल अवशेष दिखने से बचा जा सकता है.
• display: none, visibility: hidden या इनसे जुड़ी किसी भी display या visibility सीएसएस प्रॉपर्टी को सीधे तौर पर hidden="until-found" एट्रिब्यूट वाले एलिमेंट पर लागू न करें. इससे नेटिव फ़ंक्शन काम नहीं करता और कॉन्टेंट, Search इंडेक्स से हमेशा के लिए छिप जाता है.
• संवेदनशील जानकारी, अंदरूनी डेटा टोकन या ऐसे डेटा के लिए hidden="until-found" का इस्तेमाल न करें जो काम का न हो और जिसे खोज के नतीजों में नहीं दिखाया जाना चाहिए.
• hidden="until-found" का इस्तेमाल, "सिर्फ़ स्क्रीन रीडर" (.sr-only) टेक्स्ट के विकल्प के तौर पर न करें.

ब्राउज़र से जुड़ी सहायता और फ़ॉलबैक रणनीतियां

ब्राउज़र के साथ काम न करने की वजह से, hidden="until-found" का इस्तेमाल करना बंद न करें. ऐसा इसलिए, क्योंकि सुलभता के मामले में इसके फ़ायदे, फ़ॉलबैक लागू करने की लागत से कहीं ज़्यादा हैं.

hidden="until-found" फ़ॉलबैक

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

if (!('onbeforematch' in HTMLElement.prototype)) {
  // Expand all hidden content for unsupported browsers
  document.querySelectorAll('[hidden="until-found"]').forEach((el) => {
    el.removeAttribute('hidden');
    // MANDATORY: also update any aria references to this element.
  });
}

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