जावास्क्रिप्ट में Accessibility: सभी के लिए उपयोगी वेबसाइट कैसे बनाएं

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

जावास्क्रिप्ट में Accessibility: सभी के लिए उपयोगी वेबसाइट कैसे बनाएं

\n\n

कल्पना करें कि आप किसी वेबसाइट पर जाते हैं, और "खरीदें" बटन माउस से नहीं दबता - केवल कीबोर्ड से। या आप स्क्रीन नहीं देख पाते, और स्क्रीन रीडर आधी सामग्री को छोड़ देता है। अप्रिय, है ना? और लाखों लोगों के लिए यह दैनिक वास्तविकता है।

\n\n

Accessibility (या a11y) सिर्फ एक फैशनेबल शब्द नहीं है। यह आपके कोड को ईमानदार बनाने का एक तरीका है। जावास्क्रिप्ट में सुलभता इस बारे में है कि आपकी वेबसाइट सभी के लिए काम करे: कम दृष्टि वाले लोगों के लिए, मोटर विकलांगता वाले लोगों के लिए, उन लोगों के लिए जो केवल कीबोर्ड या वॉयस कंट्रोल का उपयोग करते हैं। और हाँ, यह SEO के बारे में भी है: सर्च इंजन साफ, सिमैंटिक रूप से सही कोड पसंद करते हैं।

\n\n

इस लेख में, हम JavaScript पर वास्तविक उदाहरण देखेंगे जिन्हें आप आज ही लागू कर सकते हैं। कोई बेकार की बात नहीं - केवल कोड और अभ्यास।

\n\n

Accessibility आपकी जिम्मेदारी क्यों है?

\n\n

यदि आप JavaScript में लिखते हैं, तो आप इंटरफ़ेस के व्यवहार को नियंत्रित करते हैं। JS ही अक्सर सुलभता को तोड़ता है: डायनामिक मोडल, अनंत स्क्रॉल, कस्टम सेलेक्ट। स्क्रीन रीडर (स्क्रीन पढ़ने वाले प्रोग्राम) आपके विचार नहीं पढ़ सकते - वे वही पढ़ते हैं जो आप उन्हें HTML और ARIA के माध्यम से बताते हैं।

\n\n

अच्छी खबर: अधिकांश समस्याओं को एक शाम में ठीक किया जा सकता है। बुरी खबर: यदि आप शुरुआत में accessibility के बारे में नहीं सोचते हैं, तो इसे फिर से लिखने में हफ्तों लग सकते हैं।

\n\n

ARIA-गुण: आपका मुख्य उपकरण

\n\n

ARIA (Accessible Rich Internet Applications) गुणों का एक सेट है जो सहायक तकनीकों को यह समझने में मदद करता है कि पेज पर क्या हो रहा है। JavaScript इन गुणों को डायनामिक रूप से अपडेट करने के लिए एकदम सही है।

\n\n

उदाहरण 1: aria-live का डायनामिक अपडेट

\n\n

मान लीजिए कि आपके पास एक चैट है जहां संदेश बिना पेज रीलोड किए लोड होते हैं। स्क्रीन रीडर को नए संदेश की घोषणा करनी चाहिए। aria-live के बिना, उपयोगकर्ता को अपडेट के बारे में पता नहीं चलेगा।

\n\n

// नोटिफिकेशन के लिए कंटेनर बनाएं\nconst liveRegion = document.createElement('div');\nliveRegion.setAttribute('aria-live', 'polite');\nliveRegion.setAttribute('aria-atomic', 'true');\nliveRegion.classList.add('sr-only'); // विज़ुअली छुपाएं\ndocument.body.appendChild(liveRegion);\n\n// संदेश जोड़ने का फंक्शन\nfunction addChatMessage(message) {\n  liveRegion.textContent = ''; // साफ करें\n  liveRegion.textContent = `नया संदेश: ${message}`;\n}\n\n// कॉल का उदाहरण\naddChatMessage('नमस्ते! कैसे हो?');

\n\n

महत्वपूर्ण: aria-live="polite" स्क्रीन रीडर से कहता है: "जब तुम वर्तमान पढ़ना समाप्त करो तब घोषणा करो"। aria-live="assertive" पढ़ने को बाधित करता है - गंभीर त्रुटियों के लिए उपयोग करें।

\n\n

उदाहरण 2: कस्टम स्पॉयलर/अकॉर्डियन

\n\n

मानक <details> और <summary> पहले से ही सुलभ हैं, लेकिन यदि आप JS पर कस्टम अकॉर्डियन बनाते हैं, तो ARIA भूमिकाएं और स्थितियां जोड़नी होंगी।

\n\n

// अकॉर्डियन के प्रत्येक सेक्शन के लिए\nconst accordionButton = document.querySelector('.accordion-button');\nconst accordionPanel = document.querySelector('.accordion-panel');\n\naccordionButton.setAttribute('aria-expanded', 'false');\naccordionButton.setAttribute('aria-controls', 'panel-1');\naccordionPanel.setAttribute('id', 'panel-1');\naccordionPanel.setAttribute('aria-hidden', 'true');\n\naccordionButton.addEventListener('click', () => {\n  const isOpen = accordionButton.getAttribute('aria-expanded') === 'true';\n  accordionButton.setAttribute('aria-expanded', !isOpen);\n  accordionPanel.setAttribute('aria-hidden', isOpen);\n});

\n\n

अब स्क्रीन रीडर समझता है कि बटन पैनल को नियंत्रित करता है, और जानता है कि यह खुला है या बंद।

\n\n

फोकस प्रबंधन: उपयोगकर्ता को खो जाने न दें

\n\n

JavaScript सुलभता में सबसे आम गलतियों में से एक फोकस का खो जाना है। जब मोडल विंडो खुलती है, तो फोकस उसके अंदर जाना चाहिए। जब बंद होती है, तो उस बटन पर वापस आना चाहिए जिसने इसे खोला था।

\n\n