अपनी टीम की प्रोसेस में सुलभता को शामिल करने का तरीका.
अपनी साइट को ज़्यादा से ज़्यादा लोगों तक पहुंचाना काफ़ी मुश्किल काम हो सकता है. अगर आपने पहली बार सुलभता के बारे में सोचा है, तो इस विषय के बारे में इतना कुछ है कि आपको यह तय करने में मुश्किल हो सकती है कि कहां से शुरू करें. आखिरकार, अलग-अलग तरह की विकलांगताओं के हिसाब से काम करने का मतलब है कि आपको अलग-अलग तरह की समस्याओं पर भी ध्यान देना होगा.
याद रखें कि सुलभता को बेहतर बनाने के लिए, सभी की ज़रूरत होती है. हर व्यक्ति की एक भूमिका होती है. इस लेख में, प्रोजेक्ट मैनेजर, UX डिज़ाइनर, और डेवलपर जैसे हर मुख्य डिसिप्लिन के लिए ज़रूरी शर्तों के बारे में बताया गया है. इससे वे अपनी प्रोसेस में, सुलभता के सबसे सही तरीकों को शामिल कर सकते हैं.
प्रोजेक्ट मैनेजर
किसी भी प्रोजेक्ट मैनेजर का मुख्य लक्ष्य यह होता है कि वह हर माइलस्टोन में सुलभता से जुड़े काम को शामिल करने की कोशिश करे. साथ ही, यह पक्का करे कि परफ़ॉर्मेंस और उपयोगकर्ता अनुभव जैसे अन्य विषयों की तरह ही, सुलभता को भी प्राथमिकता दी जाए. यहां कुछ चेकलिस्ट आइटम दिए गए हैं. इन्हें प्रोसेस के दौरान ध्यान में रखें.
- टीम के लिए सुलभता से जुड़ी ट्रेनिंग उपलब्ध कराएं.
- साइट या ऐप्लिकेशन में उपयोगकर्ताओं की अहम गतिविधियों की पहचान करें.
- टीम की प्रोसेस में, सुलभता से जुड़ी चेकलिस्ट शामिल करें.
- जहां भी हो सके, उपयोगकर्ताओं के अनुभवों पर आधारित अध्ययन की मदद से साइट या ऐप्लिकेशन का आकलन करें.
सुलभता से जुड़ी ट्रेनिंग
वेब की सुलभता के बारे में जानने के लिए, कई बेहतरीन और मुफ़्त संसाधन उपलब्ध हैं. अपनी टीम के लिए इस विषय को पढ़ने के लिए समय निकालने से, प्रोसेस के शुरुआती चरणों में ही सुलभता को शामिल करना आसान हो जाता है.
Google के कुछ रिसॉर्स में ये शामिल हैं:
Google की ओर से वेब की सुलभता — यह कई हफ़्तों का इंटरैक्टिव ट्रेनिंग कोर्स है.
सुलभता के बुनियादी दिशा-निर्देश — सुलभता से जुड़ी गाइड और सबसे सही तरीके.
मटीरियल के लिए दिशा-निर्देश: सुलभता — सभी के लिए डिज़ाइन करने के लिए, यूज़र एक्सपीरियंस के सबसे सही तरीकों का एक सेट.
उपयोगकर्ता की अहम यात्राओं की पहचान करना
हर ऐप्लिकेशन में कोई मुख्य कार्रवाई होती है, जिसे उपयोगकर्ता को करना होता है. उदाहरण के लिए, अगर कोई ई-कॉमर्स ऐप्लिकेशन बनाया जा रहा है, तो हर उपयोगकर्ता को अपने शॉपिंग कार्ट में कोई आइटम जोड़ना होगा.
कुछ कार्रवाइयां कम अहमियत की हो सकती हैं और शायद इन्हें कभी-कभी ही किया जाता हो. उदाहरण के लिए, अवतार की फ़ोटो बदलने की सुविधा अच्छी है, लेकिन यह हर अनुभव के लिए ज़रूरी नहीं हो सकती.
अपने ऐप्लिकेशन में मुख्य और सेकंडरी ऐक्शन की पहचान करने से, आपको सुलभता से जुड़े कामों को प्राथमिकता देने में मदद मिलेगी. बाद में, इन कार्रवाइयों को सुलभता से जुड़ी चेकलिस्ट के साथ जोड़ा जा सकता है, ताकि अपनी प्रोग्रेस पर नज़र रखी जा सके और ऐप्लिकेशन के परफ़ॉर्मेंस में गिरावट न आए.
सुलभता से जुड़ी चेकलिस्ट शामिल करना
सुलभता का विषय काफ़ी बड़ा है. इसलिए, ज़रूरी बातों की सूची बनाकर, यह पक्का किया जा सकता है कि आपने सभी बातों को ध्यान में रखा है.
सुलभता से जुड़ी कई चेकलिस्ट उपलब्ध हैं. इंडस्ट्री के कुछ उदाहरणों में ये शामिल हैं:
WebAIM WCAG चेकलिस्ट Vox की सुलभता से जुड़ी गाइडलाइन
चेकलिस्ट की मदद से, अपने प्राइमरी और सेकंडरी ऐक्शन देखे जा सकते हैं. इससे यह तय किया जा सकता है कि कौनसा काम अभी करना बाकी है. इस प्रोसेस के बारे में रणनीतिक तरीके से सोचा जा सकता है. साथ ही, प्राइमरी और सेकंडरी ऐक्शन का मैट्रिक भी बनाया जा सकता है. साथ ही, उन प्रोसेस के हर चरण के लिए यह तय किया जा सकता है कि क्या ऐक्सेस करने से जुड़ी कोई जानकारी मौजूद नहीं है.
यूज़र स्टडी की मदद से आकलन करना
ऐक्सेस करने की सुविधा को किसी मौजूदा ऐप्लिकेशन में जोड़ने के लिए, ऐप्लिकेशन इस्तेमाल करने वाले लोगों के साथ बैठकर उनके अनुभव को समझना सबसे बेहतर तरीका है. इससे आपको उन जगहों की तुरंत पहचान करने में मदद मिल सकती है जहां सुधार की ज़रूरत है. अगर कोई नया प्रोजेक्ट शुरू किया जा रहा है, तो उपयोगकर्ता स्टडी की मदद से, ऐसी सुविधा बनाने में ज़्यादा समय बर्बाद होने से बचा जा सकता है जिसका इस्तेमाल करना मुश्किल हो.
ज़्यादा से ज़्यादा उपयोगकर्ताओं से सुझाव, शिकायत या राय मांगें. उन उपयोगकर्ताओं पर ध्यान दें जो मुख्य रूप से कीबोर्ड का इस्तेमाल करके नेविगेट करते हैं या स्क्रीन रीडर या स्क्रीन ज़ूमर जैसी सहायक टेक्नोलॉजी का इस्तेमाल करते हैं.
यूएक्स डिज़ाइनर
लोग अपने अनुभव के आधार पर डिज़ाइन करते हैं. अगर आपके पास कोई दिव्यांगता नहीं है और आपके साथ काम करने वाले लोगों में भी कोई दिव्यांग नहीं है, तो हो सकता है कि आपने अनजाने में अपने डिज़ाइन सिर्फ़ कुछ उपयोगकर्ताओं के लिए बनाए हों. काम करते समय, अपने-आप से पूछें कि "किस तरह के उपयोगकर्ता इस डिज़ाइन का इस्तेमाल कर सकते हैं?" यहां कुछ ऐसी तकनीकें दी गई हैं जिनकी मदद से, अपनी प्रोसेस को ज़्यादा समावेशी बनाया जा सकता है.
- कॉन्टेंट में रंगों का कंट्रास्ट काफ़ी है.
- टैब का क्रम तय किया गया हो.
- कंट्रोल के लिए सुलभ लेबल मौजूद हैं.
- यूज़र इंटरफ़ेस (यूआई) के साथ इंटरैक्ट करने के कई तरीके हैं.
कॉन्टेंट में अच्छा कलर कंट्रास्ट है
ज़्यादातर साइटों का मुख्य मकसद, उपयोगकर्ता को लिखित टेक्स्ट या इमेज के ज़रिए कोई जानकारी देना होता है. हालांकि, अगर इस कॉन्टेंट का कंट्रास्ट कम है, तो हो सकता है कि कुछ लोगों (खास तौर पर, जिनकी आंखों की रोशनी कम है) को इसे पढ़ने में मुश्किल हो. इससे उनके उपयोगकर्ता अनुभव पर बुरा असर पड़ सकता है. इस समस्या को हल करने के लिए, सभी टेक्स्ट और इमेज के रंगों में ज़रूरत के मुताबिक कंट्रास्ट होना चाहिए.
कंट्रास्ट को मेज़र करने के लिए, फ़ोरग्राउंड और बैकग्राउंड के रंग की चमक की तुलना की जाती है. छोटे टेक्स्ट (18 पॉइंट या 14 पॉइंट के बोल्ड टेक्स्ट से कम) के लिए, कम से कम 4.5:1 का अनुपात रखने का सुझाव दिया जाता है. बड़े टेक्स्ट के लिए, इस अनुपात को 3:1 पर सेट किया जा सकता है.
नीचे दी गई इमेज में, बाईं ओर मौजूद टेक्स्ट का कंट्रास्ट, तय किए गए कम से कम कंट्रास्ट के मुताबिक है. वहीं, दाईं ओर मौजूद टेक्स्ट का कंट्रास्ट कम है.
कलर कंट्रास्ट को मेज़र करने के लिए कई टूल उपलब्ध हैं. जैसे, Google का Material Color Tool, Lea Verou का Contrast Ratio ऐप्लिकेशन, और Deque का aXe.
टैब का क्रम तय किया गया है
टैब ऑर्डर वह क्रम होता है जिसमें उपयोगकर्ता के टैब बटन दबाने पर, एलिमेंट पर फ़ोकस होता है. जो उपयोगकर्ता मुख्य रूप से कीबोर्ड का इस्तेमाल करके नेविगेट करते हैं उनके लिए, स्क्रीन पर मौजूद हर चीज़ पर जाने का मुख्य तरीका, Tab बटन है. इसे उनके माउस कर्सर की तरह समझें.
आम तौर पर, टैब का क्रम पढ़ने के क्रम के हिसाब से होना चाहिए. साथ ही, यह पेज के सबसे ऊपर से नीचे की ओर होना चाहिए. इसमें ज़्यादा ज़रूरी आइटम, क्रम में सबसे ऊपर दिखने चाहिए. इससे कीबोर्ड का इस्तेमाल करने वाले लोग, इन आइटम तक तेज़ी से पहुंच सकते हैं.
टैब के क्रम को दिखाने के लिए, ऊपर दिए गए मॉक इंटरफ़ेस को नंबर दिया गया है. इस तरह का मॉकअप बनाकर, टैब के क्रम की पहचान की जा सकती है. इसके बाद, इसे डेवलपर और क्वालिटी एश्योरेंस टेस्टर के साथ शेयर किया जा सकता है, ताकि यह पक्का किया जा सके कि इसे सही तरीके से लागू किया गया है और इसकी जांच की गई है.
कंट्रोल के लिए सुलभ लेबल उपलब्ध हैं
स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोगों के लिए, लेबल से ऐसी जानकारी मिलती है जो आम तौर पर सिर्फ़ विज़ुअल के ज़रिए मिलती है. उदाहरण के लिए, अगर खोज बटन सिर्फ़ एक मैग्नीफ़ाइंग ग्लास आइकॉन है, तो उस पर "खोजें" का लेबल जोड़ा जा सकता है. इससे, विज़ुअल अवर्डेंस की कमी को पूरा करने में मदद मिलती है.
सुलभ लेबल डिज़ाइन करते समय, इन आसान सुझावों का पालन करें:
- कम शब्दों में लिखें - लंबी जानकारी सुनना मुश्किल हो सकता है.
- कंट्रोल टाइप या स्टेटस शामिल न करें - अगर कंट्रोल को सही तरीके से कोड किया गया है, तो स्क्रीन रीडर अपने-आप इसकी जानकारी देगा.
- क्रियाओं के बारे में बताने वाले शब्दों पर फ़ोकस करें - "खोजें" का इस्तेमाल करें, न कि "मैग्नीफ़ाइंग ग्लास" का.
अपने सभी कंट्रोल के लेबल के साथ एक मॉक बनाएं. इसे लागू करने और टेस्ट करने के लिए, अपनी डेवलपर टीम और क्यूए टीम के साथ शेयर किया जा सकता है.
यूज़र इंटरफ़ेस (यूआई) के साथ इंटरैक्ट करने और उसे समझने के कई तरीके
यह मान लेना आसान है कि सभी उपयोगकर्ता मुख्य रूप से माउस का इस्तेमाल करके पेज से इंटरैक्ट करते हैं. डिज़ाइन करते समय, इस बात का ध्यान रखें कि कोई व्यक्ति कीबोर्ड का इस्तेमाल करके, कंट्रोल के साथ कैसे इंटरैक्ट करेगा.
फ़ोकस स्टेटस प्लान करें! इसका मतलब है कि यह तय करना कि जब उपयोगकर्ता टैब का इस्तेमाल करके या ऐरो बटन दबाकर किसी कंट्रोल पर फ़ोकस करेगा, तो वह कैसा दिखेगा. इन स्थितियों को डिज़ाइन में बाद में शामिल करने के बजाय, पहले से प्लान करना फ़ायदेमंद होता है.
आखिर में, यह पक्का करना ज़रूरी है कि किसी भी इंटरैक्शन के लिए, उपयोगकर्ता के पास कॉन्टेंट को समझने के कई तरीके हों. जानकारी देने के लिए, सिर्फ़ रंग का इस्तेमाल न करें. ऐसा इसलिए, क्योंकि रंगों को ठीक से न देखने वाले उपयोगकर्ता को ये बारीक संकेत नहीं मिल सकते. अमान्य टेक्स्ट फ़ील्ड इसका एक अच्छा उदाहरण है. किसी समस्या के बारे में बताने के लिए, सिर्फ़ लाल रंग से अंडरलाइन करने के बजाय, कुछ मददगार टेक्स्ट भी जोड़ें. इस तरह, ज़्यादा लोगों तक पहुंचने में मदद मिलती है. साथ ही, इस बात की संभावना बढ़ जाती है कि उपयोगकर्ता को समस्या का पता चलेगा.
डेवलपर
डेवलपर की भूमिका में फ़ोकस मैनेजमेंट और सेमेटिक्स को मिलाकर, उपयोगकर्ता अनुभव को बेहतर बनाया जाता है. यहां कुछ चीज़ों के बारे में बताया गया है जिन्हें डेवलपर अपनी साइट या ऐप्लिकेशन पर काम करते समय ध्यान में रख सकते हैं:
- टैब का क्रम लॉजिकल हो.
- फ़ोकस को सही तरीके से मैनेज किया गया हो और वह दिख रहा हो.
- इंटरैक्टिव एलिमेंट में कीबोर्ड की सुविधा काम करती है.
- ARIA भूमिकाएं और एट्रिब्यूट, ज़रूरत के हिसाब से लागू किए जाते हैं.
- एलिमेंट सही तरीके से लेबल किए गए हैं.
- टेस्टिंग अपने-आप होती है.
टैब का लॉजिकल क्रम
input, button, और select जैसे नेटिव एलिमेंट, टैब ऑर्डर में बिना किसी शुल्क के शामिल हो जाते हैं. साथ ही, कीबोर्ड की मदद से इन पर अपने-आप फ़ोकस किया जा सकता है. हालांकि, सभी एलिमेंट के लिए ऐसा नहीं होता! खास तौर पर, div और span जैसे सामान्य एलिमेंट, टैब ऑर्डर में शामिल नहीं किए जाते. इसका मतलब है कि अगर इंटरैक्टिव कंट्रोल बनाने के लिए div का इस्तेमाल किया जाता है, तो आपको कीबोर्ड से ऐक्सेस करने के लिए कुछ और काम करने होंगे.
इसके दो विकल्प हैं:
- कंट्रोल को
tabindex="0"दें. इससे कम से कम, उस पर फ़ोकस किया जा सकेगा. हालांकि, कीस्ट्रोक के लिए सहायता जोड़ने के लिए, आपको ज़्यादा काम करना पड़ सकता है. - जहां भी हो सके, बटन जैसे किसी भी कंट्रोल के लिए,
divयाspanके बजायbuttonका इस्तेमाल करें. नेटिवbuttonएलिमेंट को स्टाइल करना बहुत आसान है. साथ ही, इसे बिना किसी शुल्क के कीबोर्ड की सुविधा मिलती है.
फ़ोकस मैनेज करना
पेज का कॉन्टेंट बदलते समय, फ़ोकस को एक जगह से दूसरी जगह ले जाकर उपयोगकर्ता का ध्यान खींचना ज़रूरी है. यह तकनीक तब काम आती है, जब कोई मॉडल डायलॉग खोला जाता है. अगर कोई उपयोगकर्ता डायलॉग खोलने के लिए, कीबोर्ड पर बटन दबाता है और उसका फ़ोकस डायलॉग एलिमेंट पर नहीं जाता है, तो उसे पूरी साइट पर टैब करके, तब तक जाना होगा, जब तक उसे नया कंट्रोल न मिल जाए. नया कॉन्टेंट दिखने पर, फ़ोकस को उस पर तुरंत ले जाकर, इन उपयोगकर्ताओं के अनुभव को बेहतर बनाया जा सकता है.
इंटरैक्टिव एलिमेंट के लिए कीबोर्ड की सुविधा
अगर आपको कैरसेल या ड्रॉपडाउन जैसा कस्टम कंट्रोल बनाना है, तो कीबोर्ड की सुविधा जोड़ने के लिए आपको कुछ और काम करने होंगे. एआरआई लेखन के तरीकों की गाइड एक ऐसा संसाधन है जिसमें यूज़र इंटरफ़ेस (यूआई) के अलग-अलग पैटर्न और उन पर कीबोर्ड से की जाने वाली कार्रवाइयों के बारे में बताया गया है.
किसी एलिमेंट में कीबोर्ड की सुविधा जोड़ने के बारे में ज़्यादा जानने के लिए, Google के सुलभता के बुनियादी सिद्धांतों के दस्तावेज़ों में, रोविंग टैब इंडेक्स सेक्शन देखें.
ज़रूरत के हिसाब से ARIA रोल और एट्रिब्यूट लागू किए गए हैं
कस्टम कंट्रोल के लिए, कीबोर्ड के साथ-साथ सही सेमैंटिक की भी ज़रूरत होती है. आखिरकार, div, सेमेटिक तौर पर, सिर्फ़ एक सामान्य ग्रुपिंग वाला कंटेनर है. अगर ड्रॉपडाउन मेन्यू के आधार के तौर पर div का इस्तेमाल किया जा रहा है, तो आपको ज़्यादा सेमेटिक्स को लेयर करने के लिए, ARIA पर भरोसा करना होगा, ताकि सहायक टेक्नोलॉजी को कंट्रोल टाइप बताया जा सके. यहां भी, एआरआई एडिटिंग के सबसे सही तरीकों की गाइड से आपको यह पता लगाने में मदद मिल सकती है कि आपको किन रोल, स्टेटस, और प्रॉपर्टी का इस्तेमाल करना चाहिए.
बोनस के तौर पर, ARIA गाइड में दी गई कई जानकारी के साथ, सैंपल कोड भी दिया गया है!
एलिमेंट लेबल करना
नेटिव इनपुट को लेबल करने के लिए, MDN पर बताए गए तरीके के मुताबिक, पहले से मौजूद <label> एलिमेंट का इस्तेमाल किया जा सकता है. इससे आपको स्क्रीन पर विज़ुअल ऐफ़र्डेंस बनाने में मदद मिलेगी. साथ ही, सुलभता ट्री में इनपुट को सुलभ नाम भी मिलेगा. इसके बाद, स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी इस नाम को चुनती है और उपयोगकर्ता को पढ़कर सुनाती है.
माफ़ करें, <label> में कस्टम कंट्रोल (जैसे, कस्टम एलिमेंट या सामान्य डाइव और स्पैन का इस्तेमाल करके बनाए गए कंट्रोल) को ऐक्सेस किया जा सकने वाला नाम देने की सुविधा उपलब्ध नहीं है. इस तरह के कंट्रोल के लिए, आपको aria-label और aria-labelledby एट्रिब्यूट का इस्तेमाल करना होगा.
अपने-आप होने वाली जांच
आलस करना अच्छा हो सकता है. खास तौर पर, टेस्टिंग के मामले में. जहां भी हो सके, सुलभता जांच को ऑटोमेट करें, ताकि आपको हर काम मैन्युअल तरीके से न करना पड़े. आज इंडस्ट्री में, ऐक्सेस करने से जुड़ी सामान्य समस्याओं की जांच करने के लिए कई बेहतरीन टूल उपलब्ध हैं. इनकी मदद से, जांच को आसानी से और तेज़ी से किया जा सकता है:
Deque systems ने aXe को बनाया है. यह Chrome एक्सटेंशन और Node मॉड्यूल के तौर पर उपलब्ध है. यह लगातार इंटिग्रेशन एनवायरमेंट के लिए अच्छा है. इस छोटे A11ycast में, डेवलपमेंट प्रोसेस में aXe को शामिल करने के कुछ अलग-अलग तरीकों के बारे में बताया गया है.
Lighthouse, Google का एक ओपन सोर्स प्रोजेक्ट है. इसका इस्तेमाल, आपके प्रोग्रेसिव वेब ऐप्लिकेशन की परफ़ॉर्मेंस की जांच करने के लिए किया जाता है. Lighthouse यह जांच करेगा कि आपके PWA में Service Worker और वेब ऐप्लिकेशन मेनिफ़ेस्ट जैसी सुविधाएं काम करती हैं या नहीं. साथ ही, Lighthouse सबसे सही तरीके से टेस्ट करने की कई प्रक्रियाएं भी चलाएगा. इनमें सुलभता से जुड़ी समस्याओं के लिए टेस्ट भी शामिल हैं.
नतीजा
सुलभता सुविधाओं को बेहतर बनाने के लिए, सभी की ज़रूरी होती है. इसमें सभी की भूमिका है. इस गाइड में कुछ अहम बातों के बारे में बताया गया है. इनका इस्तेमाल करके, टीम के हर सदस्य को इस विषय के बारे में तेज़ी से जानकारी मिल सकती है. इससे, उम्मीद है कि वह अपने ऐप्लिकेशन के अनुभव को बेहतर बना पाएगा.
सुलभता के बारे में ज़्यादा जानने के लिए, Udacity पर उपलब्ध हमारा मुफ़्त कोर्स देखें. साथ ही, web.dev पर उपलब्ध सुलभता से जुड़े दस्तावेज़ ब्राउज़ करें.