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

Rob Dodson

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

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

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

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

कीबोर्ड का अच्छा अनुभव पाने के लिए, लॉजिकल टैब ऑर्डर और साफ़ तौर पर समझ में आने वाली फ़ोकस स्टाइल रखें.

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

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

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

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

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

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

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

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

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

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

स्क्रीन रीडर की मदद से टेस्ट करना

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

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

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

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

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

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

प्रोसेस को ऑटोमेट करें

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

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

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

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

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

ज़्यादा रिसॉर्स