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

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

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

कुछ ऐसे लोग भी होते हैं जो कीबोर्ड का इस्तेमाल करके नेविगेट करना पसंद करते हैं जिनमें कोई दिव्यांगता नहीं होती.

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

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

फ़ोकस का क्रम

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

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

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

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

Tabindex

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

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

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

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

लिंक स्किप करना

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

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

जब कोई उपयोगकर्ता Tab बटन दबाता है और स्किप करने के लिए कोई लिंक मौजूद होता है, तो यह कीबोर्ड फ़ोकस को स्किप करने के लिए मौजूद लिंक पर भेजता है. उपयोगकर्ता, स्किप लिंक पर क्लिक करके, हेडर सेक्शन और मुख्य नेविगेशन को छोड़ सकता है. अगर वे 'स्किप करें' लिंक पर क्लिक नहीं करते और 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 */
}

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

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

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

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

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

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

देखें कि आपको क्या समझ आया

फ़ोकस के बारे में अपनी जानकारी की जांच करें.