यदि आपने एक्सेसिबिलिटी क्या है और यह क्यों महत्वपूर्ण है? पाठ देखा है, तो आप जानते हैं कि डिजिटल एक्सेसिबिलिटी एक व्यापक अवधारणा है; जिसका मुख्य उद्देश्य यह सुनिश्चित करना है कि अधिक से अधिक लोग वेब का उपयोग कर सकें।
इसके कानूनी और व्यावसायिक पहलू तो हैं ही, लेकिन सबसे महत्वपूर्ण बात यह है कि एक्सेसिबिलिटी दिशानिर्देशों का पालन करने से सभी के लिए ब्राउज़िंग अनुभव बेहतर हो जाता है।
एक्सेसिबल थीम, प्लगइन या साइट बनाने का सबसे आसान तरीका है कि शुरुआत से ही इस बारे में सोचा जाए। योजना बनाते समय ही इसे शामिल करें और सहकर्मियों (और क्लाइंट्स) को भी इसके बारे में जागरूक करें। इससे आप न केवल शुरुआत में ही गलतियों को पकड़ पाएँगे, बल्कि कई गलतियों से पहले से ही बच भी पाएँगे।
इस पाठ में, आप एक्सेसिबल HTML की मूल बातें सीखेंगे और यह जानेंगे कि उन्हें अपने WordPress थीम में कैसे लागू करना है।
मूल बातें
HTML जितना शक्तिशाली है, उतना ही एक्सेसिबल भी है।
इसे स्वयं आज़माएँ: अपना कोड एडिटर खोलें और एक वैध HTML पेज बनाएँ—जिसमें लैंडमार्क, शीर्षक, टेक्स्ट, बटन, लिंक, फ़ॉर्म आदि से सही ढंग से मार्कअप किया गया हो।
आप चाहें तो नीचे दिए गए कोड का उपयोग कर सकते हैं।
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>मेरी वेबसाइट</title>\n</head>\n<body>\n\n<header>\n <h1>मेरी वेबसाइट पर आपका स्वागत है</h1>\n <nav>\n <ul>\n <li><a href="#home">होम</a>\n <li><a href="#about">परिचय</a>\n <li><a href="#services">सेवाएँ</a>\n <li><a href="#contact">संपर्क</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <article id="home">\n <h2>होम</h2>\n <p>यह होम सेक्शन है, जहाँ परिचयात्मक सामग्री मिलेगी।</p>\n <form name="Just a button">\n <button type="button">मुझे क्लिक करें!</button>\n </form>\n </article>\n\n <article id="about">\n <h2>परिचय</h2>\n <p>इस सेक्शन में वेबसाइट या इसके पीछे मौजूद व्यक्ति/कंपनी की जानकारी होती है।</p>\n <p><a href="https://example.com">उनकी पूरी प्रोफ़ाइल देखें</a></p>\n </article>\n\n <article id="services">\n <h2>सेवाएँ</h2>\n <p>प्रदान की जाने वाली सेवाओं का विवरण यहाँ मिलेगा।</p>\n </article>\n\n <article id="contact">\n <h2>संपर्क</h2>\n <form action="#" method="post" name="contact" autocomplete="on">\n <fieldset>\n <legend>आइए बात करें</legend>\n <div><label for="name">नाम:</label></div>\n <div><input type="text" id="name"></div>\n <div><label for="email">ईमेल:</label></div>\n <div><input type="email" id="email"></div>\n <div><label for="message">संदेश:</label></div>\n <div><textarea id="message" rows="4" cols="50" spellcheck="true"></textarea></div>\n <div><input type="submit" value="जमा करें"></div>\n </fieldset>\n </form>\n </article>\n</main>\n\n<footer>\n <p>© 2024 मेरी वेबसाइट</p>\n</footer>\n\n</body>\n</html>\nअब कोड को Web Accessibility Checker जैसे किसी ऑनलाइन टूल से जाँचें और देखें कि कोई एक्सेसिबिलिटी समस्या दिखाई नहीं दे रही है।
समस्याएँ आमतौर पर तब शुरू होती हैं जब आप इसमें स्टाइल, स्क्रिप्ट या मीडिया एसेट जोड़ते हैं। एक आधुनिक WordPress थीम डेवलपर के रूप में आप मुख्य रूप से इन्हीं तकनीकों के साथ काम करेंगे—जैसे React-आधारित ब्लॉक, PHP से बनाए गए पैटर्न और theme.json से जनरेट होने वाली CSS।
मुख्य बात यह है कि कोडिंग और डिज़ाइन करते समय एक्सेसिबिलिटी के प्रति जागरूक रहें।
आइए कुछ तकनीकों और सर्वोत्तम प्रथाओं को देखें, जिनका डेवलपर और डिज़ाइनर कस्टम ब्लॉक, टेम्पलेट और पैटर्न बनाते समय पालन कर सकते हैं।
सिमेंटिक HTML
हर चीज़ को <div> एलिमेंट से लपेटने के बजाय HTML के सिमेंटिक या अर्थपूर्ण एलिमेंट का उपयोग करें।
इससे आप अनावश्यक रूप से जटिल कोड या “पहिए को फिर से आविष्कार करने” जैसी परेशानियों से बचेंगे।
लैंडमार्क
लैंडमार्क पेज की संरचना या ढाँचे को परिभाषित करने का एक तरीका हैं। ये स्क्रीन रीडर को सामग्री में अधिक आसानी से नेविगेट करने में सहायता करते हैं।
उदाहरण के लिए, केवल कुछ <div> और उनकी क्लास का उपयोग करने के बजाय:
<div class="header">\n <h1>मेरी वेबसाइट पर आपका स्वागत है</h1>\n</div>\n\n\n<div class="nav">\n <ul>\n <li><a href="#home">होम</a></li>\n <li><a href="#about">परिचय</a></li>\n <li><a href="#services">सेवाएँ</a></li>\n <li><a href="#contact">संपर्क</a></li>\n </ul>\n</div>आप संबंधित सेक्शन के लिए लैंडमार्क का उपयोग कर सकते हैं।
<header>\n <h1>मेरी वेबसाइट पर आपका स्वागत है</h1>\n</header>\n\n\n<nav>\n <ul>\n <li><a href="#home">होम</a></li>\n <li><a href="#about">परिचय</a></li>\n <li><a href="#services">सेवाएँ</a></li>\n <li><a href="#contact">संपर्क</a></li>\n </ul>\n</nav>यदि आप Site Editor के माध्यम से थीम डिज़ाइन या बना रहे हैं, तो वहाँ भी लैंडमार्क सेट करना संभव है।
Group, Row और Stack ब्लॉक को सामग्री सेक्शनिंग एलिमेंट के रूप में परिभाषित करने के लिए, ब्लॉक चुनें, Settings खोलें और Advanced सेक्शन को विस्तृत करें।
नीचे स्क्रॉल करें और ब्लॉक के कार्य और स्थान के अनुसार HTML ELEMENT के रूप में header, main, section, article, aside या footer चुनें।
शीर्षक
टेम्पलेट में शीर्षक जोड़ते समय हमेशा शीर्षकों का सही क्रम में उपयोग करें, H2 से शुरू करके क्रमशः H6 तक।
Site Editor में, Document Overview > Outline पर क्लिक करके जाँच लें कि कोई स्तर छूटा तो नहीं है और सब कुछ सही है या नहीं।
बटन बनाम लिंक
उपयोगकर्ता की कार्रवाई डिज़ाइन करते समय बटन और लिंक के उपयोग के संबंध में निम्नलिखित बातों पर विचार करें:
- यदि आप चाहते हैं कि उपयोगकर्ता कोई कार्रवाई पूरी करें, तो button element का उपयोग करें।
- यदि आप चाहते हैं कि वे किसी दूसरे पेज पर जाएँ, तो anchor element (<a>) का उपयोग करें।
- यदि किसी लिंक को बटन जैसा दिखाना हो, जैसे लैंडिंग पेज का कॉल-टू-एक्शन, तो उसे CSS से स्टाइल करें।
फ़ॉर्म
अपने थीम में कोई फ़ॉर्म डिज़ाइन करते समय, नीचे दिए गए दिशानिर्देशों का पालन करें:
फ़ॉर्म को हमेशा form element के भीतर रखें।
इनपुट फ़ील्ड में हमेशा सही type और उससे मेल खाने वाले एट्रिब्यूट सेट करें। उदाहरण के लिए, यदि इनपुट का type tel के रूप में परिभाषित करते हैं, तो मोबाइल डिवाइस पर संख्यात्मक कीपैड दिखाई देगा।
<input type="tel" name="phone" id="phone" required>इनपुट फ़ील्ड किसलिए है, यह बताने के लिए केवल placeholder टेक्स्ट पर निर्भर न रहें; हमेशा एक्सेसिबल लेबल का उपयोग करें।
किसी भी सर्च फ़ॉर्म के लिए search element का उपयोग करें।
लॉगिन फ़ॉर्म डिज़ाइन करते समय, autocomplete एट्रिब्यूट का उपयोग करके पासवर्ड मैनेजर को फ़ॉर्म भरने में सहायता कर सकते हैं।
<input type="password" autocomplete="current-password">डिफ़ॉल्ट रूप से, अधिकांश ब्राउज़र फ़ोकस किए गए एलिमेंट पर फ़ोकस रिंग दिखाते हैं।
यदि आप इस फ़ोकस रिंग के प्रदर्शन को बदलना चाहते हैं, तो :focus-visible pseudo-class का उपयोग करें, और फ़ोकस रिंग को पूरी तरह न हटाएँ।
रंग
पर्याप्त कॉन्ट्रास्ट वाला एक्सेसिबल रंग पैलेट बनाएँ।
टेम्पलेट एडिट करते समय, यदि आप ऐसे टेक्स्ट और बैकग्राउंड रंगों का उपयोग करते हैं जिनमें पर्याप्त कॉन्ट्रास्ट नहीं है, तो WordPress आपको चेतावनी देगा।
जानकारी केवल रंग के माध्यम से न दें। उदाहरण के लिए, लिंक को केवल रंग से चिह्नित न करें और फ़ोकस स्टेट को भी उसी तरह परिभाषित करें। संदेह होने पर, डिफ़ॉल्ट HTML लिंक और फ़ोकस स्टाइल देखें और उनका पालन करें।
टाइपोग्राफ़ी
फ़ॉन्ट आकार सेट करते समय px के उपयोग से बचें और rem जैसी relative units का उपयोग करें।
सामग्री की चौड़ाई 50 से 70 कैरेक्टर के बीच सीमित रखें; इसके लिए character या ch unit बिल्कुल उपयुक्त है।
फ़ॉन्ट आकार के अनुसार पर्याप्त line spacing का उपयोग करें।
उपयोगकर्ता की पसंद को प्राथमिकता दें
रेस्पॉन्सिव डिज़ाइन का मुख्य आधार media queries हैं, जो उपयोगकर्ता अनुभव को बेहतर बनाने में सहायता करती हैं।
कुछ media query जैसे prefers-color-scheme या prefers-reduced-motion सीधे एक्सेसिबिलिटी से जुड़े हैं, जबकि pointer, hover या scripting जैसी query का उपयोग करके डिवाइस के अनुसार कंपोनेंट के व्यवहार को समायोजित किया जा सकता है।
ARIA वर्कअराउंड
ARIA, Accessible Rich Internet Applications framework का संक्षिप्त रूप है और इसे अक्सर HTML सामग्री को स्क्रीन रीडर के लिए अधिक एक्सेसिबल बनाने के त्वरित तरीके के रूप में बताया जाता है।
हालाँकि, ARIA के उपयोग का सबसे महत्वपूर्ण नियम है कि इसका उपयोग केवल तभी करें जब वास्तव में आवश्यक हो। आदर्श रूप से, स्क्रीन रीडर को सामग्री का अर्थ समझाने के लिए हमेशा HTML की अंतर्निहित सुविधाओं का उपयोग करना चाहिए।
गलत तरीके से उपयोग किए गए ARIA एट्रिब्यूट एक्सेसिबिलिटी को कम कर देते हैं, इसलिए जब तक आपके पास HTML पर नियंत्रण न हो या आपको डायनेमिक सामग्री संभालने की आवश्यकता न हो, तब तक इनसे बचें।
अधिक जानकारी के लिए, MDN का WAI-ARIA basics देखें।
सारांश और आगे पढ़ने के लिए
एक्सेसिबिलिटी एक सतत प्रक्रिया है। एक छोटा-सा सुधार भी आपकी साइट के आगंतुकों के लिए बड़ा अंतर पैदा कर सकता है और इसका कोई नकारात्मक प्रभाव नहीं होता। इससे उपयोगकर्ता अनुभव कभी खराब नहीं होगा।
अधिक जानने के लिए, W3C Web Accessibility Initiative (WAI) Tutorials देखें।