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

Rob Dodson

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ऑफ़स्क्रीन कॉन्टेंट मैनेज करने का तरीका जानें साथ ही, इन एलिमेंट को मैनेज करने से जुड़ी सलाह पाएं.

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

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

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

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

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

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

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

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

यह समझना ज़रूरी है कि ARIA सिर्फ़ सिमेंटिक्स को element; इससे एलिमेंट के व्यवहार पर कोई असर नहीं पड़ता. आपके पास ये चीज़ें बनाने का विकल्प है एक एलिमेंट, जो 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 मौजूद न होने जैसी मामूली समस्याओं को हल करना एट्रिब्यूट की वैल्यू सबमिट करें.
  • अगर आपको कमांड लाइन पर काम करना है, X-cli में वे सभी सुविधाएं मौजूद हैं जो एक ही जगह पर उपलब्ध हैं AXe ब्राउज़र एक्सटेंशन के रूप में है, लेकिन इसे आपके टर्मिनल से चलाया जा सकता है.
• रिग्रेशन से बचने के लिए, खासकर कंटिन्यूअस इंटिग्रेशन एनवायरमेंट में, ऐक्सिस कोर जैसी लाइब्रेरी को शामिल करने पर आपके ऑटोमेटेड टेस्ट सुइट का इस्तेमाल किया जा सकता है. ऐक्स-कोर वही इंजन है जो aXe Chrome एक्सटेंशन है, लेकिन कमांड लाइन सुविधा में है.
• अगर किसी फ़्रेमवर्क या लाइब्रेरी का इस्तेमाल किया जा रहा है, तो क्या वह अपनी सुलभता सुविधाएं उपलब्ध कराता है टूल? उदाहरण के लिए, protractor-accessibility-plugin Angular के लिए. जब भी मुमकिन हो, उपलब्ध टूल का ज़्यादा से ज़्यादा फ़ायदा लें.

लाइटहाउस का इस्तेमाल करके, पीडब्ल्यूए की जांच करें

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

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

अन्य संसाधन

• सुलभता सीखें
• Google की वेब सुलभता