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

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 का इस्तेमाल करने पर, स्क्रोलर छोड़ा गया.

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

<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>

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

<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 सेट करें वैल्यू 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>

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