एक वेबसाइट को सुलभ कैसे बनाएं और WCAG अनुपालन का क्या अर्थ है

वेबसाइट पहुंच का क्या मतलब है

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

यह सरल लगता है। यह शायद ही कभी होता है।

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

पहुंच सामान्य उपयोगकर्ताओं की सामान्य स्थितियों में भी मदद करती है। एक कैप्शन किसी को शोर भरे ट्रेन स्टेशन में मदद करता है। स्पष्ट फोकस स्थितियाँ किसी को कर्सर का ट्रैक खोने पर मदद करती हैं। अच्छे शीर्षक एक पाठक को 20 सेकंड में एक लंबे पृष्ठ को स्कैन करने में मदद करते हैं, 2 मिनट में नहीं।

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

WCAG अनुपालन का क्या अर्थ है

WCAG का अर्थ है वेब सामग्री पहुंच दिशानिर्देश। यह वेब सामग्री को अधिक सुलभ बनाने के लिए एक प्रकाशित मानक है, और लोग अक्सर WCAG अनुपालन के बारे में इस तरह बात करते हैं जैसे यह एकल स्विच हो। यह ऐसा नहीं है।

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

कुछ दिशानिर्देशों का पालन करने और मानक को समग्र रूप से पालन करने के बीच भी एक अंतर है। छवियों पर वैकल्पिक पाठ के साथ एक पृष्ठ लेकिन टूटी हुई कीबोर्ड व्यवहार केवल इसलिए 'पर्याप्त रूप से सुलभ' नहीं है क्योंकि एक बॉक्स चेक किया गया है। एक साइट जिसमें सुंदर विपरीत है लेकिन बिना लेबल वाले फॉर्म फ़ील्ड हैं, फिर भी लोगों को क्रिया के बिंदु पर फंसा देती है।

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

एक सुलभ ऑडिट से शुरू करें

एक पहुंच ऑडिट आपको समस्याओं की पहली सूची देता है। 10 से 20 महत्वपूर्ण पृष्ठों के एक नमूने से शुरू करें, न कि पूरे साइट से एक साथ, क्योंकि सामान्य बाधाएं आमतौर पर दोहराती हैं: गायब वैकल्पिक पाठ, कम विपरीत, कीबोर्ड जाल, बिना लेबल वाले फॉर्म, और शीर्षक जो बिना किसी कारण के H2 से H4 में कूदते हैं।

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

छवियों की एक-एक करके जांच करें। सजावटी छवियों को आमतौर पर सहायक तकनीक द्वारा अनदेखा किया जाना चाहिए, जबकि महत्वपूर्ण छवियों को वैकल्पिक पाठ की आवश्यकता होती है जो बताता है कि क्या महत्वपूर्ण है। “2024 बिक्री वृद्धि दिखाने वाला चार्ट” “चार्ट” से बेहतर है, और “टीम फोटो” “image123” से बेहतर है।

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

सरल मानचित्र के साथ शीर्षकों का ऑडिट करें। एक पृष्ठ को केवल स्टाइलिंग के लिए शीर्षकों का उपयोग नहीं करना चाहिए, और एक उपयोगकर्ता को क्रम में रूपरेखा को स्किम करने में सक्षम होना चाहिए। यदि संरचना अव्यवस्थित है, तो पृष्ठ स्क्रीन रीडर उपयोगकर्ताओं के लिए और भी कठिन हो जाता है और किसी भी व्यक्ति के लिए जो तेजी से पढ़ने की कोशिश कर रहा है।

सुलभ सामग्री संरचना बनाएं

सुलभ सामग्री संरचना का आरंभिक बिंदु अर्थपूर्ण शीर्षकों से होता है। मुख्य अनुभागों के लिए H2s का उपयोग करें और उपविषयों के लिए H3s का उपयोग करें। बिंदु सजावट नहीं है; यह नेविगेशन है। स्क्रीन रीडर उपयोगकर्ता शीर्षकों द्वारा कूदते हैं, और एक स्पष्ट रूपरेखा उन्हें पृष्ठ के माध्यम से सेकंड में जाने देती है बजाय हर पंक्ति को पढ़ने के।

पृष्ठ संगठन भी उतना ही महत्वपूर्ण है। मुख्य कार्य को शीर्ष के निकट रखें, संबंधित सामग्री को एक साथ रखें, और पांच असंबंधित ब्लॉकों में प्रमुख क्रियाओं को बिखेरने से बचें। एक स्पष्ट मार्ग तीन प्रतिस्पर्धी मार्गों से बेहतर है। एक अव्यवस्थित लेआउट एक सरल क्रिया को पहेली जैसा महसूस करा सकता है।

लिंक यह बताने चाहिए कि वे कहाँ जाते हैं। "और पढ़ें" अपने आप में कमजोर है। "लॉन्च के बाद वेबसाइट समर्थन के बारे में और पढ़ें" उपयोगकर्ता को बताता है कि उन्हें क्या मिलेगा, और यह महत्वपूर्ण है जब एक पृष्ठ में 12 लिंक होते हैं। हर बार वर्णनात्मक पाठ का उपयोग करें जब गंतव्य आसपास के वाक्य से स्पष्ट न हो।

एक व्यावहारिक उदाहरण के लिए, "डाउनलोड" की तुलना "एक्सेसिबिलिटी चेकलिस्ट PDF डाउनलोड करें" से करें। दूसरा संस्करण लंबा है, लेकिन यह उपयोगी है। एक स्क्रीन रीडर लिंक सूची में, अतिरिक्त शब्द बेमतलब नहीं हैं; वे मानचित्र हैं।

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

पढ़ने में आसान कॉपी भी महत्वपूर्ण है। छोटे पैराग्राफ मदद करते हैं। साधारण शब्द और भी अधिक मदद करते हैं। यदि एक वाक्य एक पैराग्राफ का काम कर रहा है, तो इसे विभाजित करें। यदि एक वाक्य में तीन विचार हैं, तो इसे 2 वाक्यों में दें। स्क्रीन रीडर लंबे कंटेंट को संभाल सकते हैं, लेकिन मानव ध्यान की सीमाएँ होती हैं।

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

नेविगेशन और नियंत्रणों को कीबोर्ड-फ्रेंडली बनाएं

कीबोर्ड एक्सेस वैकल्पिक नहीं है। मेनू, बटन, डायलॉग और फॉर्म सभी को बिना माउस के काम करना चाहिए। यदि कोई नियंत्रण पर टैब कर सकता है लेकिन इसे सक्रिय नहीं कर सकता, तो नियंत्रण टूट गया है।

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

डायलॉग में एक एस्केप कुंजी या कोई अन्य स्पष्ट बंद क्रिया होनी चाहिए। जब यह खुलता है तो ध्यान डायलॉग में जाना चाहिए, फिर जब यह बंद होता है तो ट्रिगर पर लौटना चाहिए। बिना उस व्यवहार के, कीबोर्ड उपयोगकर्ता फंस सकते हैं या खो सकते हैं। कोई भी 18 बार टैब दबाना नहीं चाहता ताकि निकास मिल सके।

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

फॉर्म को एक और पास की आवश्यकता है। त्रुटि संदेश को क्षेत्र के पास प्रकट होना चाहिए, स्पष्ट भाषा का उपयोग करना चाहिए, और क्षेत्र से ही जुड़ा होना चाहिए। एक संदेश जो केवल “अमान्य इनपुट” कहता है, किसी की मदद नहीं करता। बताएं कि क्या गलत हुआ। बताएं कि इसे कैसे ठीक करना है। दो वाक्य एक समर्थन टिकट को बचा सकते हैं।

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

रंग, विपरीतता, और मीडिया पहुंच में सुधार करें

रंग का विपरीतता पठनीयता पर सीधे प्रभाव डालता है। पाठ जो पृष्ठभूमि में मिल जाता है, वह एक मॉकअप में स्टाइलिश लग सकता है और दैनिक उपयोग में विफल हो सकता है। विपरीतता की जांच एक उपकरण से करें, फिर इसे असली स्क्रीन पर निरीक्षण करें।

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

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

उन चित्रों में जिनमें पाठ होता है, उन्हें अतिरिक्त देखभाल की आवश्यकता होती है। यदि पाठ आवश्यक है, तो इसे पृष्ठ की कॉपी में भी डालें। एक बैनर जो कहता है “शुक्रवार तक पंजीकरण करें” किसी को स्क्रीनशॉट को डिकोड करने के लिए मजबूर नहीं करना चाहिए बस समय सीमा जानने के लिए। छोटा निर्णय, बड़ा अंतर।

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

परीक्षण करें, ठीक करें, और समय के साथ पहुंच बनाए रखें

पहुँचता एक बार का सफाई नहीं है। साइटें साप्ताहिक, कभी-कभी दैनिक बदलती हैं। एक नया बैनर, एक फॉर्म अपडेट, या एक पुन: डिज़ाइन किया गया मेनू 30 मिनट में वही पुराने समस्याएँ ला सकता है।

एक सरल कार्यप्रवाह बनाएं। पहले, बदले गए पृष्ठों पर स्वचालित जाँच करें। दूसरे, कीबोर्ड और स्क्रीन रीडर के साथ हाथ से प्रमुख उपयोगकर्ता पथों का परीक्षण करें। तीसरे, उपयोगकर्ता की प्रतिक्रिया एकत्र करें और समस्या को पृष्ठ URL, ब्राउज़र, और उस सटीक चरण के साथ लॉग करें जहाँ समस्या प्रकट होती है। एक टिकट में चार फ़ील्ड एक अस्पष्ट शिकायत से बेहतर हैं।

जब पहुँचता नियमित रिलीज़ कार्य के अंदर होता है, तो रखरखाव आसान हो जाता है। यदि डेवलपर्स घटक जोड़ते हैं, तो उन घटकों को शिप करने से पहले लेबल, फोकस स्थिति, और कीबोर्ड व्यवहार की आवश्यकता होती है। यदि संपादक चित्र अपलोड करते हैं, तो उन्हें वैकल्पिक पाठ के लिए एक आदत की आवश्यकता होती है। यदि विपणक प्रचार ब्लॉक जोड़ते हैं, तो उन्हें विपरीतता और लिंक पाठ की जाँच करनी होती है।

जहाँ संभव हो, संस्करणित टेम्पलेट्स का उपयोग करें। एक निश्चित हेडर, एक मानक फॉर्म ब्लॉक, और एक परीक्षण किया गया मोडल पैटर्न दोहराए गए त्रुटियों को कम करता है। यही एक कारण है कि टीमें जो परवाह करती हैं लॉन्च के बाद वेबसाइट समर्थन अक्सर पहुँचता को बेहतर तरीके से संभालती हैं: काम समर्थन में निर्मित होता है, शिकायतों के बाद पैच नहीं किया जाता।

वास्तविक उपयोगकर्ताओं से प्रतिक्रिया सबसे तेज़ परीक्षण है। एक कीबोर्ड उपयोगकर्ता तीन-आइटम मेनू में जाल को किसी भी ऑडिट टूल से तेज़ी से पाएगा। एक स्क्रीन रीडर उपयोगकर्ता पहले उपयोग पर यह सुनेगा कि क्या एक बटन लेबल समझ में आता है। यदि 2 लोग एक ही अवरोध की रिपोर्ट करते हैं, तो इसे एक पैटर्न की तरह मानें, संयोग नहीं।

एक आखिरी आदत बहुत मदद करती है: पहुँचता जाँचों को प्रत्येक सामग्री अपडेट से जोड़े रखें। यदि एक टीम बिना हेडिंग, लेबल, और मीडिया की जाँच किए एक नया पृष्ठ प्रकाशित करती है, तो साइट धीरे-धीरे पीछे की ओर बढ़ती है। 5 आइटम की एक रखरखाव सूची उस प्रवृत्ति को फैलने से पहले रोक सकती है।