JavaScript

JavaScript हमारे द्वारा बनाए जाने वाले हर छोटे हिस्से में अहम भूमिका निभाता है— 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 पर इस तुलना की झलक देखें.

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

पेज शीर्षक

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

पेज स्तर

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

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

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

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

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

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

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

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

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

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

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

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

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

पेज स्तर

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

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

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

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

• प्रतिक्रिया दें: react-aria-live और प्रतिक्रिया-a11y-उद्घोषक
• ऐंग्युलर: LiveAnnouncer
• Vue: vue-a11y-utils

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

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

JavaScript के बारे में अपनी जानकारी परखें