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

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

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

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

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

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

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

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

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

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

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

स्टाइल फ़ोकस

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

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

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

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

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

खास जानकारी

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

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

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

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