एक्सटेंशन की मदद से, लोग अपनी पसंद के मुताबिक ब्राउज़िंग का अनुभव पा सकते हैं. यह अनुभव, हर व्यक्ति की क्षमताओं और प्राथमिकताओं के हिसाब से तय होता है. एक्सटेंशन में सुलभता से जुड़े कॉम्पोनेंट शामिल होने चाहिए. इससे, दृष्टिबाधित, सुनने की क्षमता खो चुके, शारीरिक रूप से कमज़ोर, और अन्य दिव्यांग लोगों को एक्सटेंशन ऐक्सेस करने में मदद मिलेगी. साथ ही, एक्सटेंशन का इस्तेमाल करने वाले लोगों की संख्या बढ़ेगी.
सुलभता सुविधाओं का फ़ायदा, सिर्फ़ खास ज़रूरतों वाले लोगों को ही नहीं, बल्कि सभी को मिल सकता है. कीबोर्ड शॉर्टकट का इस्तेमाल, दृष्टिबाधित लोगों के साथ-साथ उन लोगों के लिए भी फ़ायदेमंद होता है जिन्हें उंगलियां चलाने में परेशानी होती है. इसके अलावा, ये शॉर्टकट उन लोगों के लिए भी फ़ायदेमंद होते हैं जो कंप्यूटर का इस्तेमाल ज़्यादा करते हैं. कैप्शन और ट्रांसक्रिप्ट, सुनने में परेशानी वाले लोगों के लिए ज़रूरी हैं. साथ ही, ये भाषा सीखने वाले लोगों की भी मदद करते हैं.
लोग एक्सटेंशन के साथ अलग-अलग तरीकों से इंटरैक्ट कर सकते हैं. कुछ लोगों के पास स्टैंडर्ड मॉनिटर, कीबोर्ड, और माउस होता है. वहीं, कुछ लोग स्क्रीन मैग्नीफ़ायर और स्क्रीन रीडर का इस्तेमाल करते हैं. यह अनुमान लगाना मुश्किल है कि लोग किसी एक्सटेंशन को ऐक्सेस करने के लिए किन टूल का इस्तेमाल करेंगे. हालांकि, कोई भी डेवलपर कुछ ऐसे तरीके अपना सकता है जिनसे एक्सटेंशन को ज़्यादा से ज़्यादा लोगों के लिए ऐक्सेस करना आसान हो जाए.
ऐक्सेस किए जा सकने वाले यूज़र इंटरफ़ेस (यूआई) कंट्रोल इंटिग्रेट करना
अगर उपयोगकर्ता, यूज़र इंटरफ़ेस कंट्रोल को ऐक्सेस नहीं कर पाते हैं, तो वे एक्सटेंशन का इस्तेमाल नहीं कर पाएंगे. ऐक्सेस किया जा सकने वाला यूज़र इंटरफ़ेस (यूआई) बनाने का सबसे आसान तरीका, स्टैंडर्ड एचटीएमएल कंट्रोल का इस्तेमाल करना है.
स्टैंडर्ड कंट्रोल
जब भी संभव हो, स्टैंडर्ड एचटीएमएल यूज़र इंटरफ़ेस (यूआई) कंट्रोल का इस्तेमाल करें. स्टैंडर्ड एचटीएमएल कंट्रोल को कीबोर्ड से ऐक्सेस किया जा सकता है. इन्हें आसानी से स्केल किया जा सकता है. साथ ही, स्क्रीन रीडर इन्हें आम तौर पर समझ लेते हैं.
कस्टम कंट्रोल में WAI-ARIA
Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA), यूज़र इंटरफ़ेस (यूआई) कंट्रोल को स्क्रीन रीडर के लिए सुलभ बनाने की एक खास जानकारी है. इसके लिए, DOM एट्रिब्यूट के स्टैंडर्ड सेट का इस्तेमाल किया जाता है. इन एट्रिब्यूट से, स्क्रीन रीडर को वेब पेज पर मौजूद कंट्रोल के फ़ंक्शन और मौजूदा स्थिति के बारे में जानकारी मिलती है.
कस्टम कंट्रोल में WAI-ARIA की सुविधा जोड़ने के लिए, एक्सटेंशन के DOM एलिमेंट में बदलाव करना होगा. ऐसा इसलिए, ताकि Chrome उन एट्रिब्यूट को शामिल कर सके जिनका इस्तेमाल वह उपयोगकर्ता के इंटरैक्शन के दौरान इवेंट जनरेट करने के लिए करता है. स्क्रीन रीडर इन इवेंट के हिसाब से काम करते हैं और कंट्रोल के फ़ंक्शन के बारे में बताते हैं. WAI-ARIA के ज़रिए तय किए गए DOM एट्रिब्यूट को भूमिकाओं, स्थितियों, और प्रॉपर्टी में बांटा गया है.
<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 में Dave Raggett की पेश की गई जानकारी देखें.
कस्टम कंट्रोल में फ़ोकस करना
कीबोर्ड फ़ोकस, उन लोगों के लिए ज़रूरी है जो माउस के बिना वेब पर नेविगेट करते हैं. पक्का करें कि बटन, सूची बॉक्स, और मेन्यू बार जैसे ऑपरेशन और नेविगेशन कंट्रोल पर कीबोर्ड फ़ोकस किया जा सकता हो.
डिफ़ॉल्ट रूप से, एचटीएमएल डीओएम में सिर्फ़ ऐंकर, बटन, और फ़ॉर्म कंट्रोल ऐसे एलिमेंट होते हैं जिन पर कीबोर्ड फ़ोकस किया जा सकता है. हालांकि, एचटीएमएल एट्रिब्यूट 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="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</div>
एक्सटेंशन, एक्सटेंशन के यूज़र इंटरफ़ेस (यूआई) के ज़रूरी एलिमेंट के लिए, साफ़ तौर पर कीबोर्ड शॉर्टकट बना सकते हैं. इन शॉर्टकट को लागू करने के लिए, कंट्रोल से कीबोर्ड इवेंट लिसनर कनेक्ट करें. उपयोगकर्ताओं को उपलब्ध शॉर्टकट के बारे में बताएं. इसके लिए, उन्हें विकल्प पेज पर उपलब्ध कराएं.
ऐसा कॉन्टेंट उपलब्ध कराएं जिसे आसानी से ऐक्सेस किया जा सके
सभी उपयोगकर्ताओं के लिए, ऐक्सेस किया जा सकने वाला कॉन्टेंट उपलब्ध कराना ज़रूरी है. यहां दिए गए कई दिशा-निर्देश आपको जाने-पहचाने लग सकते हैं. ऐसा इसलिए है, क्योंकि ये सभी वेब कॉन्टेंट के लिए सबसे सही तरीके हैं.
टेक्स्ट
फ़ॉन्ट और टेक्स्ट के साइज़ से यह तय होता है कि एक्सटेंशन का कॉन्टेंट कितना आसानी से पढ़ा जा सकता है. देखने में समस्या वाले लोगों को, एक्सटेंशन के टेक्स्ट का साइज़ बढ़ाना पड़ सकता है. अगर कीबोर्ड शॉर्टकट का इस्तेमाल किया जा रहा है, तो पक्का करें कि वे Chrome में पहले से मौजूद ज़ूम करने के शॉर्टकट में रुकावट न डालें.
एक्सटेंशन के यूज़र इंटरफ़ेस (यूआई) की फ़्लेक्सिबिलिटी के बारे में जानने के लिए, 200% टेस्ट करें. अगर टेक्स्ट का साइज़ या पेज का ज़ूम लेवल 200% बढ़ा दिया जाता है, तो क्या एक्सटेंशन का इस्तेमाल अब भी किया जा सकता है?
इमेज में टेक्स्ट जोड़ने से बचें. उपयोगकर्ता, इमेज के साइज़ में बदलाव नहीं कर सकते. साथ ही, स्क्रीन रीडर इमेज को नहीं पढ़ पाते. इसके बजाय, स्टाइल वाले वेब फ़ॉन्ट का इस्तेमाल करें. जैसे, Google Font API में मौजूद कोई फ़ॉन्ट. वेब फ़ॉन्ट को अलग-अलग साइज़ में बदला जा सकता है. साथ ही, स्क्रीन रीडर का इस्तेमाल करने वाले लोग इन्हें ऐक्सेस कर सकते हैं.
रंग
एक्सटेंशन में बैकग्राउंड के रंग और टेक्स्ट के रंग के बीच सही कंट्रास्ट होना चाहिए. कंट्रास्ट की जांच करने वाले टूल का इस्तेमाल करके देखें कि बैकग्राउंड और फ़ोरग्राउंड के रंगों का कंट्रास्ट सही है या नहीं.
कंट्रास्ट का आकलन करते समय, पुष्टि करें कि एक्सटेंशन का हर वह हिस्सा साफ़ तौर पर दिख रहा हो जिसमें जानकारी देने के लिए ग्राफ़िक का इस्तेमाल किया जाता है. कुछ इमेज के लिए, Coblis—Color Blindness Simulator जैसे टूल का इस्तेमाल किया जा सकता है. इससे यह देखा जा सकता है कि कलर विज़न में कमी होने पर, इमेज कैसी दिखती है.
बेहतर कंट्रास्ट बनाने के लिए, अलग-अलग कलर थीम ऑफ़र करें या उपयोगकर्ता को कलर स्कीम को पसंद के मुताबिक बनाने की सुविधा दें.
आवाज़
अगर कोई एक्सटेंशन जानकारी देने के लिए आवाज़ या वीडियो पर निर्भर करता है, तो पक्का करें कि कैप्शन या ट्रांसक्रिप्ट उपलब्ध हो. कैप्शन के बारे में ज़्यादा जानकारी के लिए, ब्यौरा दिया गया और कैप्शन वाला मीडिया प्रोग्राम के दिशा-निर्देश देखें.
इमेज
इमेज के लिए जानकारी देने वाला वैकल्पिक लेख जोड़ें.
<img src="img.jpg" alt="The logo for the extension">
इमेज में मौजूद कॉन्टेंट के बारे में बताने के बजाय, वैकल्पिक टेक्स्ट का इस्तेमाल करके इमेज का मकसद बताएं. स्पेस देने वाली इमेज या सिर्फ़ सजावट के लिए इस्तेमाल की जाने वाली इमेज में, "" का टेक्स्ट खाली होना चाहिए. इसके अलावा, इन्हें एचटीएमएल से पूरी तरह हटाकर सीएसएस में रखा जाना चाहिए.
अगर एक्सटेंशन को किसी इमेज में मौजूद टेक्स्ट का इस्तेमाल करना है, तो इमेज में मौजूद टेक्स्ट को वैकल्पिक टेक्स्ट में शामिल करें. इस बारे में ज़्यादा जानने के लिए, WebAIM का यह लेख पढ़ें: इमेज के लिए सही ऑल्ट टेक्स्ट.
ज़्यादा जानें
Chrome में सुलभता के बारे में ज़्यादा जानने के लिए, A11ycasts चैनल देखें. साथ ही, Chromium Accessibility Technical Documentation पढ़ें.