सुलभता ट्री के बारे में जानकारी
मान लें कि आपको सिर्फ़ स्क्रीन रीडर का इस्तेमाल करने वाले लोगों के लिए यूज़र इंटरफ़ेस बनाना है. यहां आपको कोई विज़ुअल यूज़र इंटरफ़ेस (यूआई) बनाने की ज़रूरत नहीं है. बस स्क्रीन रीडर के इस्तेमाल के लिए ज़रूरी जानकारी दें.
आपको एक ऐसा एपीआई बनाना होगा जो पेज के स्ट्रक्चर के बारे में बताता हो. यह डीओएम एपीआई जैसा ही होता है. हालांकि, इसमें कम जानकारी और कम नोड से भी काम चल सकता है, क्योंकि ज़्यादातर जानकारी सिर्फ़ विज़ुअल प्रज़ेंटेशन के लिए काम की होती है. यह कुछ ऐसा दिख सकता है.
यह वह जानकारी होती है जो ब्राउज़र, स्क्रीन रीडर को देता है. ब्राउज़र, डीओएम ट्री को लेता है और उसे ऐसे फ़ॉर्म में बदल देता है जो सहायक टेक्नोलॉजी के लिए मददगार होता है. हम इस बदले हुए ट्री को सुलभता ट्री कहते हैं.
सुलभता ट्री को 90 के दशक के किसी पुराने वेब पेज की तरह विज़ुअलाइज़ किया जा सकता है: कुछ इमेज, कई लिंक, शायद एक फ़ील्ड और एक बटन.
इस तरह के पेज को विज़ुअल तौर पर स्कैन करने से, आपको स्क्रीन रीडर इस्तेमाल करने वाले व्यक्ति जैसा अनुभव मिलता है. इंटरफ़ेस मौजूद है, लेकिन यह आसान और डायरेक्ट है. यह काफ़ी हद तक सुलभता ट्री इंटरफ़ेस जैसा है.
सुलभता ट्री, ज़्यादातर सहायक टेक्नोलॉजी के साथ इंटरैक्ट करता है. यह प्रोसेस कुछ इस तरह काम करती है.
- कोई ऐप्लिकेशन (ब्राउज़र या अन्य ऐप्लिकेशन), एपीआई के ज़रिए सहायक टेक्नोलॉजी को अपने यूज़र इंटरफ़ेस (यूआई) का सिमैंटिक वर्शन दिखाता है.
- सहायक टेक्नोलॉजी, एपीआई से मिली जानकारी का इस्तेमाल करके, उपयोगकर्ता के लिए एक वैकल्पिक यूज़र इंटरफ़ेस प्रज़ेंटेशन बना सकती है. उदाहरण के लिए, स्क्रीन रीडर एक ऐसा इंटरफ़ेस बनाता है जिसमें उपयोगकर्ता को ऐप्लिकेशन के बारे में बोलकर बताया जाता है.
- सहायक टेक्नोलॉजी, उपयोगकर्ता को ऐप्लिकेशन के साथ अलग तरीके से इंटरैक्ट करने की सुविधा भी दे सकती है. उदाहरण के लिए, ज़्यादातर स्क्रीन रीडर हुक उपलब्ध कराते हैं, ताकि उपयोगकर्ता आसानी से माउस क्लिक या उंगली से टैप करने की सुविधा का इस्तेमाल कर सके.
- सहायक टेक्नोलॉजी, उपयोगकर्ता के मकसद (जैसे, "क्लिक") को Accessibility API के ज़रिए ऐप्लिकेशन को वापस भेजती है. इसके बाद, ऐप्लिकेशन की ज़िम्मेदारी होती है कि वह ओरिजनल यूज़र इंटरफ़ेस (यूआई) के हिसाब से, कार्रवाई को सही तरीके से समझे.
वेब ब्राउज़र के लिए, हर दिशा में एक अतिरिक्त चरण होता है. इसकी वजह यह है कि ब्राउज़र, असल में वेब ऐप्लिकेशन के लिए एक प्लैटफ़ॉर्म है. ये ऐप्लिकेशन, ब्राउज़र के अंदर ही चलते हैं. इसलिए, ब्राउज़र को वेब ऐप्लिकेशन को सुलभता ट्री में बदलना होगा. साथ ही, यह पक्का करना होगा कि सहायक टेक्नोलॉजी से मिलने वाली उपयोगकर्ता की कार्रवाइयों के आधार पर, JavaScript में सही इवेंट ट्रिगर हों.
हालांकि, यह ब्राउज़र की ज़िम्मेदारी है. वेब डेवलपर के तौर पर हमारा काम सिर्फ़ यह जानना है कि यह प्रोसेस कैसे काम करती है. साथ ही, ऐसे वेब पेज डेवलप करना है जो इस प्रोसेस का फ़ायदा उठाकर, हमारे उपयोगकर्ताओं को सुलभता का अनुभव दे सकें.
हम ऐसा करने के लिए, यह पक्का करते हैं कि हमारे पेजों के सिमैंटिक सही तरीके से दिखें: हम यह पक्का करते हैं कि पेज के अहम एलिमेंट में, ऐक्सेस की जा सकने वाली सही भूमिकाएं, स्थितियां, और प्रॉपर्टी हों. साथ ही, हम ऐक्सेस किए जा सकने वाले नाम और ब्यौरे भी देते हैं. इसके बाद, ब्राउज़र सहायक टेक्नोलॉजी को उस जानकारी को ऐक्सेस करने की अनुमति दे सकता है, ताकि उपयोगकर्ता को उसकी पसंद के मुताबिक अनुभव दिया जा सके.
नेटिव एचटीएमएल में सिमैंटिक
ब्राउज़र, डीओएम ट्री को सुलभता ट्री में बदल सकता है. ऐसा इसलिए, क्योंकि डीओएम के ज़्यादातर हिस्से का इंप्लिसिट सिमैंटिक मतलब होता है. इसका मतलब है कि डीओएम, नेटिव एचटीएमएल एलिमेंट का इस्तेमाल करता है. इन्हें ब्राउज़र पहचानते हैं और ये अलग-अलग प्लैटफ़ॉर्म पर उम्मीद के मुताबिक काम करते हैं. लिंक या बटन जैसे नेटिव एचटीएमएल एलिमेंट के लिए सुलभता की सुविधा अपने-आप मैनेज होती है. हम इस पहले से मौजूद सुलभता सुविधा का फ़ायदा ले सकते हैं. इसके लिए, हमें ऐसा एचटीएमएल लिखना होगा जो हमारे पेज के एलिमेंट के सिमैंटिक को ज़ाहिर करे.
हालांकि, कभी-कभी हम ऐसे एलिमेंट का इस्तेमाल करते हैं जो नेटिव एलिमेंट जैसे दिखते हैं, लेकिन होते नहीं हैं. उदाहरण के लिए, यह "बटन" असल में कोई बटन नहीं है.
इसे एचटीएमएल में कई तरीकों से बनाया जा सकता है. इनमें से एक तरीका यहां दिया गया है.
<div class="button-ish">Give me tacos</div>
जब हम किसी असल बटन एलिमेंट का इस्तेमाल नहीं करते, तो स्क्रीन रीडर को यह पता नहीं चलता कि वह किस एलिमेंट पर पहुंचा है. इसके अलावा, हमें tabindex जोड़ने का अतिरिक्त काम करना होगा, ताकि सिर्फ़ कीबोर्ड का इस्तेमाल करने वाले लोग इसका इस्तेमाल कर सकें. ऐसा इसलिए, क्योंकि इसे अभी इस तरह से कोड किया गया है कि इसका इस्तेमाल सिर्फ़ माउस से किया जा सकता है.
हम div के बजाय सामान्य button एलिमेंट का इस्तेमाल करके, इसे आसानी से ठीक कर सकते हैं.
नेटिव एलिमेंट का इस्तेमाल करने का एक और फ़ायदा यह है कि इससे कीबोर्ड इंटरैक्शन को मैनेज करने में मदद मिलती है. यह भी याद रखें कि नेटिव एलिमेंट का इस्तेमाल करने का मतलब यह नहीं है कि आपको शानदार विज़ुअल इफ़ेक्ट का इस्तेमाल करने का मौका नहीं मिलेगा. नेटिव एलिमेंट को अपनी पसंद के मुताबिक स्टाइल किया जा सकता है. साथ ही, उनके सिमैंटिक और व्यवहार को भी बरकरार रखा जा सकता है.
हमने पहले बताया था कि स्क्रीन रीडर, किसी एलिमेंट की भूमिका, नाम, स्थिति, और वैल्यू की जानकारी देते हैं. सही सिमैंटिक एलिमेंट का इस्तेमाल करने से, रोल, स्टेट, और वैल्यू कवर हो जाती हैं. हालांकि, हमें यह भी पक्का करना होगा कि हम किसी एलिमेंट के नाम को खोजे जाने लायक बनाएं.
आम तौर पर, नाम दो तरह के होते हैं:
- दिखने वाले लेबल, जिनका इस्तेमाल सभी उपयोगकर्ता किसी एलिमेंट का मतलब समझने के लिए करते हैं. साथ ही,
- टेक्स्ट के विकल्प, जिनका इस्तेमाल सिर्फ़ तब किया जाता है, जब विज़ुअल लेबल की ज़रूरत न हो.
टेक्स्ट-लेवल एलिमेंट के लिए, हमें कुछ करने की ज़रूरत नहीं है. ऐसा इसलिए, क्योंकि परिभाषा के मुताबिक, इसमें कुछ टेक्स्ट कॉन्टेंट होगा. हालांकि, इनपुट या कंट्रोल एलिमेंट और इमेज जैसे विज़ुअल कॉन्टेंट के लिए, हमें यह पक्का करना होगा कि हम कोई नाम तय करें. बिना टेक्स्ट वाले कॉन्टेंट के लिए, टेक्स्ट के विकल्प उपलब्ध कराना WebAIM चेकलिस्ट में सबसे पहला आइटम है.
इसके लिए, उनके इस सुझाव को अपनाएं कि "फ़ॉर्म इनपुट में टेक्स्ट लेबल जुड़े होने चाहिए." किसी लेबल को फ़ॉर्म के एलिमेंट के साथ जोड़ने के दो तरीके हैं. जैसे, चेकबॉक्स. इनमें से किसी भी तरीके का इस्तेमाल करने पर, लेबल टेक्स्ट भी चेकबॉक्स के लिए क्लिक टारगेट बन जाता है. इससे माउस या टचस्क्रीन का इस्तेमाल करने वाले लोगों को भी मदद मिलती है. किसी एलिमेंट के साथ लेबल जोड़ने के लिए, इनमें से कोई एक तरीका अपनाएं
- इनपुट एलिमेंट को लेबल एलिमेंट के अंदर रखें
<label>
<input type="checkbox">Receive promotional offers?
</label>या
- लेबल के
forएट्रिब्यूट का इस्तेमाल करें और एलिमेंट केidको रेफ़र करें
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
जब चेकबॉक्स को सही तरीके से लेबल किया जाता है, तो स्क्रीन रीडर यह बता सकता है कि एलिमेंट की भूमिका चेकबॉक्स की है, उसे चुना गया है, और उसका नाम "क्या आपको प्रमोशनल ऑफ़र चाहिए?" है.
