উদাহরণ HTML কাঠামো:

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-1" id="button-1">
        বিভাগ ১ শিরোনাম
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>বিভাগ ১ এর বিষয়বস্তু এখানে।</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-2" id="button-2">
        বিভাগ ২ শিরোনাম
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>বিভাগ ২ এর বিষয়বস্তু এখানে।</p>
    </div>
  </div>
</div>

২. ডাইনামিক কন্টেন্টের জন্য ARIA অ্যাট্রিবিউট

ARIA ভূমিকা এবং অবস্থা সহায়ক প্রযুক্তিগুলিকে অ্যাকর্ডিয়নের আচরণ সম্পর্কে অবহিত করার জন্য অত্যন্ত গুরুত্বপূর্ণ।

• `role="button"`: বিষয়বস্তু টগল করে এমন ইন্টারেক্টিভ উপাদানে (বোতাম)।
• `aria-expanded`: যখন বিষয়বস্তু প্যানেল দৃশ্যমান থাকে তখন `true` সেট করা হয় এবং যখন এটি লুকানো থাকে তখন `false` সেট করা হয়। এটি সরাসরি স্ক্রিন রিডারদের অবস্থা জানায়।
• `aria-controls`: বোতামে, এটি যে বিষয়বস্তু প্যানেল নিয়ন্ত্রণ করে তার `id` উল্লেখ করে। এটি একটি প্রোগ্রাম্যাটিক লিঙ্ক স্থাপন করে।
• `aria-labelledby`: বিষয়বস্তু প্যানেলে, এটি নিয়ন্ত্রণকারী বোতামের `id` উল্লেখ করে। এটি একটি দ্বিমুখী লিঙ্ক তৈরি করে।
• `role="region"`: বিষয়বস্তু প্যানেলে। এটি নির্দেশ করে যে বিষয়বস্তুটি পৃষ্ঠার একটি উপলব্ধিযোগ্য বিভাগ।
• `aria-hidden`: যদিও দৃশ্যমানতার অবস্থা নিয়ন্ত্রণের জন্য `aria-expanded` পছন্দনীয়, বর্তমানে প্রদর্শিত নয় এমন বিষয়বস্তু প্যানেলে `aria-hidden="true"` ব্যবহার করা যেতে পারে যাতে সেগুলি স্ক্রিন রিডার দ্বারা ঘোষণা করা না হয়। যাইহোক, CSS (`display: none;`) এর মাধ্যমে বিষয়বস্তু সঠিকভাবে লুকানো বা অ্যাক্সেসিবিলিটি ট্রি থেকে সরানো আরও শক্তিশালী।

`aria-hidden` বনাম `display: none` এর উপর নোট: CSS-এ `display: none;` ব্যবহার করা কার্যকরভাবে উপাদানটিকে অ্যাক্সেসিবিলিটি ট্রি থেকে সরিয়ে দেয়। আপনি যদি `display: none;` ছাড়া JavaScript ব্যবহার করে ডাইনামিকভাবে বিষয়বস্তু দেখাচ্ছেন/লুকাচ্ছেন, তাহলে `aria-hidden` আরও গুরুত্বপূর্ণ হয়ে ওঠে। যাইহোক, বিষয়বস্তু প্যানেল লুকানোর জন্য `display: none;` সাধারণত পছন্দের পদ্ধতি।

৩. কীবোর্ড দ্বারা পরিচালনা

নিশ্চিত করুন যে ব্যবহারকারীরা স্ট্যান্ডার্ড কীবোর্ড কমান্ড ব্যবহার করে অ্যাকর্ডিয়নের সাথে ইন্টারঅ্যাক্ট করতে পারে।

• ট্যাব নেভিগেশন: অ্যাকর্ডিয়ন হেডারগুলি ফোকাসযোগ্য হওয়া উচিত এবং পৃষ্ঠার স্বাভাবিক ট্যাব ক্রমে উপস্থিত হওয়া উচিত।
• সক্রিয়করণ: একটি ফোকাস করা অ্যাকর্ডিয়ন হেডারে `Enter` বা `Spacebar` চাপলে তার বিষয়বস্তু প্যানেলের দৃশ্যমানতা টগল করা উচিত।
• অ্যারো কী (ঐচ্ছিক কিন্তু প্রস্তাবিত): আরও উন্নত অভিজ্ঞতার জন্য, অ্যারো কী নেভিগেশন প্রয়োগ করার কথা বিবেচনা করুন:
  • `Arrow Down`: পরবর্তী অ্যাকর্ডিয়ন হেডারে ফোকাস সরান।
  • `Arrow Up`: পূর্ববর্তী অ্যাকর্ডিয়ন হেডারে ফোকাস সরান।
  • `Home`: প্রথম অ্যাকর্ডিয়ন হেডারে ফোকাস সরান।
  • `End`: শেষ অ্যাকর্ডিয়ন হেডারে ফোকাস সরান।
  • `Arrow Right` (বা `Enter`/`Space`): বর্তমান অ্যাকর্ডিয়ন আইটেমটি প্রসারিত/সংকুচিত করুন।
  • `Arrow Left` (বা `Enter`/`Space`): বর্তমান অ্যাকর্ডিয়ন আইটেমটি সংকুচিত করুন এবং ফোকাস হেডারে ফিরিয়ে আনুন।

৪. ভিজ্যুয়াল ফোকাস ইন্ডিকেটর

যখন একটি অ্যাকর্ডিয়ন হেডার কীবোর্ড ফোকাস পায়, তখন এটির একটি স্পষ্ট ভিজ্যুয়াল ইন্ডিকেটর থাকতে হবে। ডিফল্ট ব্রাউজার ফোকাস আউটলাইনগুলি প্রায়শই যথেষ্ট, তবে নিশ্চিত করুন যে সেগুলি CSS দ্বারা সরানো হয়নি (যেমন, `outline: none;`) একটি বিকল্প, অত্যন্ত দৃশ্যমান ফোকাস স্টাইল প্রদান না করে।

ফোকাসের জন্য উদাহরণ CSS:

.accordion-button:focus {
  outline: 3px solid blue; /* অথবা এমন একটি রঙ যা কনট্রাস্টের প্রয়োজনীয়তা পূরণ করে */
  outline-offset: 2px;
}

৫. বিষয়বস্তুর দৃশ্যমানতা এবং উপস্থাপনা

• ডিফল্ট অবস্থা: অ্যাকর্ডিয়ন বিভাগগুলি ডিফল্টভাবে সংকুচিত বা প্রসারিত থাকবে কিনা তা সিদ্ধান্ত নিন। FAQs বা ঘন তথ্যের জন্য, সংকুচিত অবস্থায় শুরু করা প্রায়শই সেরা। নেভিগেশন বা বৈশিষ্ট্য সারাংশের জন্য, ডিফল্টভাবে একটি বিভাগ প্রসারিত থাকা সহায়ক হতে পারে।
• ভিজ্যুয়াল কিউ: একটি বিভাগ প্রসারিত না সংকুচিত তা নির্দেশ করতে স্পষ্ট ভিজ্যুয়াল কিউ ব্যবহার করুন। এটি একটি আইকন হতে পারে (যেমন, একটি '+' বা '-' চিহ্ন, একটি উপরে/নিচে তীর) যা তার চেহারা পরিবর্তন করে। নিশ্চিত করুন যে এই আইকনগুলিও অ্যাক্সেসিবল (যেমন, যদি তাদের পাঠ্য না থাকে তবে `aria-label` এর মাধ্যমে)।
• কনট্রাস্ট অনুপাত: নিশ্চিত করুন যে অ্যাকর্ডিয়নের মধ্যে থাকা পাঠ্য বিষয়বস্তু, এবং টগল বোতামগুলি, WCAG কনট্রাস্ট অনুপাতের প্রয়োজনীয়তাগুলি পূরণ করে (সাধারণ পাঠ্যের জন্য 4.5:1, বড় পাঠ্যের জন্য 3:1)। এটি কম দৃষ্টিশক্তি সম্পন্ন ব্যবহারকারীদের জন্য অত্যাবশ্যক।
• কোনো বিষয়বস্তু হারানো যাবে না: যখন একটি বিভাগ প্রসারিত হয়, নিশ্চিত করুন যে এর বিষয়বস্তু তার কন্টেইনারের বাইরে চলে যায় না বা অন্য গুরুত্বপূর্ণ বিষয়বস্তুকে অস্পষ্ট করে না।

৬. টগল করার সময় ফোকাস ম্যানেজমেন্ট

এটি একটি আরও উন্নত দিক কিন্তু একটি নির্বিঘ্ন অভিজ্ঞতার জন্য অত্যন্ত গুরুত্বপূর্ণ।

• প্রসারণ: যখন একজন ব্যবহারকারী একটি বিভাগ প্রসারিত করে, তখন নতুন প্রকাশিত বিষয়বস্তুর মধ্যে প্রথম ইন্টারেক্টিভ উপাদানে ফোকাস সরানোর কথা বিবেচনা করুন। এটি বিশেষত গুরুত্বপূর্ণ যদি প্রসারিত বিষয়বস্তুতে ফর্ম ফিল্ড বা লিঙ্ক থাকে।
• সংকোচন: যখন একজন ব্যবহারকারী একটি বিভাগ সংকুচিত করে, ফোকাসটি টগল করা অ্যাকর্ডিয়ন হেডারে ফিরে আসা উচিত। এটি ব্যবহারকারীদের পূর্বে সংকুচিত বিভাগগুলির মাধ্যমে ফিরে নেভিগেট করা থেকে বিরত রাখে।

ফোকাস ম্যানেজমেন্ট প্রয়োগের জন্য সাধারণত ফোকাস ক্যাপচার এবং প্রোগ্রাম্যাটিকভাবে সেট করার জন্য JavaScript প্রয়োজন হয়।

JavaScript দিয়ে অ্যাক্সেসিবল অ্যাকর্ডিয়ন প্রয়োগ করা

যদিও সিমান্টিক HTML এবং ARIA প্রথম ধাপ, ডাইনামিক টগলিং এবং সম্ভাব্য ফোকাস ম্যানেজমেন্ট পরিচালনা করার জন্য প্রায়শই JavaScript প্রয়োজন হয়। এখানে একটি ধারণামূলক JavaScript পদ্ধতি দেওয়া হল:

// অ্যাকর্ডিয়ন কার্যকারিতার জন্য ধারণামূলক JavaScript

document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    const controlsId = button.getAttribute('aria-controls');
    const content = document.getElementById(controlsId);

    if (content) {
      const isExpanded = button.getAttribute('aria-expanded') === 'true';
      
      // aria-expanded অবস্থা টগল করুন
      button.setAttribute('aria-expanded', !isExpanded);

      // বিষয়বস্তুর দৃশ্যমানতা টগল করুন (অ্যাক্সেসিবিলিটির জন্য CSS ব্যবহার করে)
      content.style.display = isExpanded ? 'none' : 'block'; // অথবা একটি ক্লাস টগল ব্যবহার করুন

      // ঐচ্ছিক: প্রসারণের সময় ফোকাস ম্যানেজমেন্ট
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // ঐচ্ছিক: কীবোর্ড নেভিগেশন (অ্যারো কী, ইত্যাদি) এখানেও প্রয়োগ করা হবে।
  // উদাহরণস্বরূপ, 'keydown' ইভেন্টগুলি পরিচালনা করা।
});

// প্রাথমিক সেটআপ: ডিফল্টভাবে বিষয়বস্তু লুকান এবং aria-expanded কে false সেট করুন
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // প্রাথমিকভাবে বিষয়বস্তু লুকান
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

JavaScript এর জন্য গুরুত্বপূর্ণ বিবেচনা:

• লুকানোর জন্য CSS: বিষয়বস্তু লুকানোর জন্য CSS (যেমন, `display: none;` বা একটি ক্লাস যা মসৃণ রূপান্তরের জন্য `height: 0; overflow: hidden;` সেট করে) ব্যবহার করা সেরা অনুশীলন। এটি নিশ্চিত করে যে বিষয়বস্তু যখন দৃশ্যমান নয় তখন অ্যাক্সেসিবিলিটি ট্রি থেকে সরানো হয়।
• গ্রেসফুল ডিগ্রেডেশন: নিশ্চিত করুন যে JavaScript লোড বা এক্সিকিউট করতে ব্যর্থ হলেও, অ্যাকর্ডিয়নের বিষয়বস্তু অ্যাক্সেসিবল থাকে (যদিও সম্ভবত সংকোচনযোগ্য নয়)। সিমান্টিক HTML তবুও কিছু কাঠামো প্রদান করা উচিত।
• ফ্রেমওয়ার্ক এবং লাইব্রেরি: যদি JavaScript ফ্রেমওয়ার্ক (React, Vue, Angular) বা UI লাইব্রেরি ব্যবহার করেন, তবে তাদের অ্যাক্সেসিবিলিটি ডকুমেন্টেশন পরীক্ষা করুন। অনেকেই বাক্সের বাইরে বা নির্দিষ্ট অ্যাট্রিবিউট সহ অ্যাক্সেসিবল অ্যাকর্ডিয়ন উপাদান সরবরাহ করে।

অ্যাক্সেসিবিলিটির জন্য পরীক্ষা করা

আপনার অ্যাকর্ডিয়ন উইজেটগুলি সত্যিই অ্যাক্সেসিবল কিনা তা নিশ্চিত করার জন্য পুঙ্খানুপুঙ্খ পরীক্ষা অত্যাবশ্যক।

• স্বয়ংক্রিয় সরঞ্জাম: সাধারণ অ্যাক্সেসিবিলিটি সমস্যাগুলি সনাক্ত করতে ব্রাউজার এক্সটেনশন (যেমন Axe, WAVE) বা অনলাইন চেকার ব্যবহার করুন।
• কীবোর্ড পরীক্ষা: শুধুমাত্র কীবোর্ড ব্যবহার করে অ্যাকর্ডিয়ন নেভিগেট এবং পরিচালনা করুন (Tab, Shift+Tab, Enter, Spacebar, Arrow keys)। নিশ্চিত করুন যে সমস্ত ইন্টারেক্টিভ উপাদান পৌঁছানো এবং পরিচালনাযোগ্য।
• স্ক্রিন রিডার পরীক্ষা: জনপ্রিয় স্ক্রিন রিডার (NVDA, JAWS, VoiceOver) দিয়ে পরীক্ষা করুন। অ্যাকর্ডিয়নের কাঠামো এবং অবস্থার পরিবর্তনগুলি কীভাবে ঘোষণা করা হয় তা শুনুন। এটা কি বোধগম্য? `aria-expanded` অবস্থা কি সঠিকভাবে জানানো হচ্ছে?
• ব্যবহারকারী পরীক্ষা: সম্ভব হলে, আপনার পরীক্ষা প্রক্রিয়ায় প্রতিবন্ধী ব্যবহারকারীদের অন্তর্ভুক্ত করুন। তাদের প্রতিক্রিয়া বাস্তব-বিশ্বের ব্যবহারযোগ্যতা সমস্যাগুলি সনাক্ত করার জন্য অমূল্য।
• ব্রাউজার এবং ডিভাইস পরীক্ষা: বিভিন্ন ব্রাউজার এবং ডিভাইস জুড়ে পরীক্ষা করুন, কারণ রেন্ডারিং এবং JavaScript আচরণ ভিন্ন হতে পারে।

বৈশ্বিক দৃষ্টিভঙ্গি এবং স্থানীয়করণ

একটি বিশ্বব্যাপী দর্শকের জন্য ডিজাইন করার সময়, এই বিষয়গুলি বিবেচনা করুন:

• ভাষা: নিশ্চিত করুন যে বোতামের লেবেল এবং বিষয়বস্তু সহ সমস্ত পাঠ্য, স্পষ্ট, সংক্ষিপ্ত এবং সহজে অনুবাদযোগ্য। ইডিয়ম বা সাংস্কৃতিকভাবে নির্দিষ্ট রেফারেন্স এড়িয়ে চলুন।
• বিষয়বস্তুর দৈর্ঘ্য: বিষয়বস্তু প্রসারণ পৃষ্ঠার বিন্যাসকে উল্লেখযোগ্যভাবে প্রভাবিত করতে পারে। মনে রাখবেন যে অনূদিত বিষয়বস্তু মূলের চেয়ে দীর্ঘ বা ছোট হতে পারে। আপনার অ্যাকর্ডিয়ন বিভিন্ন দৈর্ঘ্যের বিষয়বস্তু কীভাবে পরিচালনা করে তা পরীক্ষা করুন।
• সাংস্কৃতিক UI কনভেনশন: যদিও অ্যাকর্ডিয়নের মূল কার্যকারিতা সর্বজনীন, সূক্ষ্ম ডিজাইন উপাদানগুলি বিভিন্ন সংস্কৃতিতে ভিন্নভাবে অনুভূত হতে পারে। প্রতিষ্ঠিত প্যাটার্ন এবং স্পষ্ট অ্যাফোর্ডেন্স মেনে চলুন।
• কর্মক্ষমতা: ধীরগতির ইন্টারনেট সংযোগ সহ অঞ্চলের ব্যবহারকারীদের জন্য, নিশ্চিত করুন যে আপনার JavaScript অপ্টিমাইজ করা হয়েছে এবং অ্যাকর্ডিয়নের মধ্যে থাকা বিষয়বস্তু প্রাথমিক পৃষ্ঠা লোড সময়কে অতিরিক্তভাবে প্রভাবিত করে না।

অ্যাক্সেসিবল অ্যাকর্ডিয়নের উদাহরণ

অনেক নামকরা সংস্থা অ্যাক্সেসিবল অ্যাকর্ডিয়ন প্যাটার্ন প্রদর্শন করে:

• GOV.UK ডিজাইন সিস্টেম: প্রায়শই অ্যাক্সেসিবিলিটির প্রতি তার প্রতিশ্রুতির জন্য উদ্ধৃত, GOV.UK অ্যাকর্ডিয়ন সহ ভালভাবে নথিভুক্ত উপাদান সরবরাহ করে যা WCAG মেনে চলে।
• MDN ওয়েব ডক্স: Mozilla Developer Network অ্যাকর্ডিয়ন সহ অ্যাক্সেসিবল উইজেট তৈরির বিষয়ে বিস্তারিত গাইড এবং উদাহরণ সরবরাহ করে, ARIA ব্যবহারের স্পষ্ট ব্যাখ্যা সহ।
• বড় প্রযুক্তি সংস্থাগুলির ডিজাইন সিস্টেম: Google (Material Design), Microsoft (Fluent UI), এবং Apple এর মতো সংস্থাগুলি ডিজাইন সিস্টেম উপাদান সরবরাহ করে যা প্রায়শই অ্যাক্সেসিবিলিটিকে অগ্রাধিকার দেয়। এগুলি উল্লেখ করা শক্তিশালী বাস্তবায়ন প্যাটার্ন সরবরাহ করতে পারে।

উপসংহার

অ্যাকর্ডিয়ন উইজেটগুলি বিষয়বস্তু সংগঠিত করার এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য শক্তিশালী সরঞ্জাম। যাইহোক, তাদের গতিশীল প্রকৃতির জন্য অ্যাক্সেসিবিলিটির প্রতি একটি সচেতন দৃষ্টিভঙ্গি প্রয়োজন। WCAG নির্দেশিকা মেনে চলা, সিমান্টিক HTML ব্যবহার করা, ARIA সঠিকভাবে প্রয়োগ করা, শক্তিশালী কীবোর্ড নেভিগেশন নিশ্চিত করা এবং পুঙ্খানুপুঙ্খ পরীক্ষা পরিচালনা করার মাধ্যমে, আপনি এমন অ্যাকর্ডিয়ন উপাদান তৈরি করতে পারেন যা বিশ্বজুড়ে সকলের জন্য ব্যবহারযোগ্য এবং আনন্দদায়ক। শুরু থেকেই অ্যাক্সেসিবিলিটিকে অগ্রাধিকার দেওয়া কেবল সম্মতি নিশ্চিত করে না, বরং সকলের জন্য একটি আরও অন্তর্ভুক্তিমূলক এবং ব্যবহারকারী-বান্ধব পণ্যের দিকে পরিচালিত করে।

মনে রাখবেন, অ্যাক্সেসিবল ডিজাইন একটি পরবর্তী চিন্তা নয়; এটি ভাল ডিজাইনের একটি অবিচ্ছেদ্য অংশ। অ্যাক্সেসিবল অ্যাকর্ডিয়ন উইজেটের বাস্তবায়নে দক্ষতা অর্জন করে, আপনি সকল ব্যবহারকারীর জন্য একটি আরও ন্যায়সঙ্গত এবং ব্যবহারযোগ্য ওয়েবে অবদান রাখেন।