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

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

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

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

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

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

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

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

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

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

अगर 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 के लिए सिर्फ़ तब पॉजिटिव वैल्यू सेट करें, जब ज़रूरी हो.
• पक्का करें कि फ़ोकस की स्थिति, डिफ़ॉल्ट स्थिति के मुकाबले बहुत साफ़ हो.

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

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