JavaScript

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

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

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

ट्रिगर इवेंट

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

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

<div role="button" tabindex="0" onclick="doAction()">Click me!</div>

<button onclick="doAction()">Click me!</button>

CodePen पर इस तुलना का प्रीव्यू देखें.

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

पेज शीर्षक

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

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

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

Dynamic content

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

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

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

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

`setAttribute` की मदद से, सीएसएस को भी इसी तरह लागू किया जा सकता है: setAttribute:

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

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

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

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

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

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

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

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

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

पेज लेवल

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

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

इसे हासिल करने के कई तरीके हैं:

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

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

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

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

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

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

आपके पेज के कॉन्टेंट और लोगों को किस जानकारी की ज़रूरत है, इस आधार पर, किसी कॉम्पोनेंट के बारे में लोगों को जानकारी रिले करते समय, कई ARIA स्टेट पर विचार करना होता है.

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

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

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

पेज लेवल

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

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

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

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

• React: react-aria-live और react-a11y-announcer
• Angular: LiveAnnouncer
• Vue: vue-a11y-utils

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