सीएसएस पॉडकास्ट - 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
को धुंधला करने के लिए छोटे रेडियस का इस्तेमाल करना ज़रूरी हो जाता है, क्योंकि box-shadow
, border-radius
के हिसाब से आकार में काटता है. हालांकि, यह स्टाइल, Windows के हाई कंट्रास्ट मोड में नहीं दिखेगा.
ऐसा इसलिए होता है, क्योंकि Windows का हाई-कॉन्ट्रास्ट मोड, शेडो लागू नहीं करता. साथ ही, उपयोगकर्ता की पसंदीदा सेटिंग के हिसाब से बैकग्राउंड इमेज को अनदेखा करता है.
खास जानकारी में
फ़ोकस की ऐसी स्थिति बनाना ज़रूरी है जो एलिमेंट की डिफ़ॉल्ट स्थिति से अलग हो. ब्राउज़र की डिफ़ॉल्ट स्टाइल, पहले से ही ऐसा करती हैं. हालांकि, अगर आपको इस व्यवहार में बदलाव करना है, तो इन बातों का ध्यान रखें:
- ऐसे एलिमेंट पर
outline: none
का इस्तेमाल करने से बचें जिस पर कीबोर्ड फ़ोकस हो सकता है. outline
स्टाइल कोbox-shadow
से बदलने से बचें. क्योंकि ये Windows के हाई कंट्रास्ट मोड में नहीं दिखते.- एचटीएमएल एलिमेंट पर
tabindex
के लिए सिर्फ़ तब पॉजिटिव वैल्यू सेट करें, जब ज़रूरी हो. - पक्का करें कि फ़ोकस की स्थिति, डिफ़ॉल्ट स्थिति के मुकाबले बहुत साफ़ हो.
देखें कि आपको क्या समझ आया
फ़ोकस के बारे में अपनी जानकारी की जांच करें
इनमें से कौनसे एलिमेंट अपने-आप फ़ोकस हो सकते हैं?
<a>
<p>
<button>
<input>
<output>
<select>
इनमें से कौनसे इनपुट डिवाइस फ़ोकस सेट कर सकते हैं?