फ़ोकस बढ़ाने वाले

द सीएसएस पॉडकास्ट - 018: फ़ोकस

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

ऐसा इसलिए है, क्योंकि <main> में tabindex="-1" एट्रिब्यूट की वैल्यू होती है, जिसका मतलब है कि इस पर प्रोग्राम के हिसाब से फ़ोकस किया जा सकता है. जब <main> को टारगेट किया जाता है—क्योंकि #main-content id से मेल खाता है—यह प्रोग्राम के हिसाब से फ़ोकस करता है. ऐसी स्थितियों में फ़ोकस स्टाइल को हटाने का फ़ैसला आपके लिए सही रहता है. लेकिन सही तरीके से और सावधानी से काम करने पर, एक बेहतर माहौल बनाने में मदद मिलती है. और उपयोगकर्ता अनुभव को बेहतर बनाना. इंटरैक्शन में कुछ रुचि जोड़ने के लिए भी यह एक बेहतरीन जगह हो सकती है.

फ़ोकस क्यों ज़रूरी है?

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

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

एलिमेंट कैसे फ़ोकस करते हैं

कुछ एलिमेंट पर अपने-आप फ़ोकस किया जा सकता है; ये इंटरैक्शन और इनपुट स्वीकार करने वाले एलिमेंट हैं, जैसे कि <a>, <button>, <input>, और <select>. इसका मतलब है कि फ़ॉर्म के सभी एलिमेंट, बटन, और लिंक. आम तौर पर, किसी वेबसाइट पर फ़ोकस करने लायक एलिमेंट पर जाने के लिए, Tab बटन का इस्तेमाल किया जा सकता है. वहीं, पीछे जाने के लिए shift + tab का इस्तेमाल किया जा सकता है.

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

अगर tabindex को -1 पर सेट किया जाता है, तो यह सिर्फ़ प्रोग्राम के हिसाब से फ़ोकस पा सकता है. इसका मतलब है कि सिर्फ़ तब जब कोई JavaScript इवेंट हो या हैश बदलाव (यूआरएल में एलिमेंट के id से मेल खाने वाला) होता है. अगर tabindex को 0 से ज़्यादा पर सेट किया जाता है, तो उसे ग्लोबल टैब इंडेक्स से हटा दिया जाएगा, दस्तावेज़ के सोर्स ऑर्डर से तय होता है. टैब करने का क्रम अब tabindex की वैल्यू से तय होगा, इसलिए, उदाहरण के लिए, tabindex="1" वाले एलिमेंट को tabindex="2" वाले एलिमेंट से पहले फ़ोकस मिलेगा.

फ़ोकस स्टाइलिंग

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

इस व्यवहार को सीएसएस की मदद से बदला जा सकता है. :focus, :focus-within, और :focus-visible का इस्तेमाल किया जा रहा है इस छद्म क्लास के बारे में आपने pseudo-classes लेसन. ऐसी फ़ोकस स्टाइल सेट करना ज़रूरी है जिसमें एलिमेंट की डिफ़ॉल्ट स्टाइल के साथ कंट्रास्ट शामिल हो. उदाहरण के लिए, outline प्रॉपर्टी का इस्तेमाल करना, एक सामान्य तरीका है.

a:focus {
  outline: 2px solid slateblue;
}

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

फ़िलहाल, कुछ ब्राउज़र में, अगर आपके एलिमेंट में border-radius सेट है और आप outline का इस्तेमाल करते हैं, तो वह मेल नहीं खाए—आउटलाइन के कोने नुकीले होंगे. इस वजह से, छोटे ब्लर रेडियस के साथ box-shadow का इस्तेमाल करना लुभावना है, क्योंकि box-shadow क्लिप को आकार देने के लिए border-radius के सम्मान में, हालांकि, यह स्टाइल Windows के हाई कंट्रास्ट मोड में नहीं दिखेगा. ऐसा इसलिए होता है, क्योंकि Windows हाई कंट्रास्ट मोड, शैडो को लागू नहीं करता है. और उपयोगकर्ता की पसंदीदा सेटिंग को प्राथमिकता देने के लिए, ज़्यादातर बैकग्राउंड की इमेज को अनदेखा कर देता है.

खास जानकारी में

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

• कीबोर्ड फ़ोकस रिसीव करने वाले एलिमेंट के लिए, outline: none का इस्तेमाल न करें.
• outline स्टाइल को box-shadow से न बदलें. क्योंकि वे Windows के हाई कंट्रास्ट मोड में नहीं दिखते.
• अगर आपको वाकई ऐसा करना ज़रूरी हो, तो एचटीएमएल एलिमेंट पर tabindex के लिए पॉज़िटिव वैल्यू सिर्फ़ तब सेट करें.
• पक्का करें कि फ़ोकस की स्थिति, डिफ़ॉल्ट स्थिति के मुकाबले काफ़ी साफ़ हो.

देखें कि आपको कितना समझ आया है

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