'क्रम के मुताबिक फ़ोकस नेविगेशन का शुरुआती पॉइंट' सुविधा से पता चलता है कि फ़ोकस किए गए नेविगेशन ([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 चालू होगा.
ऊपर दिए गए उदाहरण की तरह, अगर हम किसी पेज फ़्रैगमेंट पर नेविगेट करते हैं, तो यह फ़ोकस स्टार्ट पॉइंट सेट करेगा.
साथ ही, अगर हम पेज पर मौजूद किसी भी एलिमेंट पर क्लिक करते हैं, तो अब फ़ोकस नेविगेशन स्टार्ट पॉइंट सेट हो जाएगा. भले ही, वह एलिमेंट फ़ोकस करने लायक हो या नहीं.
आखिर में, अगर फ़ोकस स्टार्ट पॉइंट वाले एलिमेंट को डीओएम से हटा दिया जाता है, तो इसका पैरंट फ़ोकस स्टार्ट पॉइंट बन जाता है. अब किसी मोल-भाव पर फ़ोकस करने की ज़रूरत नहीं है!
इस्तेमाल के अन्य उदाहरण
ऊपर दिए गए उदाहरण के अलावा, कई और स्थितियों में यह सुविधा काम की हो सकती है.
एलिमेंट छिपाना
कभी-कभी ऐसा भी हो सकता है कि उपयोगकर्ता का फ़ोकस किसी ऐसे आइटम पर हो जिसे visibility: hidden या display: none पर सेट करना ज़रूरी हो. इसका एक उदाहरण, कैरसेल में मौजूद ऐसे आइटम जिन पर क्लिक किया जा सकता है. Chrome के पिछले वर्शन में, फ़ोकस किए गए मौजूदा आइटम को इस तरह से छिपाने से, फ़ोकस वापस डिफ़ॉल्ट शुरुआती पॉइंट पर रीसेट हो जाता है. इससे, ऊपर बताए गए कैरसेल ऐसे उपयोगकर्ताओं के लिए खतरनाक जाल में बदल जाते हैं जिन्हें चलने में परेशानी होती है. क्रम के मुताबिक फ़ोकस शुरू होने की तारीख में, अब ऐसा नहीं होता है. अगर ऊपर दिए गए किसी भी तरीके की मदद से, कोई एलिमेंट छिपाया गया है, तो Tab बटन दबाने से, फ़ोकस करने लायक अगले आइटम पर स्विच हो जाएगा.
स्किप लिंक
स्किप लिंक ऐसे ऐंकर होते हैं जो नहीं दिखते. इन पर सिर्फ़ कीबोर्ड से ही पहुंचा जा सकता है. इनकी मदद से उपयोगकर्ता, नेविगेशन एलिमेंट को "स्किप" करके, सीधे किसी पेज के कॉन्टेंट पर जा सकते हैं. साथ ही, ये कीबोर्ड और डिवाइस इस्तेमाल करने वाले लोगों के लिए बहुत फ़ायदेमंद हो सकते हैं. जैसा कि WebAIM की साइट पर बताया गया है
कई लोकप्रिय वेबसाइटें स्किप लिंक का इस्तेमाल करती हैं, लेकिन आपने कभी उन पर ध्यान नहीं दिया होगा.
स्किप लिंक को ऐंकर नाम दिया जाता है. इसलिए, वे हमारे मूल विषय सूची वाले उदाहरण की तरह ही काम करते हैं.
सावधानियां और सहायता
फ़िलहाल, क्रम के मुताबिक फ़ोकस नेविगेशन के शुरुआती पॉइंट की सुविधा सिर्फ़ Chrome 50, Firefox, और Opera में काम करती है. जब तक यह सभी ब्राउज़र पर काम नहीं करता, तब तक आपको नाम वाले ऐंकर टारगेट में tabindex="-1" जोड़ना होगा और फ़ोकस की आउटलाइन को हटाना होगा.
डेमो
क्रम के मुताबिक फ़ोकस नेविगेशन की शुरुआत, ब्राउज़र की सुलभता सुविधाओं में बेहतर तरीके से शामिल होती है. इसे आसानी से इस्तेमाल किया जा सकता है और असल में, इससे हम अपने ऐप्लिकेशन से कोड हटा पाते हैं. साथ ही, उपयोगकर्ताओं के अनुभव को भी बेहतर बना पाते हैं. दोहरी जीत! इस सुविधा के बारे में ज़्यादा जानने के लिए, डेमो पर जाएं.