লুকানো কন্টেন্ট সার্চ করুন

ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে, স্ক্রিনের জায়গা বাঁচাতে বা পৃষ্ঠার পারফর্ম্যান্স বাড়াতে, ওয়েব ইন্টারফেস প্রায়ই কন্টেন্ট লুকিয়ে রাখে। display: none বা visibility: hidden-এর মতো চিরাচরিত পদ্ধতি কন্টেন্টকে দৃশ্যত আড়াল করার জন্য কাজ করে, তবে সেগুলি স্ক্রিন রিডার এবং "পৃষ্ঠায় খুঁজুন"-এর মতো ব্রাউজার ফিচারের জন্য সেই কন্টেন্টকে সম্পূর্ণভাবে অ্যাক্সেসযোগ্য করে তোলে।

কন্টেন্টকে ভিজ্যুয়ালি লুকিয়ে রাখতে, কিন্তু ব্যবহারকারীদের জন্য সার্চযোগ্য রাখতে এবং URL ফ্র্যাগমেন্ট ও "টেক্সট ফ্র্যাগমেন্টে স্ক্রল করুন" লিঙ্কের মাধ্যমে ডিপ লিঙ্ক করার সুবিধা চালু করতে, আপনি HTML <details> এলিমেন্ট অথবা hidden="until-found" অ্যাট্রিবিউট ব্যবহার করতে পারেন। <details> এলিমেন্ট সাধারণত সাজেস্ট করা হয় কারণ এটি প্রয়োগ ও রক্ষণাবেক্ষণ করা সহজ, তবে কিছু জটিল ক্ষেত্রে <details> যথেষ্ট নয় এবং hidden="until-found" প্রয়োজন হয়।

যেমন:

• আপনি যদি দেখান/লুকান মেকানিজমের স্টাইলিংয়ের উপর সম্পূর্ণ কন্ট্রোল চান।
• কন্টেন্ট দেখানো/লুকানোর জন্য UI কন্ট্রোল DOM-এর অন্য অংশে থাকলে।
• কন্টেন্ট দেখানোর পরে আপনি যদি সেটি লুকানোর সুবিধা দিতে না চান।

কীভাবে প্রয়োগ করতে হয়

<details> এলিমেন্টে ডিফল্ট হিসেবে সার্চযোগ্য ও অ্যাক্সেসযোগ্য টেক্সট থাকে এবং কোনও বিশেষ প্রয়োগের প্রয়োজন হয় না। সম্ভব হলে, hidden="until-found"-এর পরিবর্তে <details> ব্যবহার করুন।

পরিবর্তে আপনাকে hidden="until-found" ব্যবহার করতে হলে, এইসব নির্দেশাবলী অনুসরণ করুন:

1. অ্যাট্রিবিউট প্রয়োগ করুন: যে কন্টেন্ট ভিউ থেকে লুকানো উচিত, সেই কন্টেন্ট সহ এলিমেন্টে সরাসরি hidden="until-found" HTML অ্যাট্রিবিউট যোগ করুন।
2. UI স্টেট সিঙ্ক করা: ইন্টারফেসে যদি কন্টেন্টের দৃশ্যমানতার উপর নির্ভর করে এমন সম্পর্কিত স্টেট থাকে (যেমন, ARIA অ্যাট্রিবিউট আপডেট করা, CSS ক্লাস খোলা/বন্ধ করা টগল করা বা অ্যাকর্ডিয়ন আইকন ঘোরানো):
   • আপনাকে beforematch ইভেন্টের জন্য ইভেন্ট লিসনার অবশ্যই যোগ করতে হবে।
   • hidden="until-found" অ্যাট্রিবিউট বহনকারী এলিমেন্টে সরাসরি beforematch ইভেন্ট লিসনার রেজিস্টার করুন। ইভেন্ট বাবল হওয়ার কারণে, আপনি বিকল্প হিসেবে ইভেন্ট ডেলিগেশন ব্যবহার করতে পারেন। এর জন্য আপনাকে পেরেন্ট এলিমেন্টে (যেমন, ট্যাব কন্টেনার) একটি লিসেনার রেজিস্টার করতে হবে। এর ফলে আপনি একসাথে একাধিক লুকানো বিভাগ ম্যানেজ করতে পারবেন।
   • ইভেন্ট লিসেনারের মধ্যে, সম্পর্কিত UI এলিমেন্ট সিঙ্ক করার জন্য লজিক এক্সিকিউট করুন (যেমন, অন্যান্য খোলা ট্যাব বন্ধ করা বা টগল বোতামের স্ট্যাটাস পরিবর্তন করা)।

কোডের উদাহরণ

লক্ষ্য: এমন একটি লুকানো কন্টেনার রেন্ডার করা যেখানে ব্যবহারকারী সেই বিভাগের মধ্যে কোনও শব্দ সার্চ না করা পর্যন্ত কন্টেন্টটি ব্যবহারকারীর কাছে অদৃশ্য থাকে।

<details> এলিমেন্ট ব্যবহার করা হচ্ছে

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

মিউচুয়ালি এক্সক্লুসিভ ডিসক্লোজার

মিউচুয়ালি এক্সক্লুসিভ কন্টেন্ট অঞ্চল, যেমন এক্সক্লুসিভ অ্যাকর্ডিয়ন ম্যানেজ করার সময়, শেয়ার করা name অ্যাট্রিবিউট সহ নেটিভ HTML <details> এলিমেন্ট ব্যবহার করুন।

<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 স্টেট সিঙ্ক্রোনাইজ করতে হবে, যেমন কন্ট্রোলিং বোতামে 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" অ্যাট্রিবিউট সহ এলিমেন্টে সরাসরি প্রয়োগ করার পরিবর্তে নেস্ট করা চাইল্ড র‍্যাপারে বর্ডার, প্যাডিং ও ব্যাকগ্রাউন্ড প্রয়োগ করুন। এলিমেন্ট লুকানো থাকাকালীন এটি অনিচ্ছাকৃত লেআউট শিফ্ট বা ভিজ্যুয়াল রেমন্যান্ট প্রতিরোধ করে।
• hidden="until-found" অ্যাট্রিবিউট সহ এলিমেন্টে সরাসরি display: none, visibility: hidden বা যেকোনও সংশ্লিষ্ট display বা visibility CSS প্রপার্টি প্রয়োগ করবেন না। এটি নেটিভ কার্যকারিতা ভেঙে দেয় এবং সার্চ ইন্ডেক্স থেকে কন্টেন্ট স্থায়ীভাবে লুকিয়ে দেয়।
• সংবেদনশীল তথ্য, ইন্টার্নাল ডেটা টোকেন বা অপ্রাসঙ্গিক ডেটা যা সার্চের মাধ্যমে প্রকাশ করা উচিত নয়, তার জন্য hidden="until-found" ব্যবহার করবেন না।
• "শুধুমাত্র স্ক্রিন রিডার" (.sr-only) টেক্সটের পরিবর্তে hidden="until-found" ব্যবহার করবেন না।

ব্রাউজার সাপোর্ট ও ফলব্যাক স্ট্র্যাটেজি

ব্রাউজার সাপোর্ট না করার কারণে hidden="until-found" এড়িয়ে যাবেন না, কারণ এর অ্যাক্সেসিবিলিটি সংক্রান্ত সুবিধা ফলব্যাক প্রয়োগ করার খরচের চেয়ে অনেক বেশি।

hidden="until-found" ফলব্যাক

অ্যাকর্ডিয়ন বা "আরও পড়ুন" বিভাগের মতো স্ট্যান্ডার্ড UI এলিমেন্টের জন্য, ফিচার শনাক্ত করতে জাভাস্ক্রিপ্ট ব্যবহার করুন এবং ফিচারটি কাজ না করলে সব কন্টেন্ট দেখান।

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.
  });
}

পারস্পরিকভাবে এক্সক্লুসিভ UI প্যারাডাইমের (যেমন কাস্টম এক্সক্লুসিভ প্যানেল যেখানে কন্টেন্ট একই ভিজ্যুয়াল অঞ্চল শেয়ার করে) ক্ষেত্রে, ফলব্যাককে মূল ইন্টার‍্যাক্টিভ অঞ্চলের নিচে লিনিয়ারভাবে সব কন্টেন্ট এক্সট্র্যাক্ট ও দেখাতে হবে, যাতে URL অ্যাঙ্কর ফ্র্যাগমেন্ট ব্যবহার করে ব্যবহারকারীরা সরাসরি সংশ্লিষ্ট বিভাগে নেভিগেট করতে পারেন।