वेबसाइटें सभी के लिए सुलभ होनी चाहिए। यहाँ वह है जो आपको जानना चाहिए।
वेबपेज बनाना सिर्फ वेबपेज बनाना नहीं है। फ्रंट-एंड डेवलपमेंट का एक महत्वपूर्ण पहलू यह सुनिश्चित करना है कि उपयोगकर्ता इंटरफ़ेस इंटरनेट पर सभी के लिए सुलभ हो, जिसमें दृश्य और श्रवण अक्षमता वाले लोग भी शामिल हैं। आपको इन लोगों को ध्यान में रखकर अपना कोड लिखना होगा। आप दृष्टिबाधित लोगों को गैर-दृष्टिबाधित लोगों के समान अपनी वेबसाइट पर समान पहुंच कैसे प्रदान करते हैं? ढूंढने के लिए इस लेख को पढ़ें।
डेवलपर्स को वेब एक्सेसिबिलिटी के बारे में क्यों चिंतित होना चाहिए?
वेब एक्सेसिबिलिटी इस विचार के इर्द-गिर्द घूमती है कि किसी भी विकलांगता या अक्षमता की परवाह किए बिना सभी की वेब तक समान पहुंच होनी चाहिए। एक सुलभ वेबसाइट होने से बड़े दर्शकों तक पहुंचना आसान हो जाता है (दुनिया का लगभग 16% किसी न किसी विकलांगता से ग्रस्त है)।
डिजिटल पहुंच एक विकल्प नहीं होना चाहिए डेवलपर्स के लिए। यह किसी भी पेशेवर ब्रांड के लिए जरूरी है। इसे गंभीरता से लिया गया है: जैसा कि रिपोर्ट किया गया है विविधता, किसी ने 2019 में एक गैर-पहुंच वाली वेबसाइट के कारण पोकेमॉन कंपनी पर मुकदमा दायर किया।
एचटीएमएल के साथ वेब एक्सेसिबिलिटी
HTML में, सुलभ वेबसाइटों के विकास को सुनिश्चित करने के लिए नियम हैं। यह खंड उन कुछ नियमों की व्याख्या करेगा।
सिमेंटिक तत्वों का प्रयोग करें
HTML में सिमेंटिक तत्व ऐसे तत्व हैं जिनके अर्थ हैं। HTML5 में लगभग 100 तत्व होते हैं। कुछ तत्व, जैसे और, गैर-शब्दार्थ हैं, जबकि अन्य HTML टैग शब्दार्थ हैं. हालांकि इन गैर-सिमेंटिक तत्वों का उपयोग करना बंद करना असंभव हो सकता है, लेकिन यह महत्वपूर्ण है कि आप अपने काम में अधिक से अधिक सिमेंटिक तत्वों को शामिल करें। यहाँ लोकप्रिय सिमेंटिक तत्वों की एक सूची है:
इस उदाहरण पर विचार करें तास्कली से:
ऊपर की छवि पर एक नज़र निम्नलिखित तत्वों को प्रकट करेगी:
- एक शीर्षक
- एक छवि
- एक पैरा
- तीन बटन
यह मान लेना आसान है कि डेवलपर्स ने इस्तेमाल किया स्क्रीन पर तत्वों को व्यवस्थित करने के लिए टैग। कोड्स पर करीब से नज़र डालने पर, आप देखेंगे कि उन्होंने इसके बजाय छह सिमेंटिक टैग का इस्तेमाल किया। सरलीकृत कोड इस तरह दिखता है:
<अनुभाग>
<आईएमजीस्रोत="/hero.png"alt="नायक">
<लेख>
<एच 1>सही समय पर सही उत्पाद और सेवाएं खोजें।एच 1>
<पी>
हस्तनिर्मित जूते, बालों की मरम्मत, सोशल मीडिया मैनेजर, काम भेजना, आय का स्रोतबी>— आप इसे नाम दें, टास्कली समझ गया। जब आप साइन अप करते हैं और Taaskly का उपयोग करते हैं, तो आपको आज ही हर उत्पाद या सेवा की आवश्यकता होती है।
पी>
<एhref="/ मुख्य/घर">एक कार्य को आउटसोर्स करेंए>
<एhref="/ मुख्य/सेवाएं"> एक सेवा खोजेंए>
<एhref="/ मुख्य/बाजार" >एक दुकान खोजेंए>
लेख>
अनुभाग>
HTML स्निपेट से, आप निम्नलिखित देख सकते हैं:
- इमेज, टेक्स्ट और बटन एक के अंदर होते हैं तत्व।
- तत्व समान रूप से विभाजित करता है
और तत्व।
- तत्व धारण करता है, , और तत्व।
- बटन के रूप में कोडित हैं तत्व; इसलिए, वे लिंक हैं, बटन नहीं। एक सामान्य नियम के रूप में, उपयोगकर्ता को किसी अन्य पृष्ठ या दृश्य पर निर्देशित करने के लिए हमेशा लिंक का उपयोग करें, और बटन का उपयोग तब करें जब आप चाहते हैं कि उपयोगकर्ता केवल उसी दृश्य में कोई कार्य करे। देखना कोणीय का बटन पृष्ठ इसके बारे में अधिक जानकारी के लिए।
स्पष्ट पृष्ठ संरचना प्रदान करने के लिए लैंडमार्क का उपयोग करें
लैंडमार्क सिमेंटिक टैग हैं जो नेत्रहीन उपयोगकर्ताओं को स्क्रीन रीडर्स के साथ वेब पेज नेविगेट करने में मदद करते हैं। स्थलों के साथ, वेब पेज के विभिन्न भागों को परिभाषित करना आसान है। एप्पल की वेबसाइट स्थलों का उपयोग करता है।
ऊपर दी गई छवि चार अलग-अलग स्थलों को दिखाती है। आप उपयोग कर सकते हैं अभिगम्यता अंतर्दृष्टि विस्तार इन स्थलों की कल्पना करने के लिए।
छवि में, हम एक निष्कर्ष निकाल सकते हैं शीर्ष पर, ए एक युक्त, और ए तत्व। उल्लेखनीय रूप से, छवि दिखाती है "मार्गदर्शन", "क्षेत्र", और "सामग्री की जानकारी". इन्हें भूमिकाओं के रूप में जाना जाता है, जिन्हें हम बाद में देखेंगे।
जब भी आपको किसी पृष्ठ के लिए एक से अधिक लैंडमार्क का उपयोग करना हो, तो हमेशा उन्हें एक लेबल द्वारा अलग करें। उदाहरण के लिए, यदि आप एकाधिक का उपयोग करते हैं Apple के पास तत्व हैं, आपको उन्हें लेबल करना होगा। आपको उन्हें इसके साथ लेबल करना चाहिए aria-लेबल गुण। तो आप इनमें से कुछ ऐसा लिख सकते हैं:
<एनएवीaria-लेबल = "वैश्विक">
<एनएवीaria-लेबल = "स्थानीय नेविगेशन">
<एनएवीaria-लेबल = "सेब निर्देशिका">
लेबल का उपयोग करने से स्क्रीन रीडर को किसी भी नेविगेशन पर जाने में मदद मिल सकती है।
भूमिका, नाम और मूल्य विशेषताओं का उपयोग करें
कभी-कभी, अंतर्निहित पहुंच-योग्यता सुविधाओं के साथ HTML तत्वों का उपयोग करना असंभव हो सकता है। ऐसे मामले इन दोनों में से कोई भी हो सकते हैं:
- आप जो हासिल करना चाहते हैं, उसके लिए कोई मूल HTML तत्व नहीं है। उदाहरण के लिए, यदि आपको एक का उपयोग करना है क्योंकि कोई अन्य तत्व भूमिका के अनुकूल नहीं लगता।
- तकनीकी समस्याओं के कारण आप सिमेंटिक तत्वों का उपयोग करने में असमर्थ हैं। यदि आप एक ढांचे का उपयोग करते हैं जो उपयोग करता है कब उपयोग करना बेहतर होता, कस्टम नियंत्रण को परिभाषित करना आपका कर्तव्य होगा।
एक कस्टम नियंत्रण को परिभाषित करने के लिए, आपको अपने तत्व के लिए एक भूमिका, एक नाम और एक मान (कभी-कभी) की आवश्यकता होती है।
भूमिका
डिफ़ॉल्ट रूप से, ए तत्व की नेविगेशन भूमिका होती है, जबकि a तत्व की बैनर भूमिका है। आपको इन तत्वों का उपयोग केवल उनके लक्षित उद्देश्यों के लिए करना चाहिए ताकि सहायक तकनीकों को वेब पेज की संरचना को समझने में मदद मिल सके। यदि आपको एक के स्थान पर दूसरे का उपयोग करना है, तो आपको इस तरह की भूमिका निर्दिष्ट करनी चाहिए:
<हैडरभूमिका = "मार्गदर्शन">
<एनएवीभूमिका = "बैनर">
<डिवभूमिका = "मार्गदर्शन">
नाम
एक नाम एक वर्णनात्मक पाठ या HTML तत्व से जुड़ा लेबल है। किसी नाम का सबसे आसान रूप किसी तत्व का टेक्स्ट होता है। यहाँ एक उदाहरण है:
<डिवभूमिका = "बटन">मुझे क्लिक करें!डिव>
उपरोक्त स्निपेट में, "मुझे क्लिक करें!"का नाम है तत्व। इसे सुलभ नाम के रूप में भी जाना जाता है।
नेविगेशन, ड्रॉप-डाउन आदि जैसे तत्वों के लिए, नाम निर्दिष्ट करना पिछले उदाहरण की तुलना में अधिक जटिल है। यह अलग है क्योंकि इन तत्वों में बाल तत्व हैं। उपरोक्त नेविगेशन के लिए एक नाम निर्दिष्ट करने के लिए, का उपयोग करें aria-लेबल गुण। इस उदाहरण को देखें:
<एनएवीभूमिका = "मार्गदर्शन"aria-लेबल = "वैश्विक नेविगेशन">...एनएवी>
आपको ध्यान देना चाहिए कि ए नाम विशेषता एक सुलभ नाम से अलग है। यह कोड स्निपेट बेहतर समझ देता है:
नाम विशेषता
<एनएवीभूमिका = "मार्गदर्शन"नाम = "वैश्विक नेविगेशन">...एनएवी>
सुलभ नाम
<एनएवीभूमिका = "मार्गदर्शन"aria-लेबल = "वैश्विक नेविगेशन">...एनएवी>
देखना सुलभ नामों पर टीजीपीआई का लेख इसकी गहरी समझ पाने के लिए।
कीमत
HTML में, value विशेषता तत्व के बारे में अतिरिक्त जानकारी प्रदान कर सकती है। मान कस्टम घटकों जैसे अकॉर्डियन के लिए घटक की स्थिति के बारे में जानकारी प्रदान करते हैं। उदाहरण के लिए, एक अकॉर्डियन को खोला या बंद किया जा सकता है।
आप अपने तत्वों में कई तरह से मूल्य जोड़ सकते हैं। यह स्निपेट आपको ऐसा करने के कुछ तरीके दिखाता है:
aria-valuenow
कीमत
<इनपुटप्रकार="चेकबॉक्स"नाम="उत्पाद[]"कीमत="1">
समावेशी ऑनलाइन अनुभव के लिए वेब एक्सेसिबिलिटी को प्राथमिकता देना
वेब पहुंच निम्नलिखित नियमों से परे है; यह यह सुनिश्चित करने के बारे में भी है कि आपकी वेबसाइट तक सभी की समान पहुंच हो। सिमेंटिक तत्वों, स्थलों, और विशेषताओं जैसे भूमिका, नाम और मूल्य को अपने HTML में शामिल करने से आपकी वेबसाइट विकलांग लोगों के लिए अधिक सुलभ हो सकती है। वेब एक्सेसिबिलिटी को एक विकल्प के रूप में न सोचें; इसे एक आवश्यकता समझें।
