फॉर्म एक्सेसिबिलिटी पर हम जो छोटी सी श्रृंखला बना रहे हैं उसमें यह दूसरी पोस्ट होगी। यदि आप पहली पोस्ट से चूक गए हैं, तो देखें छद्म वर्गों के साथ सुलभ प्रपत्र. इस पोस्ट में हम :focus-visible और इसे अपनी वेब साइटों में कैसे उपयोग करें, इस पर गौर करेंगे!

फोकस टचप्वाइंट

इससे पहले कि हम आगे बढ़ें :focus-visibleआइए फिर से देखें कि कैसे :focus आपके सीएसएस में काम करता है। फोकस दृश्य संकेतक है कि किसी तत्व के साथ कीबोर्ड, माउस, ट्रैकपैड या सहायक तकनीक के माध्यम से इंटरैक्ट किया जा रहा है। कुछ तत्व स्वाभाविक रूप से इंटरैक्टिव होते हैं, जैसे लिंक, बटन और फॉर्म तत्व। हम यह सुनिश्चित करना चाहते हैं कि हमारे उपयोगकर्ताओं को पता हो कि वे कहां हैं और वे क्या बातचीत कर रहे हैं।

याद रखें कि अपने सीएसएस में ऐसा न करें!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

जब आप फोकस हटाते हैं, तो आप इसे हटा देते हैं सब लोग! हम यह सुनिश्चित करना चाहते हैं कि हम फोकस बरकरार रखें।

यदि किसी भी कारण से आपको फोकस हटाने की आवश्यकता है, तो सुनिश्चित करें कि फ़ॉलबैक भी हो :focus आपके उपयोगकर्ताओं के लिए शैलियाँ। वह फ़ॉलबैक आपके ब्रांडिंग रंगों से मेल खा सकता है, लेकिन सुनिश्चित करें कि वे रंग भी पहुंच योग्य हों। यदि मार्केटिंग, डिज़ाइन, या ब्रांडिंग को डिफ़ॉल्ट फ़ोकस रिंग शैलियाँ पसंद नहीं हैं, तो अब बातचीत शुरू करने और इसे वापस जोड़ने के सर्वोत्तम तरीके पर उनके साथ सहयोग करने का समय है।

एचएमबी क्या है? focus-visible?

छद्म वर्ग, :focus-visible, बिल्कुल हमारे डिफ़ॉल्ट की तरह है :focus छद्म वर्ग. यह उपयोगकर्ता को एक संकेतक देता है कि पेज पर कुछ फोकस किया जा रहा है। जिस तरह से आप लिखते हैं :focus-visible काटा और सुखाया जाता है:

:focus-visible {
  /* ... */
}

उपयोग करते समय :focus-visible किसी विशिष्ट तत्व के साथ, वाक्यविन्यास कुछ इस तरह दिखता है:

.your-element:focus-visible {
  /*...*/
}

उपयोग करने के बारे में बड़ी बात :focus-visible क्या आप अपने तत्व को अलग दिखा सकते हैं, उज्ज्वल और बोल्ड! यदि तत्व पर क्लिक/टैप किया गया है तो इसके प्रदर्शित होने के बारे में चिंता करने की कोई आवश्यकता नहीं है। यदि आप क्लास को लागू नहीं करना चुनते हैं, तो डिफ़ॉल्ट उपयोगकर्ता एजेंट फोकस रिंग होगी जो कुछ लोगों के लिए अवांछनीय है।

की पृष्ठभूमि की कहानी focus-visible

इससे पहले हमारे पास था :focus-visible, उपयोगकर्ता एजेंट स्टाइल लागू होगा :focus पृष्ठ पर अधिकांश तत्वों के लिए; बटन, लिंक इत्यादि। यह फोकस करने योग्य तत्व पर एक रूपरेखा या "फोकस रिंग" लागू करेगा। इसे बदसूरत माना गया, अधिकांश को ब्राउज़र द्वारा प्रदान की गई डिफ़ॉल्ट फ़ोकस रिंग पसंद नहीं आई। फ़ोकस रिंग देखने में प्रतिकूल होने के परिणामस्वरूप, अधिकांश लेखकों ने इसे बिना किसी फ़ॉलबैक के हटा दिया। याद रखें, जब आप हटा दें :focus, यह प्रयोज्यता को कम कर देता है और कीबोर्ड उपयोगकर्ताओं के लिए अनुभव को दुर्गम बना देता है।

वेब की वर्तमान स्थिति में, ब्राउज़र अब फ़ोकस होने पर विभिन्न तत्वों के आसपास फ़ोकस को स्पष्ट रूप से इंगित नहीं करता है। इसके बजाय ब्राउज़र यह निर्धारित करने के लिए अलग-अलग अनुमानों का उपयोग करता है कि यह उपयोगकर्ता को कब मदद करेगा, बदले में फोकस रिंग प्रदान करेगा। के अनुसार खान अकादमी, एक अनुमान है, "एक तकनीक जो अच्छे विकल्प खोजने के लिए एल्गोरिदम का मार्गदर्शन करती है।"

इसका मतलब यह है कि ब्राउज़र यह पता लगा सकता है कि उपयोगकर्ता कीबोर्ड, माउस या ट्रैकपैड से अनुभव के साथ इंटरैक्ट कर रहा है या नहीं और उस इनपुट प्रकार के आधार पर, यह फोकस रिंग जोड़ता या हटाता है। इस पोस्ट का उदाहरण इनपुट इंटरैक्शन पर प्रकाश डालता है।

के शुरुआती दिनों में :focus-visible हम एक का उपयोग कर रहे थे पॉलीफ़िल ऐलिस बॉक्सहॉल और ब्रायन कार्डेल द्वारा बनाई गई फोकस रिंग को संभालने के लिए, मोज़िला भी अपना स्वयं का छद्म वर्ग लेकर आया, :moz-focusring, आधिकारिक विनिर्देश से पहले। यदि आप फ़ोकस-रिंग के शुरुआती दिनों के बारे में अधिक जानना चाहते हैं, तो देखें A11y कास्ट्स रोब डोडसन के साथ.

फोकस महत्व

ऐसे कई कारण हैं जिनकी वजह से आपके आवेदन में फोकस महत्वपूर्ण है। एक के लिए, जैसा कि मैंने ऊपर कहा, वेब के राजदूत के रूप में हमें यह सुनिश्चित करना होगा कि हम सर्वोत्तम, सुलभ अनुभव प्रदान कर सकें। हम नहीं चाहते कि हमारा कोई भी उपयोगकर्ता अनुभव के माध्यम से नेविगेशन के दौरान यह अनुमान लगाए कि वे कहाँ हैं।

एक उदाहरण जो हमेशा दिमाग में आता है दो अंधे भाइयों की वेबसाइट. यदि आप वेबसाइट पर जाते हैं और नीचे बाएं कोने में बंद आंख पर क्लिक/टैप करते हैं (यह मोबाइल पर काम करता है), तो आप आंख खुली देखेंगे और एक सिमुलेशन शुरू होता है। ब्रैडफोर्ड और ब्रायन मैनिंग दोनों भाइयों को कम उम्र में ही स्टारगार्ड रोग का पता चल गया था। स्टारगार्ड की बीमारी आंख के धब्बेदार अध:पतन का एक रूप है। समय के साथ दोनों भाई पूर्णतः अंधे हो जायेंगे। साइट पर जाएँ और आँख पर क्लिक करके देखें कि वे कैसे देखते हैं।

यदि आप उनके स्थान पर थे और आपको एक पृष्ठ के माध्यम से नेविगेट करना था, तो आप यह सुनिश्चित करना चाहेंगे कि आपको ठीक-ठीक पता हो कि आप पूरे अनुभव के दौरान कहाँ थे। एक फोकस रिंग आपको वह शक्ति देती है।

डेमो

नीचे दिया गया डेमो दिखाता है कि कैसे :focus-visible आपके सीएसएस में जोड़े जाने पर काम करता है। वीडियो का पहला भाग माउस के साथ नेविगेट करने के अनुभव को दर्शाता है और दूसरा भाग केवल मेरे कीबोर्ड के साथ नेविगेट करते हुए दिखाता है। यह दिखाने के लिए कि मैंने अपने माउस का उपयोग छोड़कर अपने कीबोर्ड का उपयोग करना शुरू कर दिया है, मैंने खुद को भी रिकॉर्ड किया।

ब्राउज़र मेरे इनपुट (कीबोर्ड/माउस) के आधार पर भविष्यवाणी कर रहा है कि फोकस रिंग के साथ क्या करना है, और फिर उन तत्वों में फोकस रिंग जोड़ रहा है। इस मामले में, जब मैं कीबोर्ड के साथ इस उदाहरण के माध्यम से नेविगेट कर रहा हूं, तो सब कुछ फोकस प्राप्त करता है। माउस का उपयोग करते समय, केवल इनपुट पर फोकस होता है, बटन पर नहीं। यदि आप हटा दें :focus-visible, ब्राउज़र डिफ़ॉल्ट फ़ोकस रिंग लागू करेगा।

नीचे दिया गया कोड लागू हो रहा है :focus-visible ध्यान केंद्रित करने योग्य तत्वों के लिए.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

यदि आप निर्दिष्ट करना चाहते हैं label या प्राप्त करने के लिए बटन :focus-visible बस कक्षा को आगे बढ़ाएँ input or button क्रमशः.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

सहायता

यदि ब्राउज़र समर्थन नहीं करता है :focus-visible आप बातचीत को संभालने के लिए अपनी जगह पर वापस आ सकते हैं। नीचे दिया गया कोड से है एमडीएन खेल का मैदान। आप उपयोग कर सकते हैं @ मुख्य नियम पर या "फ़ीचर क्वेरी" समर्थन की जाँच करने के लिए. एक बात ध्यान में रखें, नियम को कोड के शीर्ष पर रखा जाना चाहिए या नियम के किसी अन्य समूह के अंदर नेस्ट किया जाना चाहिए।

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

आगे अभिगम्यता संबंधी चिंताएँ

अपना अनुभव बनाते समय ध्यान में रखने योग्य सुगम्यता संबंधी चिंताएँ:

• सुनिश्चित करें कि आपने अपने फोकस संकेतक के लिए जो रंग चुने हैं, वे अभी भी दस्तावेज में दर्ज जानकारी के अनुसार पहुंच योग्य हैं WCAG 2.2 गैर-पाठ कंट्रास्ट (स्तर AA)
• संज्ञानात्मक अधिभार उपयोगकर्ता को परेशानी का कारण बन सकता है। विभिन्न इंटरैक्टिव तत्वों पर शैलियों को सुसंगत रखना सुनिश्चित करें

ब्राउज़र का समर्थन

लिंक

• एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
• प्लेटोडेटा.नेटवर्क वर्टिकल जेनरेटिव एआई। स्वयं को शक्तिवान बनाएं। यहां पहुंचें।
• प्लेटोआईस्ट्रीम। Web3 इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
• प्लेटोईएसजी. कार्बन, क्लीनटेक, ऊर्जा, पर्यावरण, सौर, कचरा प्रबंधन। यहां पहुंचें।
• प्लेटोहेल्थ। बायोटेक और क्लिनिकल परीक्षण इंटेलिजेंस। यहां पहुंचें।
• स्रोत: https://css-tricks.com/managing-user-focus-with-focus-visible/