सुलभता सुविधाओं में मदद करना

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

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

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

ऐक्सेस किए जा सकने वाले यूज़र इंटरफ़ेस (यूआई) कंट्रोल इंटिग्रेट करें

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

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

स्टैंडर्ड कंट्रोल

जब भी हो सके, स्टैंडर्ड एचटीएमएल यूज़र इंटरफ़ेस (यूआई) कंट्रोल का इस्तेमाल करें. स्टैंडर्ड एचटीएमएल कंट्रोल में कीबोर्ड का इस्तेमाल किया जा सकता है और स्केल को आसानी से समझा जा सकता है. साथ ही, आम तौर पर इन्हें स्क्रीन रीडर समझ पाते हैं.

कस्टम कंट्रोल में WAI-ARIA मोड

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

कस्टम कंट्रोल में WAI-ARIA सुविधा जोड़ने के लिए, एक्सटेंशन के DOM एलिमेंट में बदलाव करना होगा, ताकि उन एट्रिब्यूट को शामिल किया जा सके जिनका इस्तेमाल Chrome, उपयोगकर्ता के इंटरैक्शन के दौरान इवेंट बढ़ाने के लिए करता है. स्क्रीन रीडर इन इवेंट से जुड़े होते हैं और कंट्रोल के काम के बारे में बताते हैं. WAI-ARIA से बनाए गए डीओएम एट्रिब्यूट को भूमिकाओं, राज्यों, और प्रॉपर्टी की कैटगरी में रखा जाता है.

<div role="toolbar">

aria-activedescendant प्रॉपर्टी से पता चलता है कि टूलबार में फ़ोकस किए जाने पर, टूलबार में किस चाइल्ड खाते पर फ़ोकस होता है. कोड tabindex="0" से पता चलता है कि टूलबार को दस्तावेज़ के क्रम में फ़ोकस मिलता है.

उदाहरण के तौर पर दिए गए टूलबार के बारे में पूरी जानकारी यहां देखें:

<div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="buttoncut.png" role="button" alt="cut" id="button1">
  <img src="buttoncopy.png" role="button" alt="copy" id="button2">
  <img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>

किसी कंट्रोल के DOM में WAI-ARIA भूमिकाओं, राज्यों, और प्रॉपर्टी को जोड़ने के बाद, Google Chrome सही इवेंट, स्क्रीन रीडर को दिखाता है. क्योंकि WAI-ARIA सहायता पर अब भी काम चल रहा है, इसलिए हो सकता है कि Google Chrome हर WAI-ARIA प्रॉपर्टी के लिए एक इवेंट न बढ़ाए. साथ ही, हो सकता है कि स्क्रीन रीडर देखे जा रहे सभी इवेंट को न पहचान पाएं.

कस्टम कंट्रोल में WAI-ARIA कंट्रोल जोड़ने के बारे में फटाफट ट्यूटोरियल पाने के लिए, WWW2010 से डेव रैगेट का प्रज़ेंटेशन देखें.

कस्टम कंट्रोल पर फ़ोकस करें

माउस का इस्तेमाल किए बिना वेब पर नेविगेट करने वाले उपयोगकर्ताओं के लिए, कीबोर्ड फ़ोकस करना ज़रूरी है. पक्का करें कि बटन, लिस्ट बॉक्स, और मेन्यू बार जैसे ऑपरेशन और नेविगेशन कंट्रोल को कीबोर्ड फ़ोकस की सुविधा मिले.

डिफ़ॉल्ट रूप से, एचटीएमएल DOM में सिर्फ़ ऐंकर, बटन, और फ़ॉर्म कंट्रोल जैसे एलिमेंट ही कीबोर्ड फ़ोकस पा सकते हैं. हालांकि, एचटीएमएल एट्रिब्यूट tabIndex को 0 पर सेट करने पर, डीओएम एलिमेंट को डिफ़ॉल्ट टैब क्रम में रखा जाता है. इससे उन्हें कीबोर्ड फ़ोकस पाने में मदद मिलती है.

element.tabIndex = 0

element.focus();

tabIndex = -1 को सेट करने पर, टैब क्रम से एलिमेंट हट जाता है. हालांकि, इससे एलिमेंट को प्रोग्राम के हिसाब से कीबोर्ड फ़ोकस पाने की सुविधा मिलती है.

कीबोर्ड ऐक्सेस करने में मदद करें

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

नेविगेशन

पक्का करें कि उपयोगकर्ता माउस का इस्तेमाल किए बिना, किसी एक्सटेंशन के अलग-अलग हिस्सों के बीच नेविगेट कर सकता है या नहीं. देखें कि पॉप-अप का इस्तेमाल, कीबोर्ड से नेविगेट किया जा सकता है या नहीं. यह तय करने के लिए कि किसी एक्सटेंशन को नेविगेट किया जा सकता है या नहीं, Chrome कीबोर्ड शॉर्टकट का इस्तेमाल करें.

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

शॉर्टकट

हालांकि सबसे सामान्य कीबोर्ड नेविगेशन रणनीति में फ़ोकस को किसी एक्सटेंशन के इंटरफ़ेस पर घुमाने के लिए Tab बटन का इस्तेमाल करना शामिल है, लेकिन यह हमेशा सबसे आसान या सबसे असरदार विकल्प नहीं होता.

एक सामान्य JavaScript कीबोर्ड हैंडलर कुछ ऐसा दिख सकता है. ध्यान दें कि मौजूदा ऐक्टिव टूलबार बटन को दिखाने के लिए, उपयोगकर्ता के इनपुट के जवाब में, WAI-ARIA प्रॉपर्टी aria-activedescendant को कैसे अपडेट किया जाता है.

 function optionKeyEvent(event) {
  var tb = event.target;
  var buttonid;

  ENTER_KEYCODE = 13;
  RIGHT_KEYCODE = 39;
  LEFT_KEYCODE = 37;
  // Partial sample code for processing arrow keys.
  if (event.type == "keydown") {
    // Implement circular keyboard navigation within the toolbar buttons
    if (event.keyCode == ENTER_KEYCODE) {
      ExecuteButtonAction(getCurrentButtonID());
      // getCurrentButtonID defined elsewhere
    } else if (event.keyCode == event.RIGHT_KEYCODE) {
      // Change the active toolbar button to the one to the right (circular).
      var buttonid = getNextButtonID();
      // getNextButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else if (event.keyCode == event.LEFT_KEYCODE) {
      // Change the active toolbar button to the one to the left (circular).
      var buttonid = getPrevButtonID();
      // getPrevButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else {
      return true;
    }
    return false;
  }
}

<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
     onkeydown="return optionKeyEvent(event);"
     onkeypress="return optionKeyEvent(event);">
  <img src="buttoncut" role="button" alt="cut" id="button1">
  <img src="buttoncopy" role="button" alt="copy" id="button1">
  <img src="buttonpaste" role="button" alt="paste" id="button1">
</div>

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

ऐक्सेस किया जा सकने वाला कॉन्टेंट उपलब्ध कराना

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

टेक्स्ट

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

किसी एक्सटेंशन के यूज़र इंटरफ़ेस (यूआई) के लचीलेपन के सूचक के तौर पर, 200% टेस्ट लागू करें. अगर टेक्स्ट का साइज़ या पेज ज़ूम 200% बढ़ गया है, तो क्या अब भी इसका इस्तेमाल किया जा सकता है?

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

कलर

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

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

बेहतर कंट्रास्ट बनाने के लिए, अलग-अलग कलर थीम ऑफ़र करें या उपयोगकर्ता को कलर स्कीम को पसंद के मुताबिक बनाने की सुविधा दें.

आवाज़

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

इमेज

इमेज के लिए जानकारी वाला वैकल्पिक लेख दें.

<img src="img.jpg" alt="The logo for the extension">

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

अगर एक्सटेंशन को किसी इमेज में टेक्स्ट का इस्तेमाल करना ज़रूरी है, तो वैकल्पिक टेक्स्ट में इमेज का टेक्स्ट शामिल करें. सही वैकल्पिक टेक्स्ट पर WebAIM लेख इसका इस्तेमाल किया जा सकता है.

ज़्यादा जानें

A11ycasts चैनल पर जाकर और Chromium सुलभता से जुड़े तकनीकी दस्तावेज़ को पढ़कर, Chrome में सुलभता के बारे में ज़्यादा जानें.