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

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

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

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

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

फ़ोकस का क्रम

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

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

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

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

टैबइंडेक्स

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

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

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

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

लिंक छोड़ें

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

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

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

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

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

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

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

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

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

अगर ब्राउज़र को फ़ोकस स्टाइलिंग को मैनेज करने की अनुमति दी जाती है, तो ध्यान रखें कि आपका कोड यह पुष्टि करेगा कि आपकी थीम, ब्राउज़र के डिफ़ॉल्ट को नहीं बदलेगी स्टाइलिंग. ओवरराइड को अक्सर "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 और एचटीएमएल के बारे में अपनी जानकारी की जांच करें