` উপাদানগুলি ব্যবহার করা।

সঠিক:

<table>
  <caption>অক্টোবর ২০২৪-এর ক্যালেন্ডার</caption>
  <thead>
    <tr>
      <th scope="col">রবি</th>
      <th scope="col">সোম</th>
      <th scope="col">মঙ্গল</th>
      <th scope="col">বুধ</th>
      <th scope="col">বৃহস্পতি</th>
      <th scope="col">শুক্র</th>
      <th scope="col">শনি</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>২৯</td>
      <td>৩০</td>
      <td>১</td>
      <td>২</td>
      <td>৩</td>
      <td>৪</td>
      <td>৫</td>
    </tr>
    <tr>
      <td>৬</td>
      <td>৭</td>
      <td>৮</td>
      <td>৯</td>
      <td>১০</td>
      <td>১১</td>
      <td>১২</td>
    </tr>
    <!-- আরও সারি -->
  </tbody>
</table>

2. ARIA বৈশিষ্ট্য

ARIA (অ্যাক্সেসিবল রিচ ইন্টারনেট অ্যাপ্লিকেশন) বৈশিষ্ট্যগুলি ইন্টারেক্টিভ উপাদানগুলির ধারণা বাড়িয়ে সহায়ক প্রযুক্তিগুলিতে অতিরিক্ত শব্দার্থিক তথ্য সরবরাহ করে। ARIA বৈশিষ্ট্যগুলি ব্যবহার করুন:

• ভূমিকা সংজ্ঞায়িত করুন: উপাদানগুলির উদ্দেশ্য নির্দেশ করুন, যেমন ক্যালেন্ডার গ্রিডের জন্য `role="grid"` এবং প্রতিটি তারিখ সেলের জন্য `role="gridcell"`।
• লেবেল সরবরাহ করুন: উপাদানগুলির জন্য বর্ণনমূলক লেবেল সরবরাহ করতে `aria-label` বা `aria-labelledby` ব্যবহার করুন, বিশেষ করে যখন ভিজ্যুয়াল লেবেলটি অপর্যাপ্ত হয়।
• অবস্থা নির্দেশ করুন: নির্বাচিত তারিখ নির্দেশ করতে `aria-selected` এবং অক্ষম তারিখ নির্দেশ করতে `aria-disabled`-এর মতো বৈশিষ্ট্যগুলি ব্যবহার করুন।
• বর্ণনা দিন: একটি উপাদানের সাথে অতিরিক্ত তথ্য যুক্ত করতে `aria-describedby` ব্যবহার করুন, যেমন তারিখ বিন্যাসের বিবরণ।

উদাহরণ:

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">একটি তারিখ নির্বাচন করুন</caption>
  <thead>
    <tr>
      <th scope="col">রবি</th>
      <th scope="col">সোম</th>
      <th scope="col">মঙ্গল</th>
      <th scope="col">বুধ</th>
      <th scope="col">বৃহস্পতি</th>
      <th scope="col">শুক্র</th>
      <th scope="col">শনি</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell" aria-disabled="true">২৯</td>
      <td role="gridcell" aria-disabled="true">৩০</td>
      <td role="gridcell"><button aria-label="অক্টোবর ১, ২০২৪">১</button></td>
      <td role="gridcell"><button aria-label="অক্টোবর ২, ২০২৪">২</button></td>
      <td role="gridcell"><button aria-label="অক্টোবর ৩, ২০২৪">৩</button></td>
      <td role="gridcell"><button aria-label="অক্টোবর ৪, ২০২৪">৪</button></td>
      <td role="gridcell"><button aria-label="অক্টোবর ৫, ২০২৪">৫</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="অক্টোবর ৬, ২০২৪">৬</button></td>
      <td role="gridcell"><button aria-label="অক্টোবর ৭, ২০২৪">৭</button></td>
      <td role="gridcell"><button aria-label="অক্টোবর ৮, ২০২৪">৮</button></td>
      <td role="gridcell"><button aria-label="অক্টোবর ৯, ২০২৪">৯</button></td>
      <td role="gridcell"><button aria-label="অক্টোবর ১০, ২০২৪">১০</button></td>
      <td role="gridcell"><button aria-label="অক্টোবর ১১, ২০২৪">১১</button></td>
      <td role="gridcell"><button aria-label="অক্টোবর ১২, ২০২৪">১২</button></td>
    </tr>
    <!-- আরও সারি -->
  </tbody>
</table>

নোট: ARIA বৈশিষ্ট্যগুলি সঠিকভাবে ব্যাখ্যা করা হয়েছে কিনা তা নিশ্চিত করার জন্য সর্বদা আসল স্ক্রিন রিডারগুলির সাথে পরীক্ষা করুন।

3. কীবোর্ড নেভিগেশন

যে ব্যবহারকারীরা মাউস বা অন্য কোনো পয়েন্টিং ডিভাইস ব্যবহার করতে পারেন না তাদের জন্য কীবোর্ড নেভিগেশন অপরিহার্য। নিশ্চিত করুন যে তারিখ বাছাইকারীর মধ্যে সমস্ত ইন্টারেক্টিভ উপাদান কীবোর্ডের মাধ্যমে অ্যাক্সেসযোগ্য।

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

উদাহরণ (জাভাস্ক্রিপ্ট):

// কীবোর্ড নেভিগেশন পরিচালনার উদাহরণ
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // আগের দিনে ফোকাস সরান
      break;
    case 'ArrowRight':
      // পরের দিনে ফোকাস সরান
      break;
    case 'ArrowUp':
      // আগের সপ্তাহের একই দিনে ফোকাস সরান
      break;
    case 'ArrowDown':
      // পরের সপ্তাহের একই দিনে ফোকাস সরান
      break;
    case 'Enter':
      // ফোকাস করা তারিখটি নির্বাচন করুন
      break;
    case 'Escape':
      // তারিখ বাছাইকারী বন্ধ করুন
      break;
  }
});

4. স্ক্রিন রিডার সামঞ্জস্য

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

• বর্ণনাকারী লেবেল: সমস্ত ইন্টারেক্টিভ উপাদানের জন্য স্পষ্ট এবং সংক্ষিপ্ত লেবেল সরবরাহ করুন। অতিরিক্ত প্রসঙ্গ সরবরাহ করতে `aria-label` বা `aria-labelledby` ব্যবহার করুন।
• অবস্থা ঘোষণা: উপাদানগুলির অবস্থা নির্দেশ করতে ARIA বৈশিষ্ট্যগুলি ব্যবহার করুন, যেমন নির্বাচিত তারিখের জন্য `aria-selected` এবং অক্ষম তারিখের জন্য `aria-disabled`। স্ক্রিন রিডার এই অবস্থাগুলি ব্যবহারকারীকে জানাবে।
• লাইভ অঞ্চল: তারিখ বাছাইকারীতে গতিশীল পরিবর্তনগুলি ঘোষণা করতে ARIA লাইভ অঞ্চলগুলি (যেমন, `aria-live="polite"`) ব্যবহার করুন, যেমন ব্যবহারকারী যখন অন্য মাসে নেভিগেট করে। এটি স্ক্রিন রিডারগুলিকে তাদের কর্মপ্রবাহে বাধা না দিয়ে পরিবর্তন সম্পর্কে ব্যবহারকারীকে অবহিত করতে দেয়।
• ত্রুটি পরিচালনা: যদি কোনও ত্রুটি বা বৈধতা সমস্যা থাকে তবে স্পষ্ট এবং তথ্যপূর্ণ ত্রুটি বার্তা সরবরাহ করুন যা স্ক্রিন রিডারগুলির জন্য অ্যাক্সেসযোগ্য। প্রাসঙ্গিক ইনপুট ক্ষেত্রের সাথে ত্রুটি বার্তাটি যুক্ত করতে `aria-describedby` ব্যবহার করুন।

উদাহরণ:

<div aria-live="polite">
  <!-- গতিশীল বিষয়বস্তু, যেমন মাস নেভিগেশন -->
</div>

5. ভিজ্যুয়াল ডিজাইন

তারিখ বাছাইকারীর ভিজ্যুয়াল ডিজাইনটিও অ্যাক্সেসযোগ্য হওয়া উচিত। নিম্নলিখিত বিবেচনা করুন:

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

6. স্থানীয়করণ এবং আন্তর্জাতিকীকরণ

তারিখ বিন্যাস, ক্যালেন্ডার সিস্টেম এবং ভাষার নিয়মাবলী বিভিন্ন সংস্কৃতি এবং অঞ্চলে পরিবর্তিত হয়। নিশ্চিত করুন যে আপনার তারিখ বাছাইকারী একটি বিশ্বব্যাপী দর্শকদের সমর্থন করার জন্য সঠিকভাবে স্থানীয়করণ এবং আন্তর্জাতিকীকরণ করা হয়েছে।

• তারিখ বিন্যাস: একটি নমনীয় তারিখ বিন্যাস লাইব্রেরি ব্যবহার করুন যা বিভিন্ন তারিখ বিন্যাস সমর্থন করে, যেমন DD/MM/YYYY (ইউরোপ এবং এশিয়ার কিছু অংশে সাধারণ) এবং MM/DD/YYYY (উত্তর আমেরিকাতে সাধারণ)। ব্যবহারকারীদের তাদের পছন্দ অনুযায়ী তারিখ বিন্যাস কাস্টমাইজ করার অনুমতি দিন।
• ক্যালেন্ডার সিস্টেম: বিভিন্ন ক্যালেন্ডার সিস্টেম সমর্থন করুন, যেমন গ্রেগরিয়ান ক্যালেন্ডার (সবচেয়ে বেশি ব্যবহৃত ক্যালেন্ডার) এবং হিজরি ক্যালেন্ডার (অনেক ইসলামিক দেশে ব্যবহৃত)।
• ভাষা সমর্থন: মাস নাম, দিনের নাম এবং লেবেল সহ তারিখ বাছাইকারীর সমস্ত পাঠ্য উপাদানের জন্য অনুবাদ সরবরাহ করুন।
• ডান থেকে বাম (RTL) সমর্থন: নিশ্চিত করুন যে তারিখ বাছাইকারী RTL ভাষাগুলিতে সঠিকভাবে প্রদর্শিত হয়েছে, যেমন আরবি এবং হিব্রু। এর জন্য উইজেটের বিন্যাস এবং শৈলী সামঞ্জস্য করা প্রয়োজন হতে পারে।
• সময় অঞ্চল: তারিখগুলি পরিচালনা করার সময় সময় অঞ্চলের প্রভাব বিবেচনা করুন। একটি সামঞ্জস্যপূর্ণ সময় অঞ্চলে (যেমন, UTC) তারিখগুলি সংরক্ষণ করুন এবং সেগুলি প্রদর্শনের সময় ব্যবহারকারীর স্থানীয় সময় অঞ্চলে রূপান্তর করুন।

উদাহরণ: তারিখ বিন্যাস এবং স্থানীয়করণ পরিচালনা করতে `moment.js` বা `date-fns`-এর মতো একটি জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করুন।

7. মোবাইল অ্যাক্সেসিবিলিটি

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

• টাচ টার্গেট: নিশ্চিত করুন যে সমস্ত ইন্টারেক্টিভ উপাদানের মোবাইল ডিভাইসে সহজে ট্যাপ করার জন্য যথেষ্ট বড় টাচ টার্গেট রয়েছে। অ্যাপল কমপক্ষে 44x44 পিক্সেলের একটি টাচ টার্গেট আকারের সুপারিশ করে।
• responsive ডিজাইন: বিভিন্ন স্ক্রিনের আকার এবং অভিযোজনের সাথে তারিখ বাছাইকারীটি খাপ খায় কিনা তা নিশ্চিত করতে responsive ডিজাইন কৌশল ব্যবহার করুন।
• কীবোর্ড ইনপুট: তারিখ বাছাইকারীর জন্য যদি কীবোর্ড ইনপুট প্রয়োজন হয় তবে একটি মোবাইল-বান্ধব কীবোর্ড সরবরাহ করুন যা তারিখ এন্ট্রির জন্য অপ্টিমাইজ করা হয়েছে।
• অঙ্গভঙ্গি: অঙ্গভঙ্গির উপর নির্ভর করা এড়িয়ে চলুন যা মোটর impairments আছে এমন ব্যবহারকারীদের জন্য কঠিন হতে পারে। কীবোর্ড নেভিগেশন বা ভয়েস নিয়ন্ত্রণের মতো বিকল্প ইনপুট পদ্ধতি সরবরাহ করুন।

পরীক্ষা এবং বৈধতা

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

• স্বয়ংক্রিয় পরীক্ষা: সাধারণ অ্যাক্সেসিবিলিটি সমস্যাগুলি সনাক্ত করতে Axe বা WAVE-এর মতো অ্যাক্সেসিবিলিটি টেস্টিং সরঞ্জাম ব্যবহার করুন।
• ম্যানুয়াল পরীক্ষা: প্রতিবন্ধী ব্যক্তিদের দ্বারা ব্যবহারযোগ্য কিনা তা যাচাই করতে একটি স্ক্রিন রিডার এবং কীবোর্ড নেভিগেশন ব্যবহার করে তারিখ বাছাইকারীটি ম্যানুয়ালি পরীক্ষা করুন।
• ব্যবহারকারী পরীক্ষা: প্রতিক্রিয়া সংগ্রহ করতে এবং উন্নতির ক্ষেত্রগুলি সনাক্ত করতে প্রতিবন্ধী ব্যক্তিদের সাথে ব্যবহারকারী পরীক্ষা পরিচালনা করুন।
• WCAG সম্মতি: নিশ্চিত করুন যে আপনার তারিখ বাছাইকারী WCAG 2.1 লেভেল AA-এর প্রয়োজনীয়তা পূরণ করে।

অ্যাক্সেসযোগ্য তারিখ বাছাইকারীর উদাহরণ

বেশ কয়েকটি ওপেন সোর্স এবং বাণিজ্যিক তারিখ বাছাইকারী লাইব্রেরি ভাল অ্যাক্সেসিবিলিটি সমর্থন সরবরাহ করে। কিছু উদাহরণ অন্তর্ভুক্ত:

• React Datepicker: ARIA সমর্থন এবং কীবোর্ড নেভিগেশন সহ একটি জনপ্রিয় React উপাদান।
• Air Datepicker: ভাল অ্যাক্সেসিবিলিটি বৈশিষ্ট্য সহ একটি হালকা ও কাস্টমাইজযোগ্য তারিখ বাছাইকারী।
• FullCalendar: ব্যাপক অ্যাক্সেসিবিলিটি সমর্থন সহ একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত ক্যালেন্ডার উপাদান।

একটি তারিখ বাছাইকারী লাইব্রেরি নির্বাচন করার সময়, সাবধানে এর অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলি মূল্যায়ন করুন এবং নিশ্চিত করুন যে এটি আপনার নির্দিষ্ট প্রয়োজনীয়তা পূরণ করে।

অ্যাক্সেসযোগ্য তারিখ বাছাইকারী তৈরির সেরা অনুশীলন

অ্যাক্সেসযোগ্য তারিখ বাছাইকারী তৈরির সেরা অনুশীলনের একটি সংক্ষিপ্তসার এখানে দেওয়া হল:

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

উপসংহার

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

আরও রিসোর্স

• WAI-ARIA Authoring Practices Guide (APG) - Calendar
• Web Content Accessibility Guidelines (WCAG) 2.1
• Deque University