कीबोर्ड पर फ़ोकस करने लायक स्क्रोलर

Chrome 130 से, स्क्रोलर पर डिफ़ॉल्ट रूप से कीबोर्ड से फ़ोकस किया जा सकता है. हालांकि, ऐसा तब ही होगा, जब उनमें ऐसे एलिमेंट शामिल न हों जिन पर कीबोर्ड से फ़ोकस किया जा सकता हो.

बैकग्राउंड

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

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

सुलभता के सबसे सही तरीकों के मुताबिक, सभी सुविधाएं कीबोर्ड का इस्तेमाल करके उपलब्ध होनी चाहिए. इस तरह, हर कोई वेब का इस्तेमाल अपने हिसाब से कर सकता है.

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

स्क्रोलर में फ़ोकस करने से जुड़े इस बदलाव से पहले

इस बदलाव से पहले, स्क्रोलर एलिमेंट को सिर्फ़ तब टैब से फ़ोकस किया जा सकता था, जब tabindex को साफ़ तौर पर 0 या उससे ज़्यादा पर सेट किया गया हो. उदाहरण के लिए, यहां दी गई सीएसएस और एचटीएमएल का इस्तेमाल करें. इसके बाद, पहले बटन से स्क्रोलर एलिमेंट पर टैब करके देखें.

div.scroll, button {
  border: 1px solid lightgray;
  margin-top: 1em;
  border-radius: 0.5em;
}

div.scroll {
  overflow: auto;
  width: 20em;
  height: 5em;
  display: block;
}
div.long {
  width: 10em;
  height: 10em;
}

<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>
पॉज़िटिव tabindex की वजह से, स्क्रोलर पर फ़ोकस किया जा सकता है.

नीचे दिए गए एचटीएमएल की तरह नेगेटिव Tabindex का इस्तेमाल करने पर, स्क्रोलर को स्किप कर दिया जाएगा.

<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
नेगेटिव tabindex की वजह से स्क्रोलर को स्किप कर दिया गया है.

अगर आपने tabindex की वैल्यू सेट नहीं की है, तो उपयोगकर्ता के लिए स्क्रोलर को ऐक्सेस करने के लिए, क्रम से फ़ोकस करने की सुविधा का इस्तेमाल करना मुश्किल हो सकता है. जिन उपयोगकर्ताओं के पास माउस का ऐक्सेस नहीं है उनके लिए यह बहुत परेशानी भरा हो सकता है.

<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
स्क्रोलर में कोई tabindex नहीं है.

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

<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
स्क्रोलर पर फ़ोकस किया जा सकता है, क्योंकि इसमें फ़ोकस किए जा सकने वाले बच्चे हैं.

फ़ोकस किए जा सकने वाले स्क्रोलर के साथ, Chrome 130 से

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

<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>
स्क्रोलर में कोई tabindex या फ़ोकस किए जा सकने वाले बच्चे नहीं हैं, फिर भी उसे फ़ोकस किया जा सकता है.

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

<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
स्क्रोलर का tabindex 0 है.

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