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

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

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

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

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

फ़ोकस ऑर्डर

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

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

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

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

टैबइंडेक्स

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

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

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

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

स्किप लिंक

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

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

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

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

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

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

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

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

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

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

रैप-अप

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

आपने जो सीखा है उसकी जांच करें

ARIA और एचटीएमएल के बारे में अपनी जानकारी की जांच करें