बिल्डिंग ए बेटर वेब: ए गाइड टू एक्सेसिबिलिटी फॉर डेवलपर्स

वेब एक्सेसिबिलिटी को लेकर काफी चर्चा है, और इंटरनेट इस विषय पर जानकारी से भरा पड़ा है। जब WebAIM ने शीर्ष 1,000,000 वेबसाइटों का अध्ययन किया, तो उन्हें कुल 50,829,406 अलग-अलग पहुंच-योग्यता त्रुटियां मिलीं - जो प्रति पृष्ठ औसतन 50.8 त्रुटियां हैं। अभिगम्यता परीक्षण के प्रयास उत्पाद विकास के अंत में कई कंपनियों में होते हैं, लेकिन सभी कंपनियों में नहीं। इसलिए, विकासकर्ताओं को प्रशिक्षण देकर और विकास प्रक्रिया के दौरान वेब पहुंच को प्राथमिकता देकर, पहुंच संबंधी त्रुटियों की संख्या को महत्वपूर्ण रूप से कम किया जा सकता है।

वेब एक्सेसिबिलिटी को समझना

सरल शब्दों में, वेब एक्सेसिबिलिटी का अर्थ है कि विकलांग लोगों के लिए वेब एक्सेस योग्य है। आगे समझने में सहायता के लिए यहां एक उदाहरण दिया गया है: नेत्रहीन उपयोगकर्ता आमतौर पर स्क्रीन-रीडर की मदद से कंप्यूटर को नेविगेट करते हैं, जो एक टेक्स्ट-टू-स्पीच टूल है जो उन्हें स्क्रीन पर जानकारी निर्देशित करता है। जब आप अपनी वेबसाइट को सुलभ बनाते हैं, तो स्क्रीन रीडर उस जानकारी को सफलतापूर्वक उपयोगकर्ता तक पहुँचा सकता है। यदि आपकी वेबसाइट पहुंच योग्य नहीं है, तो स्क्रीन रीडर उपयोगकर्ता को गलत या अधूरी जानकारी प्रदान करता है। दूसरे शब्दों में, स्क्रीन रीडर जैसी सहायक तकनीकों का उपयोग करना तभी अच्छा काम करता है, जब वे जिन वेबसाइटों के साथ इंटरैक्ट कर रहे हैं, उन्हें एक्सेसिबिलिटी को ध्यान में रखते हुए डिज़ाइन किया गया हो।

'सुलभ' शब्द 'प्रयोग करने योग्य' से भिन्न है। एक वेबसाइट इस अर्थ में सुलभ हो सकती है कि यह किसी वेबसाइट के लिए कानूनी रूप से अनुपालन करने के लिए न्यूनतम आवश्यकताओं को पूरा करती है, लेकिन यह अभी भी विकलांग लोगों के लिए सबसे उपयोगकर्ता-अनुकूल अनुभव नहीं हो सकता है। इसलिए, अपनी वेबसाइट को विकलांग लोगों के लिए सुलभ और उपयोगी बनाने के लिए कम से कम अतिरिक्त प्रयास करना महत्वपूर्ण है। हम इस लेख में आगे चर्चा करेंगे कि ऐसा कैसे करें।

आपकी वेबसाइट में अभिगम्यता शामिल करने के पांच तरीके

• एक स्वचालित अभिगम्यता पाइपलाइन सेट करें।

  अपने एप्लिकेशन में एक्सेसिबिलिटी को एम्बेड करना शुरू करने के सबसे आसान और तेज़ तरीकों में से एक है शिफ्ट लेफ्ट के दर्शन का पालन करना - जिसका मतलब है कि डेवलपमेंट प्रोसेस में एक्सेसिबिलिटी टेस्टिंग जल्द से जल्द शुरू होनी चाहिए और आखिरी पल तक इंतजार नहीं करना चाहिए। विभिन्न एक्सेसिबिलिटी चेकर्स हैं जो आपकी वेबसाइट के लिए स्वचालित एक्सेसिबिलिटी टेस्टिंग सेट करने में मदद कर सकते हैं - कुछ ऐसी चीज़ों से जिन्हें आप अपने ब्राउज़र में मैन्युअल रूप से चला सकते हैं से लेकर ऐसे टूल तक जिन्हें आप अपने CI/CD पाइपलाइन में एकीकृत कर सकते हैं।

  
  

  मुफ़्त ब्राउज़र एक्सटेंशन में टूल जैसे शामिल हैं लहर और अभिगम्यता अंतर्दृष्टि . एक बार इंस्टॉल हो जाने के बाद, आप उन्हें अपने वेबपेज पर कभी भी चला सकते हैं, और वे आपको आपकी वेबसाइट पर एक्सेसिबिलिटी एरर दिखाएंगे, जिसमें आपके फॉर्म के लिए गायब ARIA लेबल से लेकर रंग कंट्रास्ट की समस्याएं शामिल हैं। ये उपकरण आपकी स्वचालित पहुँच क्षमता यात्रा को शुरू करने का एक शानदार तरीका है। डेवलपर कोड लिंटर का भी उपयोग कर सकते हैं जैसे axe एक्सेसिबिलिटी लिंटर मुद्दों को पकड़ने के लिए क्योंकि वे आपके आईडीई में कोडिंग कर रहे हैं। डेक के अनुसार, स्वचालित उपकरण अभी उद्योग की 20 प्रतिशत की अनुमानित दर की तुलना में 57 प्रतिशत अभिगम्यता के मुद्दों को पकड़ते हैं।

• अपने स्वचालित पहुँच क्षमता परिणामों से सीखें।

  आपने अपनी वेबसाइट के लिए स्वचालित पहुंच-योग्यता परीक्षण सेट अप किया है – यह बहुत अच्छा है। हालाँकि, क्या आप अभिगम्यता त्रुटियों के पकड़े जाने से सीख रहे हैं? उदाहरण के लिए - यदि आप प्रपत्रों के लापता लेबल या छवियों के लिए वैकल्पिक पाठ से संबंधित बहुत सारी त्रुटियों का सामना कर रहे हैं - तो यह सुनिश्चित करना महत्वपूर्ण है कि आप भविष्य में उन त्रुटियों को दोहराते न रहें। यदि आपको अपनी वेबसाइट पर कई कंट्रास्ट समस्याएँ मिल रही हैं, तो अपनी वेबसाइट के रंगों और थीम का मूल्यांकन करने के लिए अपनी डिज़ाइन टीम से बात करना एक अच्छा विचार हो सकता है।

  
  

  यह सुनिश्चित करने का एक और तरीका है कि आप सरल पहुँच संबंधी गलतियों को नहीं दोहरा रहे हैं, कोड समीक्षा के माध्यम से है - कोड समीक्षा के दौरान दुर्गम कोड की तलाश करना सुनिश्चित करें! जिन तत्वों का पता लगाया जा सकता है उनमें से कुछ ऐसे तत्वों के लिए अनुपलब्ध ARIA लेबल हैं जिनमें कोई स्पष्ट दृश्य लेबल नहीं है, छवियों के लिए ऑल्ट-टेक्स्ट गायब है, और पृष्ठ शीर्षक गायब हैं। स्वचालित परीक्षण उपकरणों का उपयोग करना बहुत अच्छा है, लेकिन यदि आप आमतौर पर पकड़ में आने वाली समस्याओं को पहले से ही ठीक कर लेते हैं तो इसकी दक्षता में और सुधार किया जा सकता है।

  
  

• कीबोर्ड नेविगेशन + स्क्रीन रीडर परीक्षण

  यदि आप स्वचालित अभिगम्यता परीक्षण से एक कदम आगे जाना चाहते हैं - कीबोर्ड का उपयोग करके अपनी वेबसाइट का परीक्षण करना सुनिश्चित करें। सभी इंटरएक्टिव तत्वों को टैब कुंजियों के माध्यम से एक्सेस किया जाना चाहिए, और ड्रॉपडाउन मेनू जैसे तत्वों को तीर कुंजियों के माध्यम से एक्सेस किया जाना चाहिए। विभिन्न यूआई तत्वों के लिए उपयुक्त कीस्ट्रोक्स पर अधिक जानकारी यहां पाई जा सकती है: https://webaim.org/techniques/keyboard/

  
  

  यदि आप पाते हैं कि कीबोर्ड के माध्यम से कुछ सुलभ नहीं है, तो अपने आप से पूछें: क्या यह सुलभ होना चाहिए? स्टैटिक टेबल सेल जैसे तत्वों को कीबोर्ड के माध्यम से एक्सेस करने की आवश्यकता नहीं है। यदि यह एक कस्टम इंटरएक्टिव तत्व है जिसे कीबोर्ड के माध्यम से एक्सेस करने की आवश्यकता है और यह नहीं है, तो आपको प्रोग्रामेटिक रूप से इसे एक्सेस करने की आवश्यकता होगी। यह 0 का एक टैबिन्डेक्स जोड़कर किया जा सकता है, जो वेब पेज के टैब ऑर्डर में तत्व को जोड़ देगा, और फिर ईवेंट हैंडलर्स जैसे "onKeyPress" को परिभाषित करेगा, जो एक कुंजी प्रेस पर आवश्यक कार्रवाई करेगा।

  
  

  उदाहरण के लिए, यह कोड स्निपेट बटन तत्व में 0 का एक टैबइंडेक्स जोड़ता है, जिससे यह कीबोर्ड के माध्यम से ध्यान देने योग्य और सुलभ हो जाता है। ईवेंट हैंडलर "कीडाउन" ईवेंट के लिए सुनता है और एंटर कुंजी दबाए जाने पर बटन पर क्लिक ट्रिगर करता है।

  
  

  <button id="myButton">Click me</button>

   

  const button = document.getElementById("myButton");

  button.tabIndex = 0;

    

  button.addEventListener("keydown", function(event) {

  if (event.key === "Enter") {

  button.click();

  }

  });

  
  

  यदि आप एक कदम आगे जाना चाहते हैं, तो अपनी वेबसाइट का परीक्षण करने के लिए स्क्रीन रीडर का उपयोग करने का प्रयास करें। यह एक अच्छा विचार हो सकता है यदि आपकी वेबसाइट मैन्युअल परीक्षण के लिए किसी तृतीय-पक्ष अंतिम पहुँच-क्षमता विक्रेता के माध्यम से नहीं जाती है। आपको एक डेवलपर के रूप में विस्तृत स्क्रीन-रीडर परीक्षण करने की आवश्यकता नहीं है, लेकिन आप स्क्रीन रीडर के साथ वेबसाइट को नेविगेट करने का प्रयास कर सकते हैं। चीजों की जांच करें जैसे फॉर्म तत्वों के लिए उचित लेबल की घोषणा की गई है, अगर कोई अनावश्यक जानकारी दी जा रही है, अगर तालिका में जानकारी पहुंच योग्य है, आदि।

  
  

  मैक के लिए विंडोज नैरेटर और वॉयसओवर फ्री स्क्रीन रीडर्स के लिए अच्छे विकल्प हैं। स्क्रीन रीडर्स सामान्य कीबोर्ड नेविगेशन कमांड के साथ सिंक्रोनाइज़ करते हैं लेकिन इसके अतिरिक्त वेबसाइट के विभिन्न तत्वों को नेविगेट करने के लिए विशिष्ट कमांड होते हैं। उदाहरण के लिए, VoiceOver के लिए, आप उन कमांड्स को यहाँ देख सकते हैं: https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts .

  
  

• कुछ सुलभता डिबगिंग टूल से परिचित हों।

  ब्राउजर एक्सेसिबिलिटी ट्री जैसे टूल्स आपकी वेबसाइट पर यूआई एलिमेंट्स की एक्सेसिबिलिटी स्टेट्स और प्रॉपर्टीज को देखने में आपकी मदद कर सकते हैं। यह टूल विशेष रूप से एक्सेसिबिलिटी बग्स को ठीक करने के लिए उपयोगी है, क्योंकि यह आपको दिखा सकता है कि स्क्रीन रीडर जैसी सहायक तकनीकों के लिए कौन से एक्सेसिबिलिटी गुण प्रदर्शित किए जा रहे हैं। Google Chrome में एक्सेसिबिलिटी ट्री देखने के लिए, अपने ब्राउज़र पर Devtools खोलें और एक्सेसिबिलिटी पेन पर क्लिक करें। यह लेआउट फलक के बगल में होना चाहिए।

  
  

  एक्सेसिबिलिटी ट्री के बारे में यहां और जानें:https://developer.chrome.com/blog/full-accessibility-tree/#what-is-the-accessibility-tree

  
  

  एक अन्य उपयोगी उपकरण जिसका आप उपयोग कर सकते हैं वह पॉल के बुकमार्कलेट हैं जो तत्वों की भूमिकाओं, अवस्थाओं और गुणों को भी उजागर करते हैं। यह मोबाइल फोन पर भी काम करता है। दोनों उपकरण यह जानने में मददगार हैं कि सहायक तकनीकों को कौन सी जानकारी दी जा रही है और इसलिए किसी भी बग को ठीक करने में बेहद उपयोगी हैं।

  
  

• कई अन्य विकलांगों के लिए खाता

  स्क्रीन-रीडर और कीबोर्ड परीक्षण के अलावा, जो नेत्रहीन या मोटर अक्षमताओं वाले लोगों की सहायता कर सकते हैं, आपको अन्य विकलांग लोगों की आवश्यकताओं को समायोजित करने पर भी विचार करना चाहिए। अगर आपकी वेबसाइट में वीडियो हैं, तो उन पर सटीक कैप्शन शामिल करना सुनिश्चित करें। संज्ञानात्मक विकलांग लोगों के लिए, डब्लुसीएजी के पास सामग्री को उनके लिए सुलभ बनाने के बारे में एक महान मार्गदर्शिका है। कलरब्लाइंडनेस जैसी अन्य अक्षमताओं पर भी विचार करें। TPGi के कलर कंट्रास्ट एनालाइज़र में कलर ब्लाइंडनेस सिम्युलेटर है, जो यह सुनिश्चित करने के लिए एक उत्कृष्ट उपकरण हो सकता है कि आपकी वेबसाइट सुलभ रंगों और थीम का उपयोग कर रही है।

  
  

  अंत में, यदि आपकी वेबसाइट में कस्टम स्पीच-टू-टेक्स्ट कार्यक्षमता है, तो सुनिश्चित करें कि यह स्पीच डिसएबिलिटी वाले किसी व्यक्ति के लिए सुलभ है। ऐसा करने का एक तरीका यह हो सकता है कि भाषण विकार वाले लोगों को अपनी बात कहने के लिए पर्याप्त समय दिया जाए।

निष्कर्ष

डिजिटल पहुंच महत्वपूर्ण है ताकि इस ग्रह पर एक अरब विकलांग लोगों की वेब तक समान पहुंच हो सके। डिजिटल पहुंच की वर्तमान स्थिति को देखते हुए - हो सकता है कि हम बहुत अच्छा नहीं कर रहे हों। एक के अनुसार UsableNet की हालिया रिपोर्ट , "2022 ने 4,000 से अधिक [पहुंच योग्यता] मुकदमों का एक और वर्ष चिह्नित किया।" ऊपर बताई गई कुछ रणनीतियों का उपयोग करके, विकासकर्ता विकास प्रक्रिया में पहुंच-योग्यता एम्बेड कर सकते हैं और किसी को निराशाजनक अनुभव होने से पहले जितनी संभव हो उतनी त्रुटियों को पकड़ और ठीक कर सकते हैं।