एक्सटेंशन की मदद से, उपयोगकर्ता अपने हिसाब से ब्राउज़िंग अनुभव बना सकते हैं. यह अनुभव, उपयोगकर्ता की क्षमताओं और प्राथमिकताओं के हिसाब से बनाया जाता है. एक्सटेंशन में सुलभता कॉम्पोनेंट शामिल होने चाहिए. इनकी मदद से, सभी तरह के उपयोगकर्ताओं को एक्सटेंशन ऐक्सेस करने में मदद मिलती है. जैसे, जिन लोगों की आंखों की रोशनी कम है, जो सुन नहीं सकते, जिनके हाथों में कम गतिशीलता है, और जिनमें कोई अन्य दिव्यांगता है.
सुलभता सुविधाओं का फ़ायदा सभी को मिल सकता है, न कि सिर्फ़ खास ज़रूरतों वाले लोगों को. कीबोर्ड शॉर्टकट का इस्तेमाल करके, कमज़ोर दृष्टि वाले, कम फ़ंक्शन वाले, और ज़्यादा इस्तेमाल करने वाले लोग, फ़ाइलों को आसानी से मैनेज कर सकते हैं. कैप्शन और ट्रांसक्रिप्ट, लोगों के लिए ज़रूरी हैं. हालांकि, इनसे भाषा सीखने वाले लोगों को भी मदद मिलती है.
लोग किसी एक्सटेंशन के साथ कई तरह से इंटरैक्ट कर सकते हैं. कुछ उपयोगकर्ताओं के पास स्टैंडर्ड मॉनिटर, कीबोर्ड, और माउस होता है. इसके अलावा, वे स्क्रीन पर मौजूद कॉन्टेंट को बड़ा करके दिखाने की सुविधा और स्क्रीन रीडर का इस्तेमाल भी कर सकते हैं. यह अनुमान लगाना मुश्किल है कि लोग किसी एक्सटेंशन को ऐक्सेस करने के लिए किन टूल का इस्तेमाल करेंगे. हालांकि, किसी भी डेवलपर के पास ऐसे कदम उठाने का विकल्प होता है जिनसे एक्सटेंशन को ज़्यादा से ज़्यादा लोगों के लिए ऐक्सेस किया जा सके.
ऐक्सेस किए जा सकने वाले यूज़र इंटरफ़ेस (यूआई) कंट्रोल इंटिग्रेट करें
अगर उपयोगकर्ता, यूज़र इंटरफ़ेस के कंट्रोल ऐक्सेस नहीं कर पाते हैं, तो वे एक्सटेंशन का इस्तेमाल नहीं कर पाते. स्टैंडर्ड एचटीएमएल कंट्रोल का इस्तेमाल करके, ऐक्सेस किया जा सकने वाला यूज़र इंटरफ़ेस (यूआई) बनाना सबसे आसान तरीका है.
स्टैंडर्ड कंट्रोल
जब भी हो सके, स्टैंडर्ड एचटीएमएल यूज़र इंटरफ़ेस (यूआई) कंट्रोल का इस्तेमाल करें. स्टैंडर्ड एचटीएमएल कंट्रोल, कीबोर्ड की मदद से ऐक्सेस किए जा सकते हैं. साथ ही, इन्हें आसानी से स्केल किया जा सकता है. आम तौर पर, स्क्रीन रीडर इन्हें समझ लेते हैं.
कस्टम कंट्रोल में WAI-ARIA
वेब सुलभता पहल - ऐक्सेस किए जा सकने वाले रिच इंटरनेट ऐप्लिकेशन, WAI-ARIA, एक ऐसी विशेषता है जिससे डीओएम एट्रिब्यूट के स्टैंडर्ड सेट की मदद से, स्क्रीन रीडर के लिए यूज़र इंटरफ़ेस (यूआई) कंट्रोल को ऐक्सेस किया जा सकता है. ये एट्रिब्यूट, स्क्रीन रीडर को किसी वेब पेज पर कंट्रोल के फ़ंक्शन और मौजूदा स्थिति के बारे में जानकारी देते हैं.
कस्टम कंट्रोल में 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 में डेव रैगेट का प्रज़ेंटेशन देखें.
कस्टम कंट्रोल में फ़ोकस करना
कीबोर्ड फ़ोकस, उन उपयोगकर्ताओं के लिए ज़रूरी है जो माउस के बिना वेब पर नेविगेट करते हैं. पक्का करें कि बटन, सूची बॉक्स, और मेन्यू बार जैसे ऑपरेशन और नेविगेशन कंट्रोल पर कीबोर्ड फ़ोकस किया जा सकता हो.
डिफ़ॉल्ट रूप से, एचटीएमएल डीओएम में सिर्फ़ ऐंकर, बटन, और फ़ॉर्म कंट्रोल पर कीबोर्ड फ़ोकस मिल सकता है. हालांकि, एचटीएमएल एट्रिब्यूट 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 simulators जैसे टूल का इस्तेमाल करके देखा जा सकता है कि रंगों की पहचान करने में होने वाली अलग-अलग समस्याओं के हिसाब से, इमेज कैसी दिखती है.
कंट्रास्ट को बेहतर बनाने के लिए, अलग-अलग कलर थीम ऑफ़र करें या उपयोगकर्ता को कलर स्कीम को पसंद के मुताबिक बनाने की सुविधा दें.
आवाज़
अगर कोई एक्सटेंशन जानकारी देने के लिए साउंड या वीडियो का इस्तेमाल करता है, तो पक्का करें कि उसमें कैप्शन या ट्रांसक्रिप्ट उपलब्ध हों. कैप्शन के बारे में ज़्यादा जानकारी के लिए, ब्यौरा और कैप्शन वाले मीडिया प्रोग्राम के दिशा-निर्देश देखें.
इमेज
इमेज के लिए जानकारी देने वाला वैकल्पिक टेक्स्ट दें.
<img src="img.jpg" alt="The logo for the extension">
इमेज के कॉन्टेंट के बारे में लिटरल जानकारी देने के बजाय, वैकल्पिक टेक्स्ट का इस्तेमाल इमेज के मकसद के बारे में बताने के लिए करें. स्पेसर इमेज या सिर्फ़ सजावटी इमेज का इस्तेमाल करने के लिए, एक खाली "" वैकल्पिक टेक्स्ट होना चाहिए. इसके अलावा, इसे एचटीएमएल से पूरी तरह हटाकर सीएसएस में रखा जाना चाहिए.
अगर एक्सटेंशन को किसी इमेज में मौजूद टेक्स्ट का इस्तेमाल करना है, तो वैकल्पिक टेक्स्ट में इमेज का टेक्स्ट शामिल करें. सही वैकल्पिक लेख के बारे में WebAIM लेख, इस जानकारी के लिए एक अच्छा संसाधन है.
ज़्यादा जानें
A11ycasts चैनल पर जाकर और Chromium सुलभता से जुड़े तकनीकी दस्तावेज़ को पढ़कर, Chrome में सुलभता सुविधाओं के बारे में ज़्यादा जानें.