सुलभ कैरसेल बनाना

Robert Flack

Penny McLachlan

Lucas Radaelli

पब्लिश होने की तारीख: 29 सितंबर, 2025

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

हालांकि, कैरसेल को ऐक्सेस करना अक्सर मुश्किल होता है. फ़ोकस मैनेज करना, स्क्रीन रीडर की सूचनाओं को सही तरीके से पाना, और स्क्रीन से बाहर मौजूद इंटरैक्टिव एलिमेंट को हैंडल करना मुश्किल होता है. इसलिए, कई साइटों पर मौजूद कैरसेल को ऐक्सेस नहीं किया जा सकता. इन चुनौतियों की वजह से, Chrome टीम ने इंटरैक्टिव सीएसएस कैरसेल पर काम किया. यह सीएसएस ओवरफ़्लो मॉड्यूल लेवल 5 का हिस्सा है. इसे Chrome 135 में शिप किया गया था.

Chrome में इस सुविधा को लॉन्च करने के बाद, हमें कम्यूनिटी से कई तरह के सुझाव और शिकायतें मिली हैं. हम उन पर काम कर रहे हैं. इसमें नई सुविधाएं शामिल हैं. जैसे, अलग-अलग और नेविगेशनल स्क्रोल मार्कर मोड के लिए सहायता और कई बग ठीक किए गए हैं. उदाहरण के लिए:

• वैकल्पिक टेक्स्ट में काउंटर के लिए सहायता, जो Chrome 140 में उपलब्ध है.
• ::scroll-button state बंद होने पर, स्क्रीन रीडर के उसे ठीक से न पढ़ने की समस्या को ठीक किया गया है.
• यह पक्का करना कि ::scroll-marker को कॉन्टेंट की वैल्यू से ARIA लेबल का नाम मिले.
• उस बग को ठीक किया गया है जिसमें सभी ::scroll-marker स्यूडो-एलिमेंट को "चुना गया" के तौर पर पढ़ा जाता था.

हमारा मानना है कि सीएसएस ओवरफ़्लो 5 में मौजूद सुविधाओं की मदद से, मज़बूत और ऐक्सेस किए जा सकने वाले कैरसेल बनाए जा सकते हैं. ये कैरसेल, पहली बार पेंट होने पर इंटरैक्टिव होते हैं. इस पोस्ट में, इन सुविधाओं का इस्तेमाल करके लंबे समय से चली आ रही सुलभता से जुड़ी समस्याओं को हल करने का तरीका बताया गया है.

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

आपको किस तरह का कैरसेल चाहिए?

कोड लिखने से पहले, यह जानना ज़रूरी है कि आपको किस तरह का कैरसेल बनाना है. सुलभता से जुड़ी सही रणनीति इस बात पर निर्भर करती है कि उपयोगकर्ता को कॉन्टेंट का अनुभव कैसे करना है. इस पोस्ट में, तीन सामान्य तरह के फ़िशिंग हमलों के बारे में बताया गया है:

एक आइटम वाले कैरसेल

सिंगल-आइटम कैरसेल में, एक बार में सिर्फ़ एक स्लाइड पूरी तरह दिखती है और इंटरैक्टिव होती है. उदाहरण के लिए, हीरो बैनर या स्लाइडशो.

अपने-आप पेज में बंटने वाले कैरसेल

अपने-आप पेज नंबर वाले कैरसेल में, कॉन्टेंट के "पेज" दिखते हैं. जैसे, प्रॉडक्ट या टीवी शो की सूची.

एक से ज़्यादा आइटम वाले कैरसेल

एक से ज़्यादा आइटम वाले कैरसेल में, कैरसेल के कई आइटम एक साथ दिखते हैं. हालांकि, बिना पेज नंबर के भी, इन्हें अलग-अलग स्क्रोल किया जा सकता है.

हर तरह के कैरसेल के लिए, ऐक्सेसिबिलिटी से जुड़ी बातों और सबसे सही तरीकों का ध्यान रखना ज़रूरी है.

एक आइटम वाले कैरसेल

यह क्लासिक स्लाइड शो है. एक बार में सिर्फ़ एक चाइल्ड एलिमेंट पढ़ा जा सकता है. हालांकि, कई मामलों में उपयोगकर्ताओं को अगले या पिछले आइटम की "झलक" दिखेगी, ताकि उन्हें अतिरिक्त कॉन्टेंट के बारे में जानकारी मिल सके. इसका मकसद यह पक्का करना है कि सिर्फ़ बीच में मौजूद और पूरी तरह से दिखने वाली स्लाइड इंटरैक्टिव हो.

इसे ऐक्सेस करने का तरीका यहां सिलसिलेवार तरीके से बताया गया है.

पहला चरण: स्क्रोल स्नैपिंग की मदद से, एक ही आइटम पर फ़ोकस करना

यह पक्का करने के लिए कि स्क्रोल कंटेनर हमेशा किसी स्लाइड पर "स्नैप" हो, ताकि कोई भी आइटम बीच में न अटके, सीएसएस स्क्रोल स्नैपिंग का इस्तेमाल करें. इससे यह पक्का होता है कि स्क्रोल करने के बाद, कोई आइटम अपनी सही जगह पर "स्नैप" हो जाए. इससे उपयोगकर्ता को बेहतर अनुभव मिलता है.

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

दूसरा चरण: कैरसेल और स्लाइड में किए गए बदलावों के बारे में सूचना देना

स्क्रीन रीडर का इस्तेमाल करने वाले व्यक्ति को यह पता होना चाहिए कि उसने कैरसेल में एंट्री कर ली है. साथ ही, उसे यह भी पता होना चाहिए कि स्लाइड कब बदलती है. इसके लिए, कैरसेल कंटेनर पर कुछ ARIA एट्रिब्यूट की ज़रूरत होती है:

यहां एचटीएमएल स्ट्रक्चर दिया गया है:

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

तीसरा चरण: सिर्फ़ दिखने वाली स्लाइड को इंटरैक्टिव बनाना

यह सुलभता के लिए ज़रूरी है, क्योंकि इससे उपयोगकर्ताओं को स्क्रीन से बाहर की स्लाइड पर मौजूद बटन या लिंक पर गलती से टैब करने से रोका जा सकता है. इसके लिए, नई 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;
    }
  }
}

इस सीएसएस की मदद से, ब्राउज़र यह अपने-आप तय करता है कि किन आइटम पर फ़ोकस किया जा सकता है. tabindex को मैनेज करने के लिए, अब JavaScript की ज़रूरत नहीं है. 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: दिखने वाले आइटम में से कोई एक इंटरैक्टिव आइटम

इस मॉडल में, एक साथ कई आइटम दिखते हैं. हालांकि, सिर्फ़ प्राइमरी या "मौजूदा" आइटम के साथ इंटरैक्ट किया जा सकता है. दिखने वाले अन्य आइटम काम नहीं करते. यह पैटर्न, एक-एक करके आइटम के सेट के बारे में उपयोगकर्ता को जानकारी देने के लिए काम का है.

इसे सही तरीके से बनाने के लिए, आपको उसी ऐक्सेसिबिलिटी पैटर्न का इस्तेमाल करना चाहिए जिसका इस्तेमाल, एक आइटम वाले कैरसेल के लिए किया गया था. इसके बारे में हमने पहले बताया था. इसमें ये चीज़ें शामिल हैं:

• स्क्रोल करने की स्थिति के हिसाब से कंटेनर क्वेरी का इस्तेमाल करके, इंटरैक्टिविटी लागू करें: इनर्ट से नॉन-ऐक्टिव आइटम.
• अपने आइटम के चारों ओर ज़रूरत के मुताबिक पैडिंग जोड़ें, ताकि हर आइटम को प्राइमरी पोज़िशन (उदाहरण के लिए, स्क्रोलपोर्ट का सेंटर) पर स्नैप किया जा सके. इससे एक-एक करके नेविगेट करने का मॉडल, जान-बूझकर और आसानी से किया गया लगता है.

दूसरा पैटर्न: दिखने वाले सभी आइटम इंटरैक्टिव होते हैं

अगर आपका लक्ष्य यह है कि उपयोगकर्ता, दिखने वाले सभी आइटम के साथ आसानी से इंटरैक्ट कर सकें, तो सबसे सही तरीका यह है कि यह पक्का किया जाए कि कोई भी कॉन्टेंट निष्क्रिय न हो.

इस पैटर्न के लिए:

• अगर कॉन्टेंट सिमैंटिक तौर पर कोई सूची है, तो <ul> एलिमेंट का इस्तेमाल करें. इससे स्क्रीन रीडर का इस्तेमाल करने वाले लोगों को सही कॉन्टेक्स्ट मिलता है.
• इंटरैक्टिविटी मैनेजमेंट (interactivity: inert) का इस्तेमाल न करें. दिखने वाला पूरा कॉन्टेंट, ऐक्सेसिबिलिटी ट्री में होना चाहिए. साथ ही, कीबोर्ड टैबिंग का इस्तेमाल करके उस तक पहुंचा जा सकता हो.

रैप अप

CSS Overflow 5 की मदद से, सामान्य और इंटरैक्टिव कैरसेल पैटर्न को आसानी से बनाया जा सकता है. साथ ही, इसमें ऐक्सेसिबिलिटी से जुड़ी समस्याएं भी कम होती हैं. सिमेंटिक एचटीएमएल, स्क्रोल-स्टेट और इंटरैक्टिविटी जैसी मॉडर्न सीएसएस, और सही ARIA भूमिकाओं को मिलाकर, बेहतर परफ़ॉर्मेंस वाले और ऐक्सेस किए जा सकने वाले अनुभव बनाए जा सकते हैं. ये अनुभव, फ़र्स्ट पेंट के दौरान इंटरैक्टिव होते हैं.

इन नए एपीआई को आज़माएं! हमेशा की तरह, इन पैटर्न और एपीआई को इंटरैक्टिव, तेज़, और आसानी से ऐक्सेस किए जा सकने वाले कॉम्पोनेंट बनाने के लिए डिज़ाइन किया गया है. हालांकि, पूरी तरह से ऐक्सेसिबिलिटी की जांच करने का कोई विकल्प नहीं है. आपको हमेशा यह पुष्टि करनी होगी कि आपका कोड ऐक्सेस किया जा सकता है और यह आपके बेसलाइन टारगेट के लिए काम करता है.