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

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

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

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

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

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

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

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

कस्टम कंट्रोल में WAI-ARIA का इस्तेमाल करना

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

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

<div role="toolbar">

The aria-activedescendant प्रॉपर्टी से यह तय होता है कि टूलबार को फ़ोकस मिलने पर, टूलबार का कौनसा चाइल्ड फ़ोकस में आएगा. `tabindex="0"` कोड से यह तय होता है कि टूलबार को दस्तावेज़ के क्रम में फ़ोकस मिलेगा.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 कंट्रोल जोड़ने के बारे में जानने के लिए, डेव रैगेट's WWW2010 से प्रस्तुति देखें.

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

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

डिफ़ॉल्ट रूप से, एचटीएमएल DOM में सिर्फ़ ऐंकर, बटन, और फ़ॉर्म कंट्रोल को कीबोर्ड फ़ोकस मिल सकता है. हालांकि, एचटीएमएल एट्रिब्यूट 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 Simulator जैसे टूल का इस्तेमाल किया जा सकता है. इससे यह देखा जा सकता है कि कलर विज़न में अलग-अलग तरह की कमी होने पर, कोई इमेज कैसी दिखती है.

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

आवाज़

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

इमेज

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

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

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

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

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

Chrome में सुलभता के बारे में ज़्यादा जानने के लिए, A11ycasts चैनल देखें और Chromium Accessibility Technical Documentation पढ़ें.