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

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

बैकग्राउंड

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

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

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

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

स्क्रोलर पर फ़ोकस करने के लिए इस बदलाव से पहले

इस बदलाव से पहले, स्क्रोलर एलिमेंट को सिर्फ़ तब टैब पर फ़ोकस किया जा सकता है, जब 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 का इस्तेमाल करने से, स्क्रोलर को स्किप कर दिया जाएगा.

<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 124 से

इस सुविधा से, ऐसे स्क्रोलर इस्तेमाल किए जा सकते हैं जिनके लिए 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 या फ़ोकस करने लायक बच्चे नहीं हैं, लेकिन अभी भी उस पर फ़ोकस किया जा सकता है.

ध्यान दें कि ऐसा सिर्फ़ तब होता है, जब स्क्रोलर के पास फ़ोकस करने लायक कोई बच्चा न हो. उदाहरण के लिए, अगर स्क्रोलर में पहले से ही कोई बटन है, तो टैब फ़ोकस, स्क्रोलर को छोड़कर सीधे बटन पर फ़ोकस करेगा. इस मामले में, जब बटन पर फ़ोकस हो, तब स्क्रोलर कॉन्टेंट को ऐरो बटन का इस्तेमाल करके पहले से ही ऐक्सेस किया जा सकता है. इस नियम की वजह से, हो सकता है कि डिफ़ॉल्ट तौर पर सेट किए गए बच्चे हमेशा सबसे अच्छा व्यवहार न करें. अगर आपको इस स्थिति में स्क्रोलर एलिमेंट को कीबोर्ड फ़ोकस करने लायक बनाना है, तो हमारा सुझाव है कि आप 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 है.

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