অ্যাক্সেসযোগ্য ক্যারোসেল তৈরি করুন

Robert Flack

Penny McLachlan

Lucas Radaelli

প্রকাশিত: সেপ্টেম্বর 29, 2025

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

যাইহোক, ক্যারোসেলগুলিকে অ্যাক্সেসযোগ্য করা প্রায়শই চ্যালেঞ্জিং। ফোকাস পরিচালনা করা, স্ক্রিন রিডার ঘোষণাগুলি সঠিকভাবে পাওয়া এবং অফ-স্ক্রিন ইন্টারেক্টিভ উপাদানগুলি পরিচালনা করা জটিল, তাই অনেক সাইটে ক্যারোসেলগুলি অ্যাক্সেসযোগ্য নয়৷ এই চ্যালেঞ্জগুলি ক্রোম টিমকে CSS ওভারফ্লো মডিউল লেভেল 5 এর অংশ হিসাবে ইন্টারেক্টিভ CSS ক্যারোসেলগুলিতে কাজ করতে পরিচালিত করেছিল, যা Chrome 135-এ পাঠানো হয়েছিল।

Chrome-এ বৈশিষ্ট্যটির প্রাথমিক প্রবর্তনের পরে, আমরা অনেক সম্প্রদায়ের প্রতিক্রিয়া পেয়েছি, যা আমরা সমাধান করার জন্য কাজ করছি। এর মধ্যে রয়েছে নতুন কার্যকারিতা যেমন বিচ্ছিন্ন এবং নেভিগেশনাল স্ক্রোল মার্কার মোড এবং একাধিক বাগফিক্সের জন্য সমর্থন। যেমন:

• Alt টেক্সটে কাউন্টারগুলির জন্য সমর্থন , যা Chrome 140-এ এসেছে।
• একটি সমস্যা সমাধান করা যেখানে একটি অক্ষম ::scroll-button state স্ক্রিন রিডারদের দ্বারা সঠিকভাবে পড়া হয় না৷
• নিশ্চিত করা হচ্ছে যে ::scroll-marker সামগ্রীর মান থেকে একটি ARIA লেবেল নাম পায় ।
• একটি বাগ ফিক্স করা হচ্ছে যেখানে সমস্ত ::scroll-marker ছদ্ম-উপাদানগুলি "নির্বাচিত" হিসাবে পড়া হয়েছে।

আমরা বিশ্বাস করি CSS ওভারফ্লো 5-এর বৈশিষ্ট্যগুলি শক্তিশালী এবং অ্যাক্সেসযোগ্য ক্যারোসেল তৈরি করতে পারে যা প্রথম পেইন্টে ইন্টারেক্টিভ। দীর্ঘস্থায়ী অ্যাক্সেসিবিলিটি সমস্যাগুলি সমাধান করার জন্য এই বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন তার উপর ফোকাস রেখে এই পোস্টটি আপনাকে এটি করার মধ্য দিয়ে চলে।

আরও সাধারণ ক্যারোজেল পরিচিতির জন্য, CSS এর সাথে Carousels নিবন্ধটি দেখুন। মনে রাখবেন: বাক্সের বাইরে কোনও UI অ্যাক্সেসযোগ্য হওয়ার গ্যারান্টি দেওয়া যায় না, আপনাকে সর্বদা আপনার পৃষ্ঠাগুলির অ্যাক্সেসযোগ্যতা পরীক্ষা করতে হবে।

আপনি কি ধরনের ক্যারোজেল প্রয়োজন?

কোডে ঝাঁপ দেওয়ার আগে, আপনি কী ধরনের ক্যারোজেল তৈরি করছেন তা জানা গুরুত্বপূর্ণ। সঠিক অ্যাক্সেসিবিলিটি কৌশল নির্ভর করে ব্যবহারকারী কীভাবে বিষয়বস্তু উপভোগ করতে চান তার উপর। এই পোস্টটি তিনটি সাধারণ প্রকার কভার করে:

একক-আইটেম ক্যারোসেল

একক-আইটেম ক্যারোসেলের সাথে, শুধুমাত্র একটি স্লাইড এক সময়ে সম্পূর্ণরূপে দৃশ্যমান এবং ইন্টারেক্টিভ (উদাহরণস্বরূপ, হিরো ব্যানার বা স্লাইডশো)।

স্বয়ংক্রিয়ভাবে পৃষ্ঠাযুক্ত ক্যারোসেল

স্বয়ংক্রিয়ভাবে পৃষ্ঠাযুক্ত ক্যারোসেল সামগ্রীর "পৃষ্ঠাগুলি" দেখায়, যেমন পণ্যের তালিকা বা টিভি শো।

মাল্টি-আইটেম ক্যারোসেল

মাল্টি-আইটেম ক্যারোসেলে, ক্যারোজেলের একাধিক আইটেম একবারে দৃশ্যমান হয়, কিন্তু আপনি এখনও পৃষ্ঠা সংখ্যা ছাড়াই পৃথকভাবে স্ক্রোল করতে পারেন।

প্রতিটি ধরনের ক্যারাউজেলের বিভিন্ন অ্যাক্সেসযোগ্যতার বিবেচনা এবং সেরা অনুশীলন রয়েছে।

একক-আইটেম ক্যারোসেল

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

ধাপে ধাপে এটিকে কীভাবে অ্যাক্সেসযোগ্য করা যায় তা এখানে।

ধাপ 1: স্ক্রোল স্ন্যাপিংয়ের মাধ্যমে একটি একক ফোকাস প্রয়োগ করুন

গ্যারান্টি দিতে যে স্ক্রোল কন্টেইনারটি সর্বদা একটি স্লাইডে "স্ন্যাপ" করে, এর মধ্যে কোন আইটেম বিশ্রীভাবে আটকে না থাকে, CSS স্ক্রোল স্ন্যাপিং ব্যবহার করুন। এটি নিশ্চিত করে যে একটি স্ক্রোল করার পরে, একটি আইটেম তার সঠিক অবস্থানে পুরোপুরি "স্ন্যাপ" হয়েছে, একটি পরিষ্কার ব্যবহারকারীর অভিজ্ঞতা তৈরি করে৷

.carousel {
  scroll-snap-type: inline mandatory;
}
.item {
  scroll-snap-align: center;
}

ধাপ 2: ক্যারোজেল এবং স্লাইড পরিবর্তন ঘোষণা করুন

স্ক্রিন রিডার সহ একজন ব্যবহারকারীকে জানতে হবে যে তারা একটি ক্যারাউজেলে প্রবেশ করেছে এবং কখন স্লাইড পরিবর্তন হয়৷ এর জন্য ক্যারোজেল পাত্রে কয়েকটি ARIA বৈশিষ্ট্য প্রয়োজন:

এখানে HTML গঠন:

<div class="carousel" role="region" aria-label="Slideshow" aria-live="polite"> ... </div>

ধাপ 3: শুধুমাত্র দৃশ্যমান স্লাইডকে ইন্টারেক্টিভ করুন

এটি অ্যাক্সেসযোগ্যতার জন্য গুরুত্বপূর্ণ কারণ এটি ব্যবহারকারীদের দুর্ঘটনাক্রমে অফ-স্ক্রিন স্লাইডগুলিতে বোতাম বা লিঙ্কগুলিতে ট্যাব করা থেকে বাধা দেয়। এটি অর্জন করতে, নতুন scroll-state কন্টেইনার ক্যোয়ারী এবং interactivity বৈশিষ্ট্য ব্যবহার করুন।

প্রথমত, interactivity: inert । তারপর, ভিউপোর্টে বর্তমানে "স্ন্যাপ করা" স্লাইডটিকে লক্ষ্য করতে একটি scroll-state কন্টেইনার ক্যোয়ারী ব্যবহার করুন এবং এর বিষয়বস্তুকে interactivity: auto ।

.item {
  container-type: scroll-state;
}
/* Make all content inside slides inert by default */
.item > * {
  interactivity: inert;
  /* When a slide is snapped inline, make its content interactive */
  @container scroll-state(snapped: inline) {
    > .content {
      interactivity: auto;
    }
  }
}

এই CSS এর সাহায্যে ব্রাউজার স্বয়ংক্রিয়ভাবে কোন আইটেম ফোকাসযোগ্য তা পরিচালনা করে। একটি ট্যাবিনডেক্স পরিচালনা করার জন্য আর জাভাস্ক্রিপ্টের প্রয়োজন নেই। scroll-state ক্যোয়ারী বর্তমান স্লাইড ছাড়া অন্য সব স্লাইডকে নিষ্ক্রিয় করে তোলে।

পাতাযুক্ত ক্যারোসেল

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

বিচ্ছিন্ন পৃষ্ঠা সহ একটি ক্যারোসেল

একটি ধারক ব্যবহার করুন role="region" এর ভিতরে একটি উপাদান সহ role="tabpanel" সহ। এই ট্যাবপ্যানেল সক্রিয় ট্যাব বা পৃষ্ঠা প্রতিফলিত করার জন্য এর বিষয়বস্তু আপডেট করবে।

<div role="region" class="carousel" aria-label="Featured Products Carousel">
    <div role="tabpanel">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        ...
        <div class="item">Item n</div> </div>
    </div>
</div>

ইন্টারঅ্যাক্টিভিটি পরিচালনা করতে, view() টাইমলাইনে বাঁধা একটি চতুর অ্যানিমেশন কৌশল ব্যবহার করুন। এটি নিশ্চিত করে যে ট্যাব অর্ডার শুধুমাত্র স্ক্রিনে বর্তমানে দৃশ্যমান আইটেমগুলিতে পৌঁছেছে।

@keyframes interactive-when-visible {
  0% { interactivity: auto; }
}
.item {
  interactivity: inert;
  animation: interactive-when-visible steps(1);
  animation-timeline: view(inline);
}

বিষয়বস্তুর একটি তালিকা

বিষয়বস্তু মৌলিকভাবে একটি তালিকা হলে, সঠিক শব্দার্থবিদ্যার জন্য একটি <ul> উপাদান ব্যবহার করুন।

যেমন:

<div class="carousel" role="region" aria-label="Related Posts">
  <ul>
    <li><!-- Post 1 content --></li>
    <li><!-- Post 2 content --></li>
    <li><!-- Post 3 content --></li>
    <!-- ... -->
  </ul>
</div>

এই প্যাটার্নের জন্য, অফ-স্ক্রিন সামগ্রীকে নিষ্ক্রিয় করতে ইন্টারঅ্যাক্টিভিটি বৈশিষ্ট্য ব্যবহার করবেন না। এটি করার ফলে স্ক্রীন রিডারদের দ্বারা ঘোষিত আইটেম সংখ্যা প্রভাবিত হবে, তাই সমস্ত সামগ্রী অবশ্যই অ্যাক্সেসিবিলিটি ট্রিতে থাকবে৷

মাল্টি-আইটেম ক্যারোসেল

এই প্যাটার্নটি ক্যারোসেলের জন্য যেখানে একাধিক শিশু উপাদান একই সময়ে দৃশ্যমান এবং পাঠযোগ্য হতে পারে। উদাহরণস্বরূপ, একটি ইকমার্স সাইটে একটি "সম্পর্কিত পণ্য" শেল্ফ।

এই ক্যারোসেলগুলি নিম্নলিখিত সিদ্ধান্তের জন্য আপনার উত্তরের উপর নির্ভর করে ভিন্নভাবে আচরণ করে: আপনি কি ব্যবহারকারীর ফোকাসকে একবারে একটি আইটেমের দিকে পরিচালিত করেন, নাকি আপনি তাদের সমস্ত দৃশ্যমান সামগ্রী অবাধে অ্যাক্সেস করার অনুমতি দেন?

প্যাটার্ন 1: দৃশ্যমান আইটেমগুলির মধ্যে একটি একক ইন্টারেক্টিভ একটি আইটেম

এই মডেলে, একাধিক আইটেম দৃশ্যমান, কিন্তু শুধুমাত্র প্রাথমিক বা "বর্তমান" আইটেম ইন্টারেক্টিভ। অন্যান্য দৃশ্যমান আইটেম জড় হয়. এই প্যাটার্নটি একজন ব্যবহারকারীকে একের পর এক আইটেমের সেটের মাধ্যমে গাইড করার জন্য উপযোগী।

এটি সঠিকভাবে তৈরি করতে, আপনাকে আগে আলোচনা করা একক-আইটেম ক্যারোজেলের মতো একই অ্যাক্সেসিবিলিটি প্যাটার্ন ব্যবহার করা উচিত। এর মধ্যে রয়েছে:

• ইন্টারঅ্যাক্টিভিটি প্রয়োগ করতে একটি স্ক্রোল-স্টেট কন্টেইনার কোয়েরি ব্যবহার করুন: অ-সক্রিয় আইটেমগুলিতে জড়।
• আপনার আইটেমগুলির চারপাশে পর্যাপ্ত প্যাডিং যোগ করুন যাতে প্রতিটি আইটেম প্রাথমিক অবস্থানে স্ন্যাপ করা যায় (উদাহরণস্বরূপ, স্ক্রলপোর্টের কেন্দ্র)। এটি একের পর এক নেভিগেশন মডেলকে ইচ্ছাকৃত এবং মসৃণ মনে করে।

প্যাটার্ন 2: সমস্ত দৃশ্যমান আইটেম ইন্টারেক্টিভ

আপনার লক্ষ্য যদি ব্যবহারকারীদের সমস্ত দৃশ্যমান আইটেমগুলির সাথে অবাধে ইন্টারঅ্যাক্ট করার অনুমতি দেওয়া হয়, তবে সর্বোত্তম অনুশীলন হল নিশ্চিত করা যে কোনও সামগ্রীই নিষ্ক্রিয় নয়৷

এই প্যাটার্নের জন্য:

• বিষয়বস্তু শব্দার্থগতভাবে একটি তালিকা হলে <ul> উপাদান ব্যবহার করুন, কারণ এটি স্ক্রিন রিডার ব্যবহারকারীদের জন্য সঠিক প্রসঙ্গ প্রদান করে।
• ইন্টারঅ্যাক্টিভিটি ম্যানেজমেন্ট ব্যবহার করবেন না ( interactivity: inert )। সমস্ত দৃশ্যমান সামগ্রী অ্যাক্সেসিবিলিটি ট্রিতে থাকা উচিত এবং কীবোর্ড ট্যাবিং ব্যবহার করে পৌঁছানো উচিত।

মোড়ানো

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

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