कीबोर्ड फ़ोकस

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

जिन लोगों को कुछ समय के लिए शारीरिक समस्याएं होती हैं वे नेविगेट करने के लिए कीबोर्ड का इस्तेमाल कर सकते हैं. जैसे, कलाई में मोच आना या कार्पल टनल सिंड्रोम जैसी समस्याएं. कम दिखने या पूरी तरह से न दिखने वाले लोग, नेविगेट करने के लिए कीबोर्ड का इस्तेमाल कर सकते हैं. इसके साथ ही, वे मैग्निफ़िकेशन या स्क्रीन रीडर सॉफ़्टवेयर का इस्तेमाल भी कर सकते हैं. हालांकि, वे स्क्रीन पर नेविगेट करने के लिए, अलग-अलग कीबोर्ड शॉर्टकट कमांड का इस्तेमाल कर सकते हैं. जबकि, सामान्य तौर पर दिखने वाला कोई व्यक्ति, अलग कीबोर्ड शॉर्टकट कमांड का इस्तेमाल कर सकता है.

कुछ लोग, बिना किसी समस्या के भी नेविगेट करने के लिए कीबोर्ड का इस्तेमाल कर सकते हैं.

इन सभी समस्याओं और स्थितियों के लिए, कीबोर्ड की सुविधा उपलब्ध होना ज़रूरी है. कीबोर्ड की सुलभता का ज़्यादातर हिस्सा, फ़ोकस पर आधारित होता है. फ़ोकस का मतलब है, स्क्रीन पर मौजूद वह एलिमेंट जो कीबोर्ड से इनपुट लेता है.

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

फ़ोकस ऑर्डर

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

ज़्यादातर भाषाओं के लिए, फ़ोकस ऑर्डर पेज के सबसे ऊपर से शुरू होकर सबसे नीचे खत्म होता है. यह बाईं से दाईं ओर जाता है. हालांकि, कुछ भाषाएं दाईं से बाईं ओर पढ़ी जाती हैं. इसलिए, पेज की मुख्य भाषा के लिए, अलग फ़ोकस ऑर्डर की ज़रूरत पड़ सकती है.

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

फ़ोकस ऑर्डर को अपडेट करके, ऐसे एलिमेंट शामिल किए जा सकते हैं जिन्हें आम तौर पर फ़ोकस नहीं किया जाता. जैसे, एचटीएमएल के ऐसे एलिमेंट जिनसे इंटरैक्ट नहीं किया जा सकता, कस्टम कॉम्पोनेंट या ARIA वाले एलिमेंट. साथ ही, स्वाभाविक तौर पर फ़ोकस किए जा सकने वाले एलिमेंट के सिमैंटिक को बदला जा सकता है.

Tabindex

फ़ोकस ऑर्डर, उन एलिमेंट से शुरू होता है जिनमें पॉज़िटिव tabindex एट्रिब्यूट होता है. अगर कोई एलिमेंट नहीं है, तो यह सबसे छोटे पॉज़िटिव नंबर से सबसे बड़े नंबर तक जाता है. जैसे, 1, 2, 3. इसके बाद, यह DOM में मौजूद क्रम के हिसाब से, tabindex वाले एलिमेंट पर जाता है. नेगेटिव tabindex वाले एलिमेंट, स्वाभाविक तौर पर फ़ोकस किए जा सकने वाले एलिमेंट के ऑर्डर से हटा दिए जाते हैं.

जब आम तौर पर फ़ोकस नहीं किए जा सकने वाले एलिमेंट पर, tabindex की वैल्यू ज़ीरो (tabindex="0") सेट की जाती है, तो उन्हें पेज के स्वाभाविक तौर पर फ़ोकस किए जा सकने वाले एलिमेंट के ऑर्डर में शामिल कर लिया जाता है. यह ऑर्डर, DOM में उनके दिखने के क्रम के हिसाब से होता है. हालांकि, एचटीएमएल के ऐसे एलिमेंट जिन्हें स्वाभाविक तौर पर फ़ोकस किया जा सकता है उनके उलट, आपको उनके लिए कीबोर्ड की अतिरिक्त सुविधा देनी होगी, ताकि उन्हें पूरी तरह से ऐक्सेस किया जा सके.

इसी तरह, अगर आपके पास कोई ऐसा एलिमेंट है जिसे आम तौर पर फ़ोकस किया जा सकता है, लेकिन वह इनऐक्टिव है, तो आपको इस एलिमेंट में नेगेटिव tabindex (tabindex="-1") जोड़ना चाहिए. जैसे, कोई बटन तब तक काम नहीं करता, जब तक कोई इनपुट फ़ील्ड न भरा जाए. नेगेटिव tabindex जोड़ने से, सुलभता टेक्नोलॉजी और कीबोर्ड को यह सिग्नल मिलता है कि इस बटन को स्वाभाविक तौर पर फ़ोकस किए जा सकने वाले एलिमेंट के ऑर्डर से हटा दिया जाना चाहिए. हालांकि, चिंता न करें. ज़रूरत पड़ने पर, JavaScript का इस्तेमाल करके एलिमेंट में फ़ोकस वापस जोड़ा जा सकता है.

इस उदाहरण में, ऐसे एलिमेंट में tabindex एट्रिब्यूट जोड़ा गया है जिन्हें स्वाभाविक तौर पर फ़ोकस नहीं किया जा सकता. एलिमेंट के ऑर्डर को tabindex का इस्तेमाल करके बदला गया है, ताकि यह दिखाया जा सके कि फ़ोकस ऑर्डर पर इसका कितना असर पड़ सकता है. यह इस बात का उदाहरण है कि क्या नहीं करना चाहिए!

स्किप लिंक

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

लिंक के ऐसे ग्रुप को स्किप करने के लिए जो काम के नहीं हैं या जिनकी ज़रूरत नहीं है, स्किप लिंक जोड़ा जा सकता है. स्किप लिंक, ऐंकर लिंक होते हैं. ये लिंक, उपयोगकर्ता को वेबसाइट के किसी दूसरे पेज या बाहरी रिसॉर्स पर भेजने के बजाय, उसी पेज के किसी दूसरे सेक्शन पर ले जाते हैं. इसके लिए, उस सेक्शन के आईडी का इस्तेमाल किया जाता है. स्किप लिंक आम तौर पर, फ़ोकस किए जा सकने वाले पहले एलिमेंट के तौर पर जोड़े जाते हैं. जब कोई उपयोगकर्ता किसी वेबसाइट पर आता है, तो उसे यह एलिमेंट दिखता है. डिज़ाइन के हिसाब से, यह एलिमेंट दिख सकता है या तब तक छिपा रह सकता है, जब तक कोई उपयोगकर्ता टैब का इस्तेमाल करके इस पर न जाए.

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

सभी लिंक की तरह, यह ज़रूरी है कि स्किप लिंक में, लिंक के मकसद के बारे में जानकारी शामिल हो. "मुख्य कॉन्टेंट पर जाएं" वाक्यांश जोड़ने से, उपयोगकर्ता को पता चलता है कि लिंक उसे कहां ले जा रहा है. लिंक में अतिरिक्त जानकारी देने के लिए, कई कोड विकल्प चुने जा सकते हैं. जैसे, aria-labelledby, aria-label या उदाहरण में दिखाए गए तरीके से, इसे <a> एलिमेंट के टेक्स्ट कॉन्टेंट में जोड़ना.

फ़ोकस इंडिकेटर

जैसा कि आपने अभी सीखा, फ़ोकस ऑर्डर, कीबोर्ड की सुलभता का एक अहम पहलू है. यह तय करना भी ज़रूरी है कि फ़ोकस को किस स्टाइल में दिखाया जाए. क्योंकि, भले ही फ़ोकस ऑर्डर बहुत अच्छा हो, लेकिन सही स्टाइल के बिना, उपयोगकर्ता को कैसे पता चलेगा कि वह पेज पर कहां है?

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

ब्राउज़र की डिफ़ॉल्ट स्टाइलिंग

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

अगर आपने ब्राउज़र को फ़ोकस स्टाइलिंग को मैनेज करने की अनुमति दी है, तो अपने कोड की समीक्षा करना ज़रूरी है, ताकि यह पक्का किया जा सके कि आपकी थीम, ब्राउज़र की डिफ़ॉल्ट स्टाइलिंग को ओवरराइड नहीं करेगी. ओवरराइड को अक्सर, "outline: 0" या "outline: none" के तौर पर आपकी स्टाइल शीट में लिखा जाता है. कोड का यह छोटा हिस्सा, ब्राउज़र की डिफ़ॉल्ट फ़ोकस इंडिकेटर स्टाइलिंग को हटा सकता है. इससे उपयोगकर्ताओं के लिए, आपकी वेबसाइट या ऐप्लिकेशन पर नेविगेट करना बहुत मुश्किल हो जाता है.

सुझाया नहीं जाता — कोई आउटलाइन नहीं

a:focus {
  outline: none; /* don't do this! */
}

सुझाया जाता है — स्टाइल की गई आउटलाइन

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

पसंद के मुताबिक बनाई गईं शैलियां

ज़रूरी नहीं कि ब्राउज़र की डिफ़ॉल्ट स्टाइल का ही इस्तेमाल किया जाए. अपनी थीम के हिसाब से, फ़ोकस इंडिकेटर की कस्टम स्टाइल भी बनाई जा सकती है. फ़ोकस इंडिकेटर की कस्टम स्टाइल बनाते समय, आपके पास क्रिएटिव होने की पूरी आज़ादी होती है!

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

फ़ोकस इंडिकेटर की स्टाइल बदली जा सकती है, ताकि वह दिख सके. उदाहरण के लिए, जब किसी पेज का बैकग्राउंड सफ़ेद होता है, तो बटन के फ़ोकस इंडिकेटर का बैकग्राउंड नीला सेट किया जा सकता है. जब पेज का बैकग्राउंड नीला होता है, तो उसी बटन के फ़ोकस की स्टाइल का बैकग्राउंड सफ़ेद सेट किया जा सकता है.

एलिमेंट के टाइप के आधार पर, फ़ोकस एलिमेंट की स्टाइल बदली जा सकती है. उदाहरण के लिए, बॉडी लिंक के लिए डॉटेड अंडरलाइन का इस्तेमाल किया जा सकता है. वहीं, बटन एलिमेंट के लिए राउंडेड बॉर्डर चुना जा सकता है.

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