JavaScript

हम जो भी बनाते हैं उसमें JavaScript की अहम भूमिका होती है. जैसे, छोटे डाइनैमिक कॉम्पोनेंट से लेकर, React या Angular जैसे JavaScript फ़्रेमवर्क पर चलने वाले पूरे प्रॉडक्ट तक.

JavaScript के इस इस्तेमाल (या बहुत ज़्यादा इस्तेमाल) से कई खतरनाक रुझान सामने आए हैं, जैसे कि ज़्यादा कोड की वजह से लोड होने में ज़्यादा समय लगना, नॉन-सिमेंटिक एचटीएमएल एलिमेंट का इस्तेमाल करना, और JavaScript के ज़रिए एचटीएमएल और सीएसएस का इंजेक्शन लेना. साथ ही, आपको शायद यह पता न हो कि इनमें से हर सुविधा में सुलभता सुविधाएं कैसे शामिल की जाती हैं.

JavaScript का आपकी साइट की सुलभता पर काफ़ी असर पड़ सकता है. इस मॉड्यूल में, हम JavaScript की मदद से बेहतर बनाई गई सुलभता के कुछ सामान्य पैटर्न शेयर करेंगे. साथ ही, JavaScript फ़्रेमवर्क का इस्तेमाल करने से आने वाली सुलभता से जुड़ी समस्याओं को हल करने के तरीके भी बताएंगे.

इवेंट ट्रिगर करना

JavaScript इवेंट की मदद से, उपयोगकर्ता वेब कॉन्टेंट के साथ इंटरैक्ट कर सकते हैं और कोई खास कार्रवाई कर सकते हैं. कई लोग वेब से इंटरैक्ट करने के लिए कीबोर्ड की सहायता पर निर्भर रहते हैं. जैसे, स्क्रीन रीडर इस्तेमाल करने वाले, फ़ाइन मोटर स्किल डिसेबिलिटी वाले लोग, माउस या ट्रैकपैड के बिना. यह ज़रूरी है कि आप अपनी JavaScript कार्रवाइयों में कीबोर्ड की सुविधा जोड़ें, क्योंकि इससे इन सभी उपयोगकर्ताओं पर असर पड़ता है.

आइए, क्लिक इवेंट पर नज़र डालते हैं. अगर onClick() इवेंट का इस्तेमाल, <button> या <a> जैसे सिमेंटिक एचटीएमएल एलिमेंट पर किया जाता है, तो इसमें माउस और कीबोर्ड, दोनों की सुविधाएं शामिल होती हैं. हालांकि, किसी सामान्य <div> जैसे ग़ैर-सेमांटिक एलिमेंट में onClick() इवेंट जोड़ने पर, कीबोर्ड फ़ंक्शन अपने-आप लागू नहीं होता.

यह न करें
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
यह करें
<button onclick="doAction()">Click me!</button>

CodePen पर, इस तुलना की झलक देखें.

अगर किसी ट्रिगर इवेंट के लिए किसी ऐसे एलिमेंट का इस्तेमाल किया जाता है जो सेमैंटिक नहीं है, तो Enter या Space बटन दबाने का पता लगाने के लिए, keydown/keyup इवेंट जोड़ना ज़रूरी है. नॉन-सिमेंटिक एलिमेंट में ट्रिगर इवेंट जोड़ना अक्सर भूला जाता है. माफ़ करें, अगर इसे इस्तेमाल नहीं किया जाता है, तो ऐसा कॉम्पोनेंट बन जाता है जिसे सिर्फ़ माउस से ऐक्सेस किया जा सकता है. सिर्फ़ कीबोर्ड का इस्तेमाल करने वाले उपयोगकर्ताओं के पास, इन ऐक्शन का ऐक्सेस नहीं होता.

पेज शीर्षक

दस्तावेज़ मॉड्यूल में हमने जाना था कि स्क्रीन रीडर का इस्तेमाल करने वाले लोगों के लिए, पेज का टाइटल ज़रूरी है. इससे उपयोगकर्ताओं को यह पता चलता है कि वे किस पेज पर हैं और क्या वे किसी नए पेज पर गए हैं.

अगर JavaScript फ़्रेमवर्क का इस्तेमाल किया जाता है, तो आपको यह तय करना होगा कि पेज के टाइटल को कैसे मैनेज किया जाए. यह खास तौर पर उन एक पेज वाले ऐप्लिकेशन (एसपीए) के लिए अहम है जो किसी एक index.html फ़ाइल से लोड होते हैं. ऐसा इसलिए, क्योंकि ट्रांज़िशन या रूट (पेज में बदलाव) के लिए, पेज को फिर से लोड करने की ज़रूरत नहीं होती. जब भी कोई उपयोगकर्ता किसी एसपीए में नया पेज लोड करता है, तो टाइटल डिफ़ॉल्ट रूप से नहीं बदलेगा.

एसपीए के लिए, document.title की वैल्यू को मैन्युअल रूप से या किसी हेल्पर पैकेज की मदद से जोड़ा जा सकता है. यह वैल्यू, JavaScript फ़्रेमवर्क के हिसाब से अलग-अलग हो सकती है. स्क्रीन रीडर का इस्तेमाल करने वाले व्यक्ति को अपडेट किए गए पेज के टाइटल बताने के लिए आपको थोड़ा और काम करना पड़ सकता है. हालांकि, अच्छी बात यह है कि आपके पास डाइनैमिक कॉन्टेंट जैसे कई विकल्प होते हैं.

लगातार अपडेट होने वाला कॉन्टेंट

JavaScript की सबसे बेहतरीन सुविधाओं में से एक है, पेज के किसी भी एलिमेंट में एचटीएमएल और सीएसएस जोड़ना. डेवलपर, उपयोगकर्ताओं की कार्रवाइयों या व्यवहार के आधार पर डाइनैमिक ऐप्लिकेशन बना सकते हैं.

मान लें कि आपको उपयोगकर्ताओं को आपकी वेबसाइट या ऐप्लिकेशन में साइन इन करने पर मैसेज भेजना है. आपको यह मैसेज सफ़ेद बैकग्राउंड से अलग दिखना चाहिए और यह मैसेज दिखाना चाहिए: "आपने अब साइन इन कर लिया है."

कॉन्टेंट सेट करने के लिए, एलिमेंट innerHTML का इस्तेमाल किया जा सकता है:

document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';

सीएसएस को setAttribute के साथ भी ऐसे ही लागू किया जा सकता है:

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

ताकत बढ़ने के साथ ज़िम्मेदारी भी बढ़ जाती है. माफ़ करें, एचटीएमएल और सीएसएस के JavaScript इंजेक्शन का, लंबे समय से गलत इस्तेमाल होता रहा है. इससे, ऐक्सेस न किया जा सकने वाला कॉन्टेंट बनाया जाता है. गलत इस्तेमाल के कुछ सामान्य उदाहरण यहां दिए गए हैं:

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

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

फ़ोकस मैनेजमेंट

कीबोर्ड फ़ोकस मॉड्यूल में, हमने फ़ोकस ऑर्डर और इंंडिकेटर स्टाइल के बारे में जानकारी दी. फ़ोकस मैनेजमेंट का मतलब है कि फ़ोकस को कब और कहां ट्रैप करना है और कब नहीं करना है.

सिर्फ़ कीबोर्ड से इस्तेमाल करने वाले लोगों के लिए, फ़ोकस मैनेजमेंट की सुविधा ज़रूरी है.

कॉम्पोनेंट लेवल

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

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

यह न करें
यह करें

पेज लेवल

उपयोगकर्ता के एक पेज से दूसरे पेज पर जाते समय भी फ़ोकस बनाए रखना ज़रूरी है. यह बात खास तौर पर एसपीए के लिए सही है, जहां ब्राउज़र रीफ़्रेश नहीं होता और पूरा कॉन्टेंट डाइनैमिक तौर पर बदलता रहता है. जब भी कोई उपयोगकर्ता आपके ऐप्लिकेशन में किसी दूसरे पेज पर जाने के लिए लिंक पर क्लिक करता है, तो फ़ोकस या तो उसी जगह पर रखा जाता है या पूरी तरह से किसी दूसरी जगह पर रखा जाता है.

पेजों के बीच ट्रांज़िशन (या रूटिंग) करते समय, डेवलपमेंट टीम को यह तय करना चाहिए कि पेज लोड होने पर फ़ोकस कहां जाता है.

ऐसा करने के कई तरीके हैं:

  • aria-live सूचना वाले मुख्य कंटेनर पर फ़ोकस करें.
  • मुख्य कॉन्टेंट पर जाने के लिए, फ़ोकस को वापस किसी लिंक पर ले जाएं.
  • फ़ोकस को नए पेज के टॉप-लेवल हेडिंग पर ले जाएं.

आपको किस पर फ़ोकस करना है, यह इस बात पर निर्भर करता है कि आपने किस फ़्रेमवर्क का इस्तेमाल किया है और आपको अपने उपयोगकर्ताओं को कौनसा कॉन्टेंट दिखाना है. यह कॉन्टेक्स्ट या कार्रवाई पर निर्भर हो सकता है.

स्टेट मैनेजमेंट

सुलभता के लिए JavaScript का इस्तेमाल, स्टेटस मैनेजमेंट में भी ज़रूरी होता है. इसके अलावा, जब किसी कॉम्पोनेंट या पेज की मौजूदा विज़ुअल स्टेटस को कम दृष्टि, अंधे या बधिर-अंधे लोगों के लिए सहायक टेक्नोलॉजी के उपयोगकर्ताओं को भेजा जाता है, तब भी JavaScript का इस्तेमाल ज़रूरी होता है.

आम तौर पर, किसी कॉम्पोनेंट या पेज की स्थिति को ARIA एट्रिब्यूट की मदद से मैनेज किया जाता है. इन एट्रिब्यूट के बारे में ARIA और एचटीएमएल मॉड्यूल में बताया गया है. चलिए, सबसे सामान्य तरह के कुछ ARIA एट्रिब्यूट पर नज़र डालते हैं. ये एट्रिब्यूट, एलिमेंट की स्थिति को मैनेज करने में मदद करते हैं.

कॉम्पोनेंट लेवल

आपके पेज का कॉन्टेंट और उपयोगकर्ताओं को किस जानकारी की ज़रूरत है, इसके आधार पर कई ARIA स्टेटस को ध्यान में रखा जा सकता है. उपयोगकर्ता को कॉम्पोनेंट के बारे में जानकारी भेजते समय, ऐसी कई स्थितियां होती हैं.

उदाहरण के लिए, उपयोगकर्ता को यह बताने के लिए कि ड्रॉप-डाउन मेन्यू या सूची को बड़ा किया गया है या छोटा किया गया है, aria-expanded एट्रिब्यूट का इस्तेमाल किया जा सकता है.

इसके अलावा, aria-pressed का इस्तेमाल करके बताया जा सकता है कि किसी बटन को दबाया गया है.

ARIA एट्रिब्यूट लागू करते समय, चुनिंदा एट्रिब्यूट का इस्तेमाल करना ज़रूरी है. उपयोगकर्ता फ़्लो के बारे में सोचें, ताकि यह समझा जा सके कि उपयोगकर्ता को कौनसी अहम जानकारी दी जानी चाहिए.

पेज लेवल

डेवलपर, स्क्रीन पर बदलावों की सूचना देने और सहायक टेक्नोलॉजी (AT) के उपयोगकर्ताओं को सूचना देने के लिए, अक्सर ARIA लाइव रीजन नाम की स्क्रीन पर छिपी हुई जगह का इस्तेमाल करते हैं. इस एरिया को JavaScript के साथ जोड़ा जा सकता है, ताकि उपयोगकर्ताओं को पेज में होने वाले डाइनैमिक बदलावों की सूचना दी जा सके. इसके लिए, पूरे पेज को फिर से लोड करने की ज़रूरत नहीं पड़ती.

अब तक, JavaScript अपनी डाइनैमिक प्रकृति की वजह से, aria-live और चेतावनी वाले इलाकों में कॉन्टेंट का एलान करने में मुश्किल काम करता रहा है. डीओएम में कॉन्टेंट को असिंक्रोनस तरीके से जोड़ने पर, एटी के लिए इलाके को चुनना और उसका एलान करना मुश्किल हो जाता है. कॉन्टेंट को सही तरीके से पढ़ने के लिए, लाइव या सूचना वाला क्षेत्र लोड होने पर डीओएम में होना चाहिए. इसके बाद, टेक्स्ट को डाइनैमिक तौर पर बदला जा सकता है.

अगर JavaScript फ़्रेमवर्क का इस्तेमाल किया जाता है, तो अच्छी बात यह है कि इनमें से ज़्यादातर में "लाइव एनाउसर" पैकेज होता है. यह पैकेज आपके लिए सारा काम करता है और इसे पूरी तरह ऐक्सेस किया जा सकता है. लाइव रीजन बनाने और पिछले सेक्शन में बताई गई समस्याओं को हल करने की ज़रूरत नहीं है.

यहां सामान्य JavaScript फ़्रेमवर्क के लिए कुछ लाइव पैकेज दिए गए हैं:

आधुनिक JavaScript एक बेहतरीन लैंग्वेज है. इसकी मदद से, वेब डेवलपर बेहतरीन वेब ऐप्लिकेशन बना सकते हैं. इसकी वजह से कभी-कभी ज़रूरत से ज़्यादा इंजीनियरिंग और एक्सटेंशन की वजह से ऐसे पैटर्न बन जाते हैं जिन्हें लोग ऐक्सेस नहीं कर पाते. इस मॉड्यूल में दिए गए JavaScript पैटर्न और सुझावों का पालन करके, अपने ऐप्लिकेशन को सभी उपयोगकर्ताओं के लिए ज़्यादा ऐक्सेस करने लायक बनाया जा सकता है.

देखें कि आपको कितना समझ आया है

JavaScript के बारे में अपनी जानकारी को टेस्ट करें

JavaScript की मदद से किसी एलिमेंट का स्टाइल बदलने का सबसे अच्छा तरीका क्या है?

किसी एलिमेंट की क्लास को टॉगल करने के लिए JavaScript का इस्तेमाल करें और अपनी सीएसएस स्टाइल शीट में स्टाइल जोड़ें.
सीधे किसी एचटीएमएल एलिमेंट में डाइनैमिक स्टाइल लागू करने के लिए, JavaScript का इस्तेमाल करें.

क्या सभी JavaScript कार्रवाइयां, कीबोर्ड का इस्तेमाल करने वाले लोगों के लिए काम करती हैं?

हां, सभी कार्रवाइयों के लिए कीबोर्ड का इस्तेमाल करने वाले लोग अपने-आप काम करते हैं.
नहीं, कीबोर्ड का इस्तेमाल करने वाले लोगों के लिए, सिर्फ़ सेमांटिक एचटीएमएल का इस्तेमाल किया जा सकता है.
हां, लेकिन आपको कुछ और काम करने पड़ सकते हैं.