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

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

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

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

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

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

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

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

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

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

कस्टम कंट्रोल में WAI-ARIA सपोर्ट जोड़ने के लिए, एक्सटेंशन के DOM एलिमेंट को में बदलाव करके, उन एट्रिब्यूट को शामिल किया जा सकता है जिनका इस्तेमाल Chrome, उपयोगकर्ता इंटरैक्शन के दौरान इवेंट बढ़ाने के लिए करता है. स्क्रीन रीडर इन इवेंट का जवाब देते हैं और कंट्रोल के फ़ंक्शन के बारे में बताते हैं. इसके ज़रिए तय किए गए DOM एट्रिब्यूट 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 में डेव रैगेट का प्रज़ेंटेशन देखें.

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

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

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

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—Color Blindness simulators जैसे टूल का इस्तेमाल करके देखा जा सकता है कि रंगों की पहचान करने में होने वाली अलग-अलग समस्याओं के हिसाब से इमेज कैसी दिखती है.

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

आवाज़

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

इमेज

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

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

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

अगर एक्सटेंशन को किसी इमेज में मौजूद टेक्स्ट का इस्तेमाल करना है, तो वैकल्पिक टेक्स्ट में इमेज का टेक्स्ट शामिल करें. सही ऑल्ट टेक्स्ट के बारे में WebAIM का लेख, इस बारे में जानने के लिए एक अच्छा संसाधन है.

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

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