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