हे आप सभी अद्भुत डेवलपर्स! इस पोस्ट में, मैं आपको सिमेंटिक HTML और एक अद्भुत CSS छद्म क्लास का उपयोग करके एक सरल संपर्क फ़ॉर्म बनाने के बारे में बताने जा रहा हूँ जिसे कहा जाता है :focus-within। :focus-within क्लास फ़ोकस पर बहुत अच्छा नियंत्रण देता है और आपके उपयोगकर्ता को यह बताता है कि यह वही जगह है जहाँ वे अनुभव में हैं। इससे पहले कि हम आगे बढ़ें, आइए जानें कि वेब एक्सेसिबिलिटी क्या है।
फॉर्म की पहुंच?
आपने संभवतः हर जगह "पहुँच-योग्यता" शब्द या संख्यात्मक नाम, a11y सुना होगा। इसका मतलब क्या है? यह बहुत सारे उत्तरों वाला एक महान प्रश्न है। जब हम भौतिक दुनिया को देखते हैं, तो पहुंच का मतलब आपके व्यवसाय के बाथरूम में शार्प कंटेनर रखने, यह सुनिश्चित करने जैसी चीजें हैं कि व्हील असिस्टेड लोगों के लिए रैंप हैं, और किसी भी ज़रूरत वाले व्यक्ति के लिए हाथ में बड़े प्रिंट कीबोर्ड जैसे बाह्य उपकरणों का होना।
पहुंच की सीमा यहीं नहीं रुकती है, हमारे पास डिजिटल पहुंच है जिसके बारे में हमें न केवल बाहरी उपयोगकर्ताओं के लिए, बल्कि आंतरिक सहयोगियों के लिए भी जागरूक होने की आवश्यकता है। रंग विपरीत एक कम लटकने वाला फल है कि हमें शुरुआत में ही चुटकी काटने में सक्षम होना चाहिए। हमारे कार्यस्थलों पर, यह सुनिश्चित करते हुए कि यदि किसी कर्मचारी को स्क्रीन रीडर जैसी सहायक तकनीक की आवश्यकता है, तो हमने उसे स्थापित और उपलब्ध कराया है। ऐसी बहुत सी बातें हैं जिन पर ध्यान देने की जरूरत है। यह लेख वेब एक्सेसिबिलिटी को ध्यान में रखते हुए फोकस करेगा WCAG (वेब सामग्री पहुंच दिशानिर्देश) दिमाग में।
एमडीएन (मोज़िला डेवलपर नेटवर्क)
RSI
:focus-withinयदि तत्व या उसके किसी वंशज पर ध्यान केंद्रित किया जाता है तो सीएसएस छद्म वर्ग एक तत्व से मेल खाता है। दूसरे शब्दों में, यह एक ऐसे तत्व का प्रतिनिधित्व करता है जो स्वयं :फोकस छद्म वर्ग से मेल खाता है या उसका एक वंशज है जो :फोकस से मेल खाता है। (इसमें छायादार वृक्षों के वंशज शामिल हैं।)
यह छद्म वर्ग वास्तव में बहुत अच्छा है जब आप इस बात पर जोर देना चाहते हैं कि उपयोगकर्ता वास्तव में तत्व के साथ बातचीत कर रहा है। उदाहरण के लिए, आप पूरे फॉर्म का पृष्ठभूमि रंग बदल सकते हैं। या, यदि फोकस को किसी इनपुट में ले जाया जाता है, तो जब फोकस को उस इनपुट में ले जाया जाता है, तो आप इनपुट तत्व के लेबल को बोल्ड और बड़ा बना सकते हैं। नीचे दिए गए कोड स्निपेट और उदाहरणों में जो हो रहा है, वही फ़ॉर्म को सुलभ बना रहा है। :focus-within यह सिर्फ एक तरीका है जिससे हम अपने लाभ के लिए सीएसएस का उपयोग कर सकते हैं।
फोकस कैसे करें
एक्सेसिबिलिटी और वेब अनुभव के संबंध में फोकस, दृश्य संकेतक है कि पेज पर, यूआई में, या किसी घटक के भीतर कुछ इंटरैक्ट किया जा रहा है। सीएसएस बता सकता है कि कोई इंटरैक्टिव तत्व कब केंद्रित है।
"
:focusसीएसएस छद्म वर्ग एक तत्व (जैसे फॉर्म इनपुट) का प्रतिनिधित्व करता है जिसे फोकस प्राप्त हुआ है। यह आम तौर पर तब ट्रिगर होता है जब उपयोगकर्ता किसी तत्व पर क्लिक या टैप करता है या कीबोर्ड की टैब कुंजी से उसका चयन करता है।
हमेशा सुनिश्चित करें कि फोकस संकेतक या फोकस करने योग्य तत्वों के चारों ओर की रिंग अनुभव के माध्यम से उचित रंग कंट्रास्ट बनाए रखती है।
फोकस इस प्रकार लिखा गया है और यदि आप इसे स्टाइल करना चुनते हैं तो इसे आपकी ब्रांडिंग से मेल खाने के लिए स्टाइल किया जा सकता है।
:focus {
* / INSERT STYLES HERE /*
}आप जो भी करें, उसकी रूपरेखा कभी निर्धारित न करें 0 or none. ऐसा करने से पूरे अनुभव के दौरान सभी के लिए दृश्यमान फोकस संकेतक हट जाएगा। यदि आपको फोकस हटाने की आवश्यकता है, तो आप कर सकते हैं, लेकिन बाद में इसे वापस जोड़ना सुनिश्चित करें। जब आप अपने सीएसएस से फोकस हटाते हैं या रूपरेखा निर्धारित करते हैं 0 or none, यह आपके सभी उपयोगकर्ताओं के लिए फ़ोकस रिंग को हटा देता है। CSS रीसेट का उपयोग करते समय यह बहुत अधिक देखा जाता है। एक सीएसएस रीसेट शैलियों को एक खाली कैनवास पर रीसेट कर देगा। इस तरह आप खाली कैनवास को अपनी इच्छानुसार स्टाइल करने के प्रभारी हैं। यदि आप सीएसएस रीसेट का उपयोग करना चाहते हैं, तो जांचें जोश कोमू का रीसेट.
*नीचे जो दिया गया है वह न करें!
:focus {
outline: 0;
}
:focus {
outline: none;
}
अपने अंदर देखो!
सीएसएस का उपयोग करके फोकस को स्टाइल करने के सबसे अच्छे तरीकों में से एक के बारे में यह लेख है। यदि आपने जाँच नहीं की है :focus-within छद्म वर्ग, निश्चित रूप से उस पर एक नज़र डालें! जब सिमेंटिक मार्कअप और सीएसएस का उपयोग करने की बात आती है तो इसमें बहुत सारे छिपे हुए रत्न होते हैं और यह उनमें से एक है। बहुत सी चीज़ें जिन्हें अनदेखा कर दिया जाता है, वे डिफ़ॉल्ट रूप से पहुंच योग्य होती हैं, उदाहरण के लिए, सिमेंटिक मार्कअप डिफ़ॉल्ट रूप से पहुंच योग्य होती है और इसका उपयोग हर समय div पर किया जाना चाहिए।
<header>
<h1>Semantic Markup</h1>
<nav>
<ul>
<li><a href="/hi/">Home</a></li>
<li><a href="/hi/about">About</a></li>
</ul>
</nav>
</header>
<section><!-- Code goes here --></section>
<section><!-- Code goes here --></section>
<aside><!-- Code goes here --></aside>
<footer><!-- Code goes here --></footer>RSI header, nav, main, section, aside, तथा footer सभी शब्दार्थ तत्व हैं। h1 और ul शब्दार्थात्मक एवं सुगम्य भी हैं।
जब तक कोई कस्टम घटक न हो जिसे बनाने की आवश्यकता हो, तब a div के साथ युग्मित करके उपयोग करना ठीक है ARIA (सुलभ रिच इंटरनेट अनुप्रयोग). हम बाद की पोस्ट में ARIA के बारे में गहराई से जानकारी दे सकते हैं। अभी के लिए आइए ध्यान केंद्रित करें...देखें कि मैंने वहां क्या किया...इस सीएसएस छद्म वर्ग पर।
RSI :focus-within छद्म वर्ग आपको एक तत्व का चयन करने की अनुमति देता है जब इसमें शामिल किसी भी अवरोही तत्व पर फोकस होता है।
:focus-within कार्रवाई में!
एचटीएमएल
<form>
<div>
<label for="firstName">First Name</label><input id="firstName" type="text">
</div>
<div>
<label for="lastName">Last Name</label><input id="lastName" type="text">
</div>
<div>
<label for="phone">Phone Number</label><input id="phone" type="text">
</div>
<div>
<label for="message">Message</label><textarea id="message"></textarea>
</div>
</form>सीएसएस
form:focus-within {
background: #ff7300;
color: black;
padding: 10px;
}उपरोक्त उदाहरण कोड नारंगी रंग का पृष्ठभूमि रंग जोड़ देगा, कुछ पैडिंग जोड़ देगा, और लेबल का रंग बदलकर काला कर देगा।
अंतिम उत्पाद नीचे जैसा कुछ दिखता है। बेशक स्टाइल बदलने की संभावनाएं अनंत हैं, लेकिन यह आपको वेब को सभी के लिए अधिक सुलभ बनाने के लिए एक अच्छे रास्ते पर ले जाना चाहिए!
उपयोग के लिए एक और उपयोग का मामला :focus-within लेबल को बोल्ड, एक अलग रंग में बदल दिया जाएगा, या कम दृष्टि वाले उपयोगकर्ताओं के लिए उन्हें बड़ा कर दिया जाएगा। उसके लिए उदाहरण कोड नीचे जैसा कुछ दिखाई देगा।
एचटीएमएल
<form>
<h1>:focus-within part 2!</h1>
<label for="firstName">First Name: <input name="firstName" type="text" /></label>
<label for="lastName">Last Name: <input name="lastName" type="text" /></label>
<label for="phone">Phone number: <input type="tel" id="phone" /></label>
<label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>
सीएसएस
label {
display: block;
margin-right: 10px;
padding-bottom: 15px;
}
label:focus-within {
font-weight: bold;
color: red;
font-size: 1.6em;
}
:focus-within के अनुसार, इसमें संपूर्ण ब्राउज़र समर्थन भी है क्या में उपयोग कर सकता हूँ.
निष्कर्ष
सॉफ़्टवेयर शिपिंग करते समय अद्भुत, सुलभ उपयोगकर्ता अनुभव बनाना हमेशा सर्वोच्च प्राथमिकता होनी चाहिए, न केवल बाहरी रूप से बल्कि आंतरिक रूप से भी। हम डेवलपर्स के रूप में, वरिष्ठ नेतृत्व तक सभी तरह से दूसरों के सामने आने वाली चुनौतियों से अवगत होने की जरूरत है और हम वेब प्लेटफॉर्म को एक बेहतर जगह बनाने के लिए उसके राजदूत कैसे बन सकते हैं।
समावेशी स्थान बनाने के लिए सिमेंटिक मार्कअप और सीएसएस जैसी तकनीक का उपयोग करना वेब को एक बेहतर स्थान बनाने में एक महत्वपूर्ण हिस्सा है, आइए आगे बढ़ना और जीवन बदलना जारी रखें।
यहां सीएसएस-ट्रिक्स पर एक और बेहतरीन संसाधन देखें :फोकस-भीतर का उपयोग करना.
- एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
- प्लेटोडेटा.नेटवर्क वर्टिकल जेनरेटिव एआई। स्वयं को शक्तिवान बनाएं। यहां पहुंचें।
- प्लेटोआईस्ट्रीम। Web3 इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
- प्लेटोईएसजी. कार्बन, क्लीनटेक, ऊर्जा, पर्यावरण, सौर, कचरा प्रबंधन। यहां पहुंचें।
- प्लेटोहेल्थ। बायोटेक और क्लिनिकल परीक्षण इंटेलिजेंस। यहां पहुंचें।
- स्रोत: https://css-tricks.com/accessible-forms-with-pseudo-classes/
