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 पर इस तुलना की झलक देखें.

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

पेज शीर्षक

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

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

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

डाइनैमिक कॉन्टेंट

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

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

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

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

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

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

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

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

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

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

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

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

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

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

पेज लेवल

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

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

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

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

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

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

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

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

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

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

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

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

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

पेज लेवल

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

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

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

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

• प्रतिक्रिया दें: react-aria-live और react-a11y-announcer पर जाएं
• एंगुलर: LiveAnnouncer
• Vue: vue-a11y-utils

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

आपने जो सीखा है उसकी जांच करें

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