स्टाइल फ़ोकस

Rob Dodson

फ़ोकस इंडिकेटर (आम तौर पर "फ़ोकस रिंग" से दिखाया जाता है) से पता चलता है कि आपके पेज पर फ़िलहाल किस एलिमेंट पर फ़ोकस किया गया है. जिन उपयोगकर्ताओं के पास माउस का इस्तेमाल करने की सुविधा नहीं है उनके लिए यह इंडिकेटर बहुत ज़रूरी है. इसकी मदद से, वे माउस-पॉइंटर की तरह काम कर सकते हैं.

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

फ़ोकस इंडिकेटर को हमेशा दिखाने के लिए, :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 पॉलीफ़िल का इस्तेमाल किया जाए. नीचे दिए गए कोड के पहले ब्लॉक में, polyfill के काम करने का तरीका बताया गया है. इसके नीचे दिए गए सैंपल ऐप्लिकेशन में, किसी बटन पर फ़ोकस इंडिकेटर बदलने के लिए, polyfill का इस्तेमाल करने का उदाहरण दिया गया है.

/*
  This will hide the focus indicator if the element receives focus via the
  mouse, but it will still show 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 {
  …
}