हम जो भी बनाते हैं उसमें 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 एट्रिब्यूट लागू करते समय, चुनिंदा एट्रिब्यूट का इस्तेमाल करना ज़रूरी है. उपयोगकर्ता फ़्लो के बारे में सोचें, ताकि यह समझा जा सके कि उपयोगकर्ता को कौनसी अहम जानकारी दी जानी चाहिए.
पेज लेवल
डेवलपर अक्सर स्क्रीन पर होने वाले बदलावों की जानकारी देने और सहायक टेक्नोलॉजी (एटी) के उपयोगकर्ताओं को चेतावनी देने के लिए, एआरआईए लाइव रीजन नाम के ऐसे एरिया का इस्तेमाल करते हैं जो दिखता नहीं है. इस एरिया को JavaScript के साथ जोड़ा जा सकता है, ताकि उपयोगकर्ताओं को पेज में होने वाले डाइनैमिक बदलावों की सूचना दी जा सके. इसके लिए, पूरे पेज को फिर से लोड करने की ज़रूरत नहीं पड़ती.
JavaScript, डाइनैमिक नेचर की वजह से, aria-live और चेतावनी वाले इलाकों में कॉन्टेंट का एलान करने में हमेशा से मुश्किलों का सामना करता रहा है. डीओएम में कॉन्टेंट को असिंक्रोनस तरीके से जोड़ने पर, एटी के लिए इलाके को चुनना और उसका एलान करना मुश्किल हो जाता है.
कॉन्टेंट को सही तरीके से पढ़ने के लिए, लाइव या सूचना वाला क्षेत्र लोड होने पर डीओएम में होना चाहिए. इसके बाद, टेक्स्ट को डाइनैमिक तौर पर बदला जा सकता है.
अगर JavaScript फ़्रेमवर्क का इस्तेमाल किया जाता है, तो अच्छी बात यह है कि इनमें से ज़्यादातर में "लाइव एनोनर" पैकेज होता है. यह पैकेज आपके लिए सारा काम करता है और इसे पूरी तरह ऐक्सेस किया जा सकता है. लाइव रीजन बनाने और पिछले सेक्शन में बताई गई समस्याओं से निपटने के बारे में चिंता करने की ज़रूरत नहीं है.
यहां आम तौर पर इस्तेमाल होने वाले JavaScript फ़्रेमवर्क के कुछ लाइव पैकेज दिए गए हैं:
- React: react-aria-live और react-a11y-announcer
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
आधुनिक JavaScript एक बेहतरीन लैंग्वेज है. इसकी मदद से, वेब डेवलपर बेहतरीन वेब ऐप्लिकेशन बना सकते हैं. इससे कभी-कभी, पैटर्न को ज़रूरत से ज़्यादा जटिल बना दिया जाता है. साथ ही, इन पैटर्न को ऐक्सेस करना भी मुश्किल हो जाता है. इस मॉड्यूल में दिए गए JavaScript पैटर्न और सुझावों का पालन करके, अपने ऐप्लिकेशन को सभी उपयोगकर्ताओं के लिए ज़्यादा ऐक्सेस करने लायक बनाया जा सकता है.
देखें कि आपको क्या समझ आया
JavaScript के बारे में अपनी जानकारी को टेस्ट करें
JavaScript की मदद से किसी एलिमेंट का स्टाइल बदलने का सबसे अच्छा तरीका क्या है?
क्या सभी JavaScript कार्रवाइयां, कीबोर्ड का इस्तेमाल करने वाले लोगों के लिए काम करती हैं?