टीमों के लिए सुलभता

अपनी टीम की प्रोसेस में सुलभता को शामिल करने का तरीका.

Rob Dodson

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

याद रखें कि सुलभता सुविधा, टीम की एक कोशिश है. हर व्यक्ति की भूमिका होती है. इस लेख में हर मुख्य विषयों (प्रोजेक्ट मैनेजर, UX डिज़ाइनर, और डेवलपर) की शर्तों के बारे में बताया गया है, ताकि वे अपनी प्रोसेस में सुलभता के सबसे सही तरीकों को शामिल करने पर काम कर सकें.

प्रोजेक्ट मैनेजर

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

• टीम को सुलभता ट्रेनिंग उपलब्ध कराएं.
• साइट या ऐप्लिकेशन पर उपयोगकर्ता की अहम गतिविधियों की पहचान करना.
• टीम की प्रोसेस में सुलभता चेकलिस्ट शामिल करने की कोशिश करें.
• जहां भी हो सके, यूज़र स्टडी की मदद से साइट या ऐप्लिकेशन का आकलन करें.

सुलभता सुविधाओं के इस्तेमाल की ट्रेनिंग

वेब सुलभता के बारे में सीखने के लिए, कई बेहतरीन मुफ़्त संसाधन उपलब्ध हैं. इस विषय को समझने के लिए अपनी टीम को समय दें. इससे, इस प्रोसेस की शुरुआत में ही सुलभता सुविधाओं को आसानी से शामिल किया जा सकता है.

Google के कुछ संसाधनों में ये शामिल हैं:

Google की वेब सुलभता सुविधा — यह कई हफ़्तों तक चलने वाला इंटरैक्टिव ट्रेनिंग कोर्स है.

सुलभता की बुनियादी बातें — लिखित सुलभता गाइड और सबसे सही तरीके.

मटीरियल के लिए दिशा-निर्देश: सुलभता — यह सभी लोगों को ध्यान में रखकर डिज़ाइन किए गए, UX से जुड़े सबसे सही तरीकों का सेट है.

उपयोगकर्ता की गतिविधियों की पहचान करना

हर ऐप्लिकेशन में कुछ न कुछ प्राथमिक कार्रवाई होती है, जो उपयोगकर्ता को करनी होती है. उदाहरण के लिए, अगर कोई ई-कॉमर्स ऐप्लिकेशन बनाया जा रहा है, तो हर उपयोगकर्ता के लिए यह ज़रूरी है कि वह अपने शॉपिंग कार्ट में कोई आइटम जोड़ सके.

कुछ कार्रवाइयां अहम हो सकती हैं और शायद कभी-कभार ही की जाती हैं. उदाहरण के लिए, अवतार फ़ोटो बदलना एक अच्छी सुविधा है, लेकिन हो सकता है कि यह हर अनुभव के लिए अहम न हो.

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

सुलभता चेकलिस्ट शामिल करना

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

सुलभता से जुड़ी कई चेकलिस्ट मौजूद हैं. इन इंडस्ट्री के कुछ उदाहरण यहां दिए गए हैं:

WebAIM WCAG की चेकलिस्ट Vox की सुलभता से जुड़े दिशा-निर्देश

पहले और दूसरी कार्रवाइयों की चेकलिस्ट बनाई जा सकती है, ताकि यह पता लगाया जा सके कि अब भी क्या करना ज़रूरी है. इस प्रोसेस को लेकर काफ़ी सूझ-बूझ से काम लिया जा सकता है और प्राइमरी और सेकंडरी कार्रवाइयों का एक मैट्रिक्स बनाया जा सकता है. साथ ही, उन प्रोसेस के हर चरण के लिए यह भी तय किया जा सकता है कि क्या सुलभता से जुड़ी कोई बिट मौजूद नहीं है.

यूज़र स्टडी की मदद से आकलन करना

आपके ऐप्लिकेशन इस्तेमाल करने वाले लोगों के साथ इंटरैक्ट करने से पहले, उन्हें समझने से बेहतर कुछ भी नहीं होता. अगर आपको मौजूदा वर्शन में सुलभता सुविधाओं को पहले से शामिल करना है, तो यह प्रोसेस उन चीज़ों की तुरंत पहचान करने में आपकी मदद कर सकती है जिनमें सुधार की ज़रूरत है. अगर आप कोई नया प्रोजेक्ट शुरू कर रहे हैं, तो शुरुआती उपयोगकर्ता स्टडी से आपको ऐसी सुविधा बनाने में ज़्यादा समय खर्च करने से बचने में मदद मिल सकती है जिसके इस्तेमाल में मुश्किल हो.

कोशिश करें कि अलग-अलग तरह के उपयोगकर्ताओं से मिले सुझाव, राय या शिकायत को शामिल किया जा सके. उन उपयोगकर्ताओं के बारे में सोचें जो मुख्य रूप से कीबोर्ड से नेविगेट करते हैं या स्क्रीन रीडर या स्क्रीन पर मौजूद कॉन्टेंट को बड़ा करके दिखाने जैसी सहायक टेक्नोलॉजी पर भरोसा करते हैं.

यूएक्स डिज़ाइनर

लोग अपने मापदंडों के हिसाब से ही प्रॉडक्ट बनाते हैं, इसलिए अगर आपमें कोई दिव्यांगता नहीं है और आपके साथ कोई दिव्यांग भी नहीं है, तो हो सकता है कि अनजाने में कुछ ही उपयोगकर्ताओं के लिए डिज़ाइन तैयार किया जा रहा हो. काम करते समय, खुद से पूछें कि "ऐसे कौनसे उपयोगकर्ता हैं जो इस डिज़ाइन पर भरोसा कर सकते हैं?" यहां कुछ ऐसी तरकीबें दी गई हैं जिनका इस्तेमाल करके, अपनी प्रोसेस को ज़्यादा से ज़्यादा लोगों तक पहुंचाया जा सकता है.

• कॉन्टेंट में ज़रूरत के मुताबिक कलर कंट्रास्ट है.
• टैब का क्रम तय होता है.
• कंट्रोल में ऐक्सेस किए जा सकने वाले लेबल होते हैं.
• यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करने के कई तरीके हैं.

कॉन्टेंट में रंगों का कंट्रास्ट अच्छा है

ज़्यादातर साइटों का मुख्य मकसद उपयोगकर्ता को लिखित टेक्स्ट या इमेज के ज़रिए कुछ जानकारी देना होता है. हालांकि, अगर ऐसा कॉन्टेंट कम कंट्रास्ट होता है, तो कुछ लोगों (खास तौर पर, दृष्टि बाधित उपयोगकर्ताओं) को पढ़ना मुश्किल हो सकता है. इससे उपयोगकर्ता के अनुभव पर बुरा असर पड़ सकता है. इस समस्या को हल करने के लिए, कोशिश करें कि सभी टेक्स्ट और इमेज में सही मात्रा में कलर कंट्रास्ट हो.

कंट्रास्ट को मापने के लिए, फ़ोरग्राउंड और बैकग्राउंड के रंग की चमक की तुलना किया जाता है. छोटे टेक्स्ट (18 पॉइंट या 14 पॉइंट से कम बोल्ड) वाले टेक्स्ट के लिए, कम से कम रेशियो 4.5:1 रखने का सुझाव दिया जाता है. टेक्स्ट का साइज़ बड़ा करने के लिए, इस अनुपात को 3:1 पर सेट किया जा सकता है.

नीचे दी गई इमेज में, बाईं ओर का टेक्स्ट इन सबसे कम कंट्रास्ट को पूरा करता है, जबकि दाईं ओर का टेक्स्ट कम कंट्रास्ट है.

कलर कंट्रास्ट को मापने के लिए कई टूल हैं, जैसे कि Google का मटीरियल कलर टूल, Lea Verou का कंट्रास्ट रेशियो ऐप्लिकेशन, और Deque का aXe.

टैब का क्रम तय किया गया

टैब का क्रम, एलिमेंट का वह क्रम होता है जिसमें उपयोगकर्ता के Tab दबाने पर एलिमेंट पर फ़ोकस किया जाता है. मुख्य रूप से कीबोर्ड से नेविगेट करने वाले लोगों के लिए, टैब बटन स्क्रीन पर मौजूद हर चीज़ तक पहुंचने का मुख्य ज़रिया है. इसे उनके माउस कर्सर की तरह समझें.

आम तौर पर, टैब का क्रम इस हिसाब से होना चाहिए कि वह पेज के ऊपर से नीचे की ओर हो और पढ़ने के क्रम में हो. साथ ही, ज़्यादा ज़रूरी आइटम ऊपर की ओर क्रम में दिखने चाहिए. इससे, कीबोर्ड का इस्तेमाल करने वाले किसी भी व्यक्ति के लिए, इन आइटम तक तेज़ी से पहुंचना ज़्यादा आसान हो जाता है.

टैब का क्रम दिखाने के लिए, ऊपर दिए गए मॉक इंटरफ़ेस को नंबर दिया गया है. इस तरह का मॉक बनाने से, सही टैब ऑर्डर की पहचान करने में मदद मिल सकती है. इसके बाद, इसे डेवलपर और QA टेस्टर के साथ शेयर किया जा सकता है, ताकि यह पक्का किया जा सके कि इसे सही तरीके से लागू किया गया है और टेस्ट किया गया है.

कंट्रोल में ऐसे लेबल होते हैं जिन्हें ऐक्सेस किया जा सकता है

स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोगों को लेबल, ऐसी जानकारी देते हैं जो आम तौर पर सिर्फ़ विज़ुअल होती है. उदाहरण के लिए, अगर कोई खोज बटन सिर्फ़ एक मैग्नीफ़ाइंग ग्लास का आइकॉन है, तो उसमें "Search" का ऐक्सेस किया जा सकने वाला लेबल हो सकता है ताकि विज़ुअल की कमी को पूरा किया जा सके.

यहां कुछ आसान सुझाव दिए गए हैं, जिन्हें ऐक्सेस किया जा सकने वाला लेबल डिज़ाइन करते समय अपनाया जा सकता है:

• कम शब्दों का इस्तेमाल करें - लंबे ब्यौरे सुनकर थकान हो सकती है.
• कंट्रोल टाइप या स्थिति को शामिल न करने की कोशिश करें - अगर कंट्रोल को सही तरीके से कोड किया गया है, तो स्क्रीन रीडर अपने-आप इसकी सूचना देगा.
• ऐक्शन क्रिया पर फ़ोकस करें - "खोज" का इस्तेमाल करें, न कि " मैग्नीफ़ाइंग ग्लास".

आपके पास लेबल किए गए सभी कंट्रोल को शामिल करके एक मॉक बनाने का विकल्प होता है. इसे लागू करने और जांच करने के लिए, अपनी डेवलपमेंट टीम और QA टीम के साथ शेयर किया जा सकता है.

यूज़र इंटरफ़ेस (यूआई) के साथ इंटरैक्ट करने और उसे समझने के कई तरीके

यह माना जा सकता है कि सभी उपयोगकर्ता, मुख्य रूप से माउस का इस्तेमाल करके पेज से इंटरैक्ट करते हैं. डिज़ाइन करते समय इस बात पर ध्यान दें कि कोई व्यक्ति कीबोर्ड के बजाय कंट्रोल से कैसे इंटरैक्ट करेगा.

अपने फ़ोकस राज्यों की योजना बनाएं! इसका मतलब यह तय करना है कि जब उपयोगकर्ता टैब से फ़ोकस करता है या ऐरो बटन दबाता है, तब कंट्रोल कैसा दिखेगा. इन राज्यों के बारे में पहले से प्लान बनाना सही होता है, न कि बाद में उन्हें डिज़ाइन में शामिल करने की.

आखिर में, किसी भी इंटरैक्शन के लिए, आपको यह पक्का करना होगा कि उपयोगकर्ता के पास कॉन्टेंट को समझने के कई तरीके हैं. जानकारी देने के लिए सिर्फ़ रंग का इस्तेमाल न करें, क्योंकि हो सकता है कि कलर विज़न की कमी वाले उपयोगकर्ता को ये छोटे-छोटे संकेत न मिलें. इसका एक क्लासिक उदाहरण, अमान्य टेक्स्ट फ़ील्ड है. किसी समस्या को दिखाने के लिए सिर्फ़ लाल अंडरलाइन के बजाय, कुछ हेल्पर टेक्स्ट जोड़ें. इस तरह, आपके पास कई और चीज़ें शामिल करने का विकल्प होगा. इससे, इस बात की संभावना भी बढ़ जाएगी कि लोगों को समस्या के बारे में पता चले.

डेवलपर

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

• टैब का क्रम लॉजिकल होता है.
• फ़ोकस सही तरीके से मैनेज किया जा रहा है और दिख रहा है.
• इंटरैक्टिव एलिमेंट को कीबोर्ड की सुविधा के साथ इस्तेमाल किया जा सकता है.
• ARIA की भूमिकाएं और एट्रिब्यूट ज़रूरत के हिसाब से लागू किए जाते हैं.
• एलिमेंट को ठीक से लेबल किया गया है.
• जांच अपने-आप होती है.

लॉजिकल टैब ऑर्डर

input, button, और select जैसे नेटिव एलिमेंट, टैब ऑर्डर में बिना किसी शुल्क के ऑप्ट इन किए जाते हैं. इन पर कीबोर्ड से अपने-आप फ़ोकस किया जा सकता है. हालांकि, सभी एलिमेंट में एक जैसा व्यवहार नहीं होता! खास तौर पर, div और span जैसे सामान्य एलिमेंट को टैब के क्रम में नहीं चुना जाता. इसका मतलब है कि अगर एक इंटरैक्टिव कंट्रोल बनाने के लिए, div का इस्तेमाल किया जाता है, तो आपको अपने कीबोर्ड को बेहतर बनाने के लिए और काम करना होगा.

इसके दो विकल्प हैं:

• कंट्रोल को tabindex="0" दें. ऐसा करने से, फ़ोकस करने में मदद मिलेगी. हालांकि, कीप्रेस जोड़ने के लिए आपको कुछ और काम करना पड़ सकता है.
• जहां भी हो सके, बटन जैसे किसी भी कंट्रोल के लिए, div या span के बजाय button का इस्तेमाल करें. नेटिव button एलिमेंट को स्टाइल करना बहुत आसान है और इसे कीबोर्ड की सुविधा के लिए मुफ़्त में इस्तेमाल किया जा सकता है.

फ़ोकस मैनेज करना

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

इंटरैक्टिव एलिमेंट के लिए कीबोर्ड सहायता

अगर कैरसेल या ड्रॉपडाउन जैसा कोई कस्टम कंट्रोल बनाया जा रहा है, तो आपको कीबोर्ड की सुविधा जोड़ने के लिए कुछ और काम करना होगा. ARIA ऑथरिंग प्रैक्टिस गाइड एक काम की संसाधन है. इससे अलग-अलग यूज़र इंटरफ़ेस (यूआई) पैटर्न और कीबोर्ड से जुड़ी उन कार्रवाइयों के बारे में पता चलता है जो वे काम कर सकती हैं.

किसी एलिमेंट के साथ कीबोर्ड की सुविधा जोड़ने के बारे में ज़्यादा जानने के लिए, Google के Accessibility Fundamentals दस्तावेज़ों में, टैबइंडेक्स चलाना सेक्शन देखें.

ARIA की भूमिकाएं और एट्रिब्यूट ज़रूरत के हिसाब से लागू किए जाते हैं

कस्टम कंट्रोल के लिए न सिर्फ़ कीबोर्ड से जुड़ी सहायता की ज़रूरत होती है, बल्कि सही मतलब भी होते हैं. दरअसल, शब्द के हिसाब से div, सिर्फ़ एक सामान्य ग्रुपिंग कंटेनर है. अगर ड्रॉपडाउन मेन्यू को आधार बनाने के लिए div का इस्तेमाल किया जा रहा है, तो अतिरिक्त सिमैंटिक जोड़ने के लिए आपको ARIA पर भरोसा करना होगा, ताकि कंट्रोल टाइप को सहायक टेक्नोलॉजी की जानकारी दी जा सके. यहां ARIA से लिखने के तरीकों की गाइड की मदद से यह पता लगाया जा सकता है कि आपको किन भूमिकाओं, स्थितियों, और प्रॉपर्टी का इस्तेमाल करना चाहिए. एक अतिरिक्त बोनस के रूप में, ARIA गाइड में दिए गए कई एक्सप्लेनेशंस में सैंपल कोड भी शामिल होता है!

एलिमेंट को लेबल करना

नेटिव इनपुट को लेबल करने के लिए, पहले से मौजूद <label> एलिमेंट का इस्तेमाल किया जा सकता है, जैसा कि एमडीएन पर बताया गया है. इससे आपको न सिर्फ़ स्क्रीन पर विज़ुअल इफ़ेक्ट बनाने में मदद मिलेगी, बल्कि यह इनपुट को सुलभता ट्री में एक आसानी से समझ आने वाला नाम भी दे पाएगा. इसके बाद, स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी इस्तेमाल करके, उपयोगकर्ता को यह नाम दिया जाता है.

माफ़ करें, <label> कस्टम कंट्रोल को ऐक्सेस किया जा सकने वाला नाम देने की सुविधा नहीं देता. जैसे, कस्टम एलिमेंट या आसान divs और spans का इस्तेमाल करके बनाए गए कंट्रोल. इस तरह के कंट्रोल के लिए, आपको aria-label और aria-labelledby एट्रिब्यूट का इस्तेमाल करना होगा.

ऑटोमेटेड टेस्टिंग

आलसी होना अच्छा हो सकता है, खासकर जब बात परीक्षण की हो. जहां भी मुमकिन हो, अपने सुलभता टेस्ट को ऑटोमेट करें, ताकि आपको हर काम मैन्युअल रूप से न करना पड़े. सुलभता से जुड़ी सामान्य समस्याओं का पता लगाना आसान और तेज़ बनाने के लिए, आज-कल कई बेहतरीन इंडस्ट्री टेस्टिंग टूल मौजूद हैं:

Deque सिस्टम के ज़रिए बनाया गया aXe, Chrome एक्सटेंशन और नोड मॉड्यूल के तौर पर उपलब्ध है. यह लगातार इंटिग्रेशन के लिए बेहतर है. इस छोटे से A11ycast में aXe को अपनी डेवलपमेंट प्रोसेस में शामिल करने के कुछ अलग-अलग तरीके बताए गए हैं.

Lighthouse, Google का ओपन सोर्स प्रोजेक्ट है. इसकी मदद से, प्रोग्रेसिव वेब ऐप्लिकेशन की परफ़ॉर्मेंस का ऑडिट किया जाता है. आपके PWA में सर्विस वर्कर और वेब ऐप्लिकेशन मेनिफ़ेस्ट जैसी चीज़ों की सुविधा है या नहीं, इसकी जांच करने के अलावा, Lighthouse सबसे सही तरीकों की एक सीरीज़ भी चलाएगा, जिसमें सुलभता समस्याओं के टेस्ट भी शामिल हैं.

नतीजा

सुलभता टीम की कोशिश है. हर किसी की भूमिका होती है. इस गाइड में कुछ अहम चीज़ों के बारे में बताया गया है, जिनका इस्तेमाल करके टीम का हर सदस्य उस विषय पर जल्द से जल्द कार्रवाई कर सकता है. इससे हमें उम्मीद है कि इससे उनके ऐप्लिकेशन का अनुभव भी बेहतर होगा.

सुलभता के बारे में ज़्यादा जानने के लिए, Udacity का मुफ़्त कोर्स देखना न भूलें और यहां web.dev पर उपलब्ध सुलभता दस्तावेज़ ब्राउज़ करें.