स्टाइल फ़ोकस

Rob Dodson

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

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

फ़ोकस इंडिकेटर दिखाने के लिए, :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 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 {
  …
}