फ़ोकस इंडिकेटर को अक्सर "फ़ोकस रिंग" से दिखाया जाता है. इससे आपके पेज पर फ़ोकस किए गए एलिमेंट की पहचान होती है. जो लोग माउस का इस्तेमाल नहीं कर सकते या नहीं करना चाहते उनके लिए, यह इंडिकेटर बहुत ज़रूरी है. ऐसा इसलिए, क्योंकि यह माउस-पॉइंटर की तरह काम करता है.
अगर ब्राउज़र का डिफ़ॉल्ट फ़ोकस इंडिकेटर, आपके डिज़ाइन से मेल नहीं खाता है, तो सीएसएस का इस्तेमाल करके इसे फिर से स्टाइल किया जा सकता है. अपने उपयोगकर्ताओं को ध्यान में रखें.
फ़ोकस इंडिकेटर को हमेशा दिखाने के लिए, :focus का इस्तेमाल करें
:focus
स्यूडो-क्लास, फ़ोकस में मौजूद एलिमेंट पर लागू होती है. भले ही, इनपुट का तरीका
या इस्तेमाल किया जा रहा डिवाइस (जैसे कि माउस, कीबोर्ड या स्टाइलस) कोई भी हो.
उदाहरण के लिए, यहां दिए गए <div> में एक tabindex है, जिसकी वजह से इस पर फ़ोकस किया जा सकता है. साथ ही, इसकी :focus स्थिति के लिए कस्टम स्टाइल का इस्तेमाल किया गया है:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
चाहे कोई भी डिवाइस इस्तेमाल किया जाए, फ़ोकस में होने पर <div> एक जैसा दिखता है.
माफ़ करें, ब्राउज़र फ़ोकस को लागू करने के तरीके में एक जैसा व्यवहार नहीं करते हैं. किसी एलिमेंट को फ़ोकस मिलता है या नहीं, यह ब्राउज़र और ऑपरेटिंग सिस्टम पर निर्भर कर सकता है.
उदाहरण के लिए, इस <button> में इसकी :focus स्थिति के लिए कस्टम सीएसएस है.
button:focus {
outline: 4px dashed orange;
}
macOS पर Chrome में माउस से <button> पर क्लिक करने पर, आपको इसकी कस्टम फ़ोकस स्टाइल दिखनी चाहिए. हालांकि, macOS पर Safari में <button> पर क्लिक करने पर, आपको कस्टम फ़ोकस स्टाइल नहीं दिखेगी. ऐसा इसलिए है, क्योंकि Safari में किसी एलिमेंट पर क्लिक करने पर, वह फ़ोकस नहीं होता.
फ़ोकस का व्यवहार एक जैसा नहीं है. अलग-अलग डिवाइसों पर और अलग-अलग इनपुट के साथ अपने पेज की जांच करें. इससे यह पक्का किया जा सकेगा कि फ़ोकस स्टाइल, आपके उपयोगकर्ताओं को पसंद आ रही हैं.
फ़ोकस इंडिकेटर को चुनिंदा तौर पर दिखाने के लिए, :focus-visible का इस्तेमाल करना
जब किसी एलिमेंट पर फ़ोकस किया जाता है और ब्राउज़र (अनुभव के आधार पर) यह तय करता है कि फ़ोकस इंडिकेटर दिखाना उपयोगकर्ता के लिए फ़ायदेमंद होगा, तब :focus-visible
स्यूडो-क्लास लागू होती है. खास तौर पर, अगर उपयोगकर्ता ने हाल ही में कीबोर्ड से इंटरैक्ट किया है और कीबोर्ड दबाने के दौरान, मेटा, ALT, OPTION या CONTROL बटन को नहीं दबाया गया है, तो :focus-visible मैच करेगा.
यहां दिए गए उदाहरण में मौजूद बटन, चुनिंदा तौर पर फ़ोकस इंडिकेटर दिखाता है. अगर क्लिक करने के लिए माउस का इस्तेमाल किया जाता है, तो नतीजे अलग होते हैं. वहीं, अगर टैब करने के लिए पहले कीबोर्ड का इस्तेमाल किया जाता है, तो नतीजे अलग होते हैं.
button:focus-visible {
outline: 4px dashed orange;
}
फ़ोकस किए गए एलिमेंट के पैरंट को स्टाइल करने के लिए :focus-within का इस्तेमाल करना
:focus-within स्यूडो-क्लास को किसी एलिमेंट पर तब लागू किया जाता है, जब एलिमेंट को फ़ोकस मिलता है या जब किसी चाइल्ड एलिमेंट को फ़ोकस मिलता है. इसका इस्तेमाल, पेज के किसी हिस्से को हाइलाइट करने के लिए किया जा सकता है, ताकि उपयोगकर्ता का ध्यान उस हिस्से पर जाए.
उदाहरण के लिए, फ़ॉर्म को तब भी फ़ोकस मिलता है, जब फ़ॉर्म को चुना जाता है. साथ ही, तब भी फ़ोकस मिलता है, जब उसके किसी रेडियो बटन को चुना जाता है.
form:focus-within {
background: #ffecb3;
}
फ़ोकस इंडिकेटर कब दिखाना है
खुद से यह सवाल पूछें, "अगर आपने मोबाइल डिवाइस का इस्तेमाल करते समय इस कंट्रोल पर क्लिक किया, तो क्या आपको कीबोर्ड दिखने की उम्मीद होगी?"
- अगर हां: कंट्रोल में हमेशा फ़ोकस इंडिकेटर दिखना चाहिए. भले ही, इनपुट डिवाइस कोई भी हो. उदाहरण के लिए, यह बात
<input type="text">एलिमेंट पर लगभग हमेशा लागू होती है. उपयोगकर्ता को कीबोर्ड की मदद से एलिमेंट में इनपुट भेजना होगा. इससे कोई फ़र्क़ नहीं पड़ता कि इनपुट एलिमेंट फ़ोकस में कैसे आता है. - अगर नहीं: कंट्रोल, फ़ोकस इंडिकेटर को चुनिंदा तौर पर दिखा सकता है. उदाहरण के लिए, जब कोई उपयोगकर्ता माउस या टचस्क्रीन से
<button>पर क्लिक करता है, तो कार्रवाई पूरी हो जाती है. फ़ोकस इंडिकेटर की ज़रूरत नहीं हो सकती. हालांकि, अगर उपयोगकर्ता कीबोर्ड से नेविगेट कर रहा है, तो फ़ोकस इंडिकेटर दिखाना फ़ायदेमंद होता है. इससे उपयोगकर्ता यह तय कर पाता है कि उसे ENTER या SPACE दबाकर कंट्रोल को चालू करना है या नहीं.
outline: none से बचें
ब्राउज़र यह तय कैसे करते हैं कि फ़ोकस इंडिकेटर कब दिखाना है, यह बहुत
भ्रमित करने वाला है. सीएसएस की मदद से <button> एलिमेंट के दिखने के तरीके में बदलाव करने या किसी एलिमेंट को tabindex देने पर, ब्राउज़र की डिफ़ॉल्ट फ़ोकस रिंग का व्यवहार शुरू हो जाता है.
कभी-कभी डेवलपर, सीएसएस का इस्तेमाल करके फ़ोकस इंडिकेटर हटा देते हैं:
/* Don't do this!!! */
:focus {
outline: none;
}
इस समस्या को ठीक करने का बेहतर तरीका यह है कि :focus और :focus-visible पॉलीफ़िल को एक साथ इस्तेमाल किया जाए. कोड का पहला ब्लॉक दिखाता है कि पॉलीफ़िल कैसे काम करता है. इसके नीचे मौजूद सैंपल ऐप्लिकेशन में, बटन पर फ़ोकस इंडिकेटर बदलने के लिए पॉलीफ़िल का इस्तेमाल करने का उदाहरण दिया गया है.
/*
This hides the focus indicator if the element receives focus with a
mouse, but it still shows up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
...
}