'सीक्वेंशियल फ़ोकस नेविगेशन का शुरुआती पॉइंट' सुविधा से यह तय होता है कि फ़ोकस किए गए एलिमेंट न होने पर, सीक्वेंशियल फ़ोकस नेविगेशन ([Tab] या [Shift-Tab]) के लिए, फ़ोकस किए जा सकने वाले एलिमेंट कहां से खोजे जाएं. यह सुविधा, "लिंक को स्किप करें" जैसी सुलभता सुविधाओं और दस्तावेज़ में फ़ोकस मैनेज करने के लिए खास तौर पर मददगार है.
एचटीएमएल में, कीबोर्ड इंटरैक्शन से जुड़ी कई सुविधाएं पहले से मौजूद होती हैं. इसका मतलब है कि कीबोर्ड से इस्तेमाल किए जा सकने वाले पेज लिखना काफ़ी आसान है. भले ही, मोटर से जुड़ी कोई समस्या हो, जिसकी वजह से हम माउस का इस्तेमाल न कर पा रहे हों या हम इतने ज़्यादा तेज़ हों कि कीबोर्ड से हाथ हटाने में ज़्यादा समय बर्बाद न करना पड़े.
कीबोर्ड मैनेजमेंट, फ़ोकस के आस-पास होता है. इससे यह तय होता है कि कीबोर्ड इवेंट, पेज में कहां जाएंगे. कुछ स्थितियों में, अब तक हमें कीबोर्ड इस्तेमाल करने वालों के लिए, कुछ अतिरिक्त काम करने पड़ते थे. focus() तरीके की मदद से, उपयोगकर्ता की कार्रवाई के जवाब में फ़ोकस करने के लिए, किसी एलिमेंट को चुनकर फ़ोकस को मैनेज किया जा सकता है. हालांकि, इस सबसे सही तरीके में कई समस्याएं आती हैं. साथ ही, बुनियादी अनुभव देने के लिए, JavaScript हैकरी की ज़रूरत होती है.
हालांकि, यह तकनीक जल्द ही पूरी तरह से बंद नहीं होगी, लेकिन Chrome 50 में यह कुछ ही मामलों में ज़रूरी होगी. इसकी वजह यह है कि इसमें क्रम से फ़ोकस नेविगेशन स्टार्ट पॉइंट की सुविधा है. इस बदलाव के बाद, अच्छी तरह से लिखे गए पेज अपने-आप ज़्यादा ऐक्सेस किए जा सकेंगे. इसके लिए, फ़ोकस मैनेज करने के लिए मैन्युअल तरीके का इस्तेमाल करने की ज़रूरत नहीं होगी. आइए, एक उदाहरण देखें.
पेज के अंदर लिंक
ज़्यादा टेक्स्ट वाली साइटें, अक्सर एक ही पेज में इंटरलिंक होती हैं. इससे उपयोगकर्ता, अहम सेक्शन पर तुरंत जा सकते हैं.
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
अगर मैं कीबोर्ड का इस्तेमाल करने वाला व्यक्ति होता और ऑस्ट्रेलियाई खाने का शौकीन होता, तो मेरी अगली कार्रवाइयां कुछ इस तरह की होतीं:
- रेसिपी के लिंक पर फ़ोकस करने के लिए,
Tabको दो बार दबाएं - रेसिपी सेक्शन पर जाने के लिए,
Enterदबाएं - ज़्यादा पढ़ें लिंक पर फ़ोकस करने के लिए,
Tabको फिर से दबाएं
आइए, Chrome 49 का इस्तेमाल करके देखें कि यह सुविधा कैसे काम करती है.
ओह. ऐसा नहीं हुआ जैसा आपने सोचा था, है ना?
Tab को आखिरी बार दबाने पर, फ़ोकस 'ज़्यादा पढ़ें' लिंक के बजाय, कॉन्टेंट की सूची में अगले आइटम पर चला गया. इसकी वजह यह है कि डेवलपर ने हेडर को फ़ोकस करने लायक बनाने के लिए, उस पर tabindex="-1" सेट नहीं किया है. इसलिए, #recipes नाम वाले ऐंकर पर क्लिक करने से फ़ोकस नहीं बदला. यह एक छोटी सी गलती है. अगर आपने माउस का इस्तेमाल किया है, तो यह कोई बड़ी बात नहीं है. हालांकि, अगर आपने कीबोर्ड या स्विच डिवाइस का इस्तेमाल किया है, तो यह आपके लिए बहुत बड़ी समस्या हो सकती है. किसी सामान्य Wikipedia पेज पर इंटरलिंक करने की संख्या पर विचार करें? इन सभी ऐंकर पर बार-बार टैब करना परेशानी भरा हो सकता है!
अब Chrome 50 का इस्तेमाल करके, उसी अनुभव पर नज़र डालते हैं.
वाह, यह वही है जो हमें चाहिए था. सबसे अच्छी बात यह है कि हमें अपना कोड बदलना नहीं पड़ा. ब्राउज़र ने यह पता लगा लिया है कि दस्तावेज़ में हम कहां थे, इसके आधार पर फ़ोकस कहां होना चाहिए.
यह कैसे काम करता है?
फ़ोकस शुरू करने के पॉइंट को लागू करने से पहले, फ़ोकस हमेशा पिछले फ़ोकस किए गए एलिमेंट या पेज के सबसे ऊपर से चलता रहता था. इसका मतलब है कि अगले फ़ोकस किए जाने वाले आइटम को चुनने पर, फ़ोकस को किसी ऐसे आइटम पर ले जाया जा सकता है जिस पर फ़ोकस नहीं किया जाना चाहिए. जैसे, कंटेनर एलिमेंट या हेडिंग. इस वजह से, कई तरह की समस्याएं आती हैं. जैसे, अगर आपने अनजाने में ऐसे किसी एलिमेंट पर क्लिक किया, तो फ़ोकस रिंग दिखना.
फ़ोकस शुरू करने की जगह, जैसा कि नाम से पता चलता है, यह एक ऐसा तरीका है जो Tab या Shift-Tab दबाने पर, फ़ोकस किए जा सकने वाले अगले एलिमेंट को कहां से ढूंढना शुरू करना है, इसका सुझाव देता है.
इसे कई तरीकों से सेट किया जा सकता है:
अगर किसी आइटम पर फ़ोकस है, तो वह पहले की तरह ही फ़ोकस नेविगेशन का शुरुआती पॉइंट भी होगा.
साथ ही, पहले की तरह ही, अगर फ़ोकस नेविगेशन के शुरुआती पॉइंट को किसी और चीज़ ने सेट नहीं किया है, तो यह मौजूदा document होगा या अगर उपलब्ध और काम करने वाला है, तो फ़िलहाल चालू dialog होगा.
अगर ऊपर दिए गए उदाहरण की तरह किसी पेज फ़्रैगमेंट पर नेविगेट किया जाता है, तो फ़ोकस शुरू होने का पॉइंट सेट हो जाएगा.
इसके अलावा, अगर हम पेज पर किसी भी एलिमेंट पर क्लिक करते हैं, तो फ़ोकस नेविगेशन का शुरुआती पॉइंट सेट हो जाएगा. भले ही, उस एलिमेंट पर फ़ोकस किया जा सकता हो या नहीं.
आखिर में, अगर फ़ोकस के शुरुआती पॉइंट के तौर पर चुने गए एलिमेंट को DOM से हटा दिया जाता है, तो उसका पैरंट एलिमेंट फ़ोकस का शुरुआती पॉइंट बन जाता है. अब फ़ोकस को एक जगह से दूसरी जगह ले जाने की ज़रूरत नहीं है!
इस्तेमाल के अन्य उदाहरण
ऊपर दिए गए उदाहरण के अलावा, कई अन्य मामलों में भी यह सुविधा काम आ सकती है.
एलिमेंट छिपाना
ऐसा हो सकता है कि उपयोगकर्ता किसी ऐसे आइटम पर फ़ोकस कर रहा हो जिसे visibility: hidden या display: none पर सेट करना ज़रूरी हो. इसका एक उदाहरण, कैरसेल में क्लिक किए जा सकने वाले आइटम हैं. Chrome के पिछले वर्शन में, फ़िलहाल फ़ोकस किए गए आइटम को इस तरह से छिपाने पर, फ़ोकस फिर से डिफ़ॉल्ट शुरुआती पॉइंट पर रीसेट हो जाता था. इससे, ऊपर बताए गए कैरसेल को मोटर से जुड़ी समस्याओं वाले उपयोगकर्ताओं के लिए एक बुरा फ़ैसला साबित होता था. क्रम से फ़ोकस करने की सुविधा के शुरू होने के बाद, ऐसा नहीं होता. अगर ऊपर बताए गए किसी भी तरीके से कोई एलिमेंट छिपा हुआ है, तो Tab बटन दबाने पर, फ़ोकस अगले आइटम पर चला जाएगा.
लिंक स्किप करना
स्किप लिंक, ऐसे ऐंकर होते हैं जो दिखते नहीं हैं. इन पर सिर्फ़ कीबोर्ड की मदद से पहुंचा जा सकता है. इनकी मदद से, उपयोगकर्ता सीधे किसी पेज के कॉन्टेंट पर जा सकते हैं. इसके लिए, उन्हें नेविगेशन एलिमेंट “स्किप” करने की ज़रूरत नहीं होती. ये कीबोर्ड और स्विच डिवाइस इस्तेमाल करने वालों के लिए काफ़ी फ़ायदेमंद हो सकते हैं. जैसा कि WebAIM साइट पर बताया गया है
कई लोकप्रिय वेबसाइटें स्किप लिंक लागू करती हैं. हालांकि, हो सकता है कि आपने कभी इन पर ध्यान न दिया हो.
स्किप लिंक, नाम वाले एंकर होते हैं. इसलिए, ये उसी तरह काम करते हैं जिस तरह कॉन्टेंट की सूची के हमारे मूल उदाहरण में दिखाया गया है.
चेतावनियां और सहायता
फ़ोकस नेविगेशन की क्रम से शुरू होने की सुविधा, फ़िलहाल सिर्फ़ Chrome 50, Firefox, और Opera पर काम करती है. जब तक यह सभी ब्राउज़र में काम नहीं करता, तब तक आपको अपने नाम वाले ऐंकर टारगेट में tabindex="-1" जोड़ना होगा. साथ ही, फ़ोकस आउटलाइन को हटाना होगा.
डेमो
क्रम से फ़ोकस नेविगेशन की शुरुआती जगह, ब्राउज़र के सुलभता प्राइमिटिव के सेट में एक बेहतरीन जोड़ है. इसे समझना आसान है. साथ ही, इससे हमें अपने ऐप्लिकेशन से कोड हटाने में मदद मिलती है. इससे, हमारे उपयोगकर्ताओं को बेहतर अनुभव मिलता है. दोहरी जीत! इस सुविधा के बारे में ज़्यादा जानने के लिए, डेमो देखें.