सुलभता के बारे में समीक्षा करने का तरीका

Rob Dodson

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

इस पोस्ट में, इन समस्याओं को सिलसिलेवार तरीके से बताया गया है. इससे, किसी मौजूदा साइट को सुलभता के लिहाज़ से समीक्षा करने में मदद मिलती है.

कीबोर्ड से शुरू करना

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

कीबोर्ड का बेहतर अनुभव देने के लिए, टैब का क्रम सही रखें और फ़ोकस स्टाइल को साफ़ तौर पर दिखाएं.

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

  • कस्टम इंटरैक्टिव कंट्रोल पर फ़ोकस किया जा सकता हो. अगर किसी <div> को बेहतरीन ड्रॉप-डाउन में बदलने के लिए, JavaScript का इस्तेमाल किया जाता है, तो वह टैब ऑर्डर में अपने-आप नहीं जुड़ेगा. कस्टम कंट्रोल को फ़ोकस किया जा सकने वाला बनाने के लिए, उसे tabindex="0" दें. tabindex की वैल्यू को 0 से ज़्यादा पर सेट करने पर, टैब का क्रम बदल जाता है. साथ ही, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों को भ्रम हो सकता है.

  • सिर्फ़ इंटरैक्टिव कॉन्टेंट को फ़ोकस किया जा सकता है. हेडिंग जैसे नॉन-इंटरैक्टिव एलिमेंट में tabindex जोड़ने से, स्क्रीन देखने वाले कीबोर्ड का इस्तेमाल करने वाले लोगों की प्रोसेस धीमी हो जाती है. साथ ही, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों को भी इससे कोई फ़ायदा नहीं मिलता, क्योंकि स्क्रीन रीडर को पहले से ही इन एलिमेंट के बारे में पता होता है.

  • अगर किसी पेज पर नया कॉन्टेंट जोड़ा जाता है, तो उपयोगकर्ता का ध्यान सबसे पहले उस कॉन्टेंट पर ले जाएं, ताकि वह उस पर कार्रवाई कर सके. उदाहरणों के लिए, पेज लेवल पर फ़ोकस मैनेज करना देखें.

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

फ़ोकस कंट्रोल को इस्तेमाल करने लायक बनाना

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

ऑफ़स्क्रीन कॉन्टेंट मैनेज करना

कई साइटों पर ऑफ़स्क्रीन कॉन्टेंट होता है, जो डीओएम में मौजूद होता है, लेकिन दिखता नहीं है. जैसे, रिस्पॉन्सिव ड्रॉअर मेन्यू में मौजूद लिंक या मोडल विंडो में मौजूद ऐसा बटन जो अब तक नहीं दिखाया गया है. इन एलिमेंट को DOM में छोड़ने से, कीबोर्ड का इस्तेमाल करने में परेशानी हो सकती है. खास तौर पर, स्क्रीन रीडर के लिए, जो ऑफ़स्क्रीन कॉन्टेंट को पेज का हिस्सा बताता है.

इन एलिमेंट को मैनेज करने के बारे में सलाह पाने के लिए, ऑफ़स्क्रीन कॉन्टेंट मैनेज करना देखें.

स्क्रीन रीडर की मदद से जांच करना

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

अगर आपको नहीं पता कि सहायक टेक्नोलॉजी, सेमेंटिक मार्कअप का विश्लेषण कैसे करती है, तो कॉन्टेंट का स्ट्रक्चर लेख पढ़ें.

  • सभी इमेज में alt टेक्स्ट सही है या नहीं, इसकी जांच करें. हालांकि, अगर इमेज मुख्य तौर पर प्रज़ेंटेशन के लिए हैं और कॉन्टेंट का ज़रूरी हिस्सा नहीं हैं, तो इन्हें अपलोड किया जा सकता है. स्क्रीन रीडर को किसी इमेज को स्किप करने के लिए, वैल्यू को खाली स्ट्रिंग पर सेट करें: alt="".
  • किसी लेबल के लिए सभी कंट्रोल देखें. कस्टम कंट्रोल के लिए, aria-label या aria-labelledby का इस्तेमाल करना पड़ सकता है. उदाहरणों के लिए, एआरआई लेबल और संबंध देखें.
  • सभी कस्टम कंट्रोल में सही role और ज़रूरी ARIA एट्रिब्यूट देखें, जो उनकी स्थिति के बारे में बताते हैं. उदाहरण के लिए, कस्टम चेकबॉक्स की स्थिति को सही तरीके से बताने के लिए, role="checkbox" और aria-checked="true|false" की ज़रूरत होती है. एरिया के बारे में जानकारी देखें. इससे आपको यह जानकारी मिलेगी कि एरिया, कस्टम कंट्रोल के लिए, सेमेटिक्स की जानकारी कैसे दे सकता है.
  • अपने पेज पर जानकारी को व्यवस्थित तरीके से दिखाएं. स्क्रीन रीडर, पेज पर डीओएम के क्रम में नेविगेट करते हैं. इसलिए, वे उन सभी एलिमेंट का एलान करेंगे जिन्हें आपने सीएसएस का इस्तेमाल करके, विज़ुअल तौर पर गलत क्रम में रखा है. अगर आपको किसी एलिमेंट को पेज पर पहले दिखाना है, तो उसे DOM में पहले ले जाएं.
  • पेज पर मौजूद सभी कॉन्टेंट के लिए, स्क्रीन रीडर नेविगेशन की सुविधा उपलब्ध कराएं. पक्का करें कि साइट के किसी भी सेक्शन को हमेशा के लिए छिपाया या स्क्रीन रीडर के ऐक्सेस से ब्लॉक न किया गया हो.
    • अगर किसी कॉन्टेंट को स्क्रीन रीडर से छिपाना है, तो उस कॉन्टेंट को aria-hidden="true" पर सेट करें. उदाहरण के लिए, अगर वह कॉन्टेंट स्क्रीन पर नहीं दिखता है या सिर्फ़ प्रज़ेंटेशन के लिए है. ज़्यादा जानकारी के लिए, कॉन्टेंट छिपाना लेख पढ़ें.

स्क्रीन रीडर के बारे में जानकारी

स्क्रीन रीडर का इस्तेमाल करना मुश्किल लग सकता है, लेकिन असल में ये काफ़ी उपयोगकर्ता-अनुकूल होते हैं. आम तौर पर, ज़्यादातर डेवलपर को सिर्फ़ कुछ आसान की कमांड का इस्तेमाल करना पड़ता है.

अगर आपके पास Mac है, तो Mac OS के साथ आने वाले स्क्रीन रीडर VoiceOver के बारे में यह वीडियो देखें. अगर आपके पास पीसी है, तो NVDA के बारे में यह वीडियो देखें. यह Windows के लिए, दान पर आधारित ओपन-सोर्स स्क्रीन रीडर है.

aria-hidden कीबोर्ड फ़ोकस को रोकता नहीं है

यह समझना ज़रूरी है कि ARIA का असर सिर्फ़ किसी एलिमेंट के सेमांटिक्स पर पड़ सकता है. इसका असर एलिमेंट के काम करने के तरीके पर नहीं पड़ता. aria-hidden="true" का इस्तेमाल करके, किसी एलिमेंट को स्क्रीन रीडर से छिपाया जा सकता है. हालांकि, इससे उस एलिमेंट के फ़ोकस होने के तरीके में कोई बदलाव नहीं होता. ऑफ़स्क्रीन इंटरैक्टिव कॉन्टेंट के लिए, inert एट्रिब्यूट का इस्तेमाल करें. इससे यह पक्का किया जा सकेगा कि उसे कीबोर्ड फ़्लो से हटा दिया गया है. पुराने ब्राउज़र के लिए, aria-hidden="true" को tabindex="-1" के साथ जोड़ें.

इंटरैक्टिव एलिमेंट में उनके मकसद और स्थिति की जानकारी होनी चाहिए

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

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

हेडिंग और लैंडमार्क का फ़ायदा लेना

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

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

  • h1-h6 हैरारकी का इस्तेमाल करें. हेडिंग को अपने पेज का आउटलाइन बनाने के टूल के तौर पर देखें. हेडिंग की पहले से मौजूद स्टाइल पर भरोसा न करें. इसके बजाय, उनका इस्तेमाल ऐसे करें जैसे वे सभी एक ही साइज़ के हों. साथ ही, मुख्य, सेकंडरी, और तीसरे लेवल के कॉन्टेंट के लिए, सही लेवल का इस्तेमाल करें. इसके बाद, शीर्षकों को अपने डिज़ाइन से मैच करने के लिए सीएसएस का इस्तेमाल करें.
  • लैंडमार्क एलिमेंट और भूमिकाओं का इस्तेमाल करें, ताकि उपयोगकर्ता बार-बार दिखने वाले कॉन्टेंट को बायपास कर सकें. कई सहायक टेक्नोलॉजी, पेज के खास हिस्सों पर जाने के लिए शॉर्टकट उपलब्ध कराती हैं. जैसे, <main> या <nav> एलिमेंट से तय किए गए हिस्से. इन एलिमेंट में, लैंडमार्क की भूमिकाएं पहले से मौजूद होती हैं. <div role="search"> की तरह, पेज पर क्षेत्रों की जानकारी देने के लिए, ARIA role एट्रिब्यूट का भी इस्तेमाल किया जा सकता है. ज़्यादा उदाहरणों के लिए, सेमांटिक और कॉन्टेंट पर नेविगेट करना देखें.
  • role="application" का इस्तेमाल तब तक न करें, जब तक आपके पास इसका इस्तेमाल करने का अनुभव न हो. application लैंडमार्क की भूमिका, सहायक टेक्नोलॉजी को अपने शॉर्टकट बंद करने और पेज पर सभी बटन दबाने की जानकारी देती है. इसका मतलब है कि स्क्रीन रीडर के उपयोगकर्ता, आम तौर पर पेज पर जाने के लिए जिन बटन का इस्तेमाल करते हैं वे अब काम नहीं करेंगे. साथ ही, आपको कीबोर्ड को मैनेज करने के सभी तरीके खुद लागू करने होंगे.

स्क्रीन रीडर की मदद से हेडिंग और लैंडमार्क देखना

VoiceOver और NVDA जैसे स्क्रीन रीडर, पेज पर मौजूद अहम हिस्सों पर जाने के लिए संदर्भ मेन्यू उपलब्ध कराते हैं. सुलभता की जांच करते समय, इन मेन्यू का इस्तेमाल करके पेज की खास जानकारी देखी जा सकती है. साथ ही, यह पता लगाया जा सकता है कि आपके हेडिंग लेवल सही हैं या नहीं और कौनसे लैंडमार्क इस्तेमाल किए जा रहे हैं.

ज़्यादा जानने के लिए, VoiceOver और NVDA की बुनियादी बातों के बारे में बताने वाले इन निर्देशों वाले वीडियो देखें.

प्रोसेस को ऑटोमेट करना

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

  • क्या पेज, aXe या WAVE ब्राउज़र एक्सटेंशन के सभी टेस्ट पास करता है? इसके अलावा, और भी विकल्प उपलब्ध हैं. हालांकि, ये एक्सटेंशन किसी भी मैन्युअल टेस्ट प्रोसेस के लिए मददगार साबित हो सकते हैं, क्योंकि ये कंट्रास्ट रेशियो में कमी और ARIA एट्रिब्यूट मौजूद न होने जैसी छोटी समस्याओं का पता लगा सकते हैं.
    • अगर आपको कमांड-लाइन पर काम करना है, तो axe-cli में वही सुविधाएं मिलती हैं जो aXe ब्राउज़र एक्सटेंशन में मिलती हैं. हालांकि, इसे टर्मिनल से चलाया जा सकता है.
  • खास तौर पर, लगातार इंटिग्रेशन वाले माहौल में, रेग्रेसन से बचने के लिए, अपने ऑटोमेटेड टेस्ट सुइट में axe-core जैसी लाइब्रेरी शामिल करें. axe-core वही इंजन है जो aXe Chrome एक्सटेंशन को काम करता है. हालांकि, यह कमांड-लाइन की सुविधा के साथ काम करता है.
  • अगर किसी फ़्रेमवर्क या लाइब्रेरी का इस्तेमाल किया जा रहा है, तो क्या वह सुलभता के लिए अपने टूल उपलब्ध कराती है? उदाहरण के लिए, Angular के लिए protractor-accessibility-plugin. जब भी हो सके, उपलब्ध टूल का फ़ायदा लें.

PWA की जांच करने के लिए Lighthouse का इस्तेमाल करना

Lighthouse एक ऐसा टूल है जो आपके प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) की परफ़ॉर्मेंस का आकलन करता है. साथ ही, यह सुलभता जांच के लिए, axe-core लाइब्रेरी का इस्तेमाल करता है.

अगर आपने पहले से ही Lighthouse का इस्तेमाल किया है, तो अपनी रिपोर्ट में सुलभता से जुड़ी जांचों के नतीजे देखें. अपनी साइट पर उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, गड़बड़ियों को ठीक करें.

अन्य संसाधन