सुलभता ट्री के बारे में जानकारी
मान लें कि आपको सिर्फ़ स्क्रीन रीडर का इस्तेमाल करने वाले लोगों के लिए यूज़र इंटरफ़ेस बनाना है. यहां आपको कोई विज़ुअल यूज़र इंटरफ़ेस बनाने की ज़रूरत नहीं है. इसके बजाय, स्क्रीन रीडर के इस्तेमाल के लिए ज़रूरत के मुताबिक जानकारी दें.
आपको एक ऐसा एपीआई बनाना होगा जो पेज के स्ट्रक्चर के बारे में बताता हो. यह एपीआई, DOM API जैसा ही होता है. हालांकि, इसमें कम जानकारी और कम नोड का इस्तेमाल किया जा सकता है, क्योंकि इस जानकारी का ज़्यादातर हिस्सा सिर्फ़ विज़ुअल प्रज़ेंटेशन के लिए काम का होता है. यह कुछ ऐसा दिख सकता है.
आम तौर पर, ब्राउज़र स्क्रीन रीडर को यही जानकारी दिखाता है. ब्राउज़र, डीओएम ट्री को उस फ़ॉर्मैट में बदल देता है जो सहायक टेक्नोलॉजी के लिए काम का होता है. हम इस बदले हुए ट्री को सुलभता ट्री कहते हैं.
सुलभता ट्री को '90 के दशक के किसी पुराने वेब पेज की तरह देखा जा सकता है: इसमें कुछ इमेज, बहुत सारे लिंक, शायद एक फ़ील्ड, और एक बटन हो सकता है.
इस मामले में, पेज को नीचे की ओर स्कैन करने पर आपको वैसा ही अनुभव मिलता है जैसा स्क्रीन रीडर का इस्तेमाल करने वाले व्यक्ति को मिलता है. इंटरफ़ेस मौजूद है, लेकिन यह आसान और सीधा है. यह ऐक्सेसबिलिटी ट्री इंटरफ़ेस की तरह ही है.
ज़्यादातर सहायक टेक्नोलॉजी, सुलभता ट्री के साथ इंटरैक्ट करती हैं. फ़्लो कुछ इस तरह का होता है.
- कोई ऐप्लिकेशन (ब्राउज़र या कोई अन्य ऐप्लिकेशन), एपीआई के ज़रिए सहायक टेक्नोलॉजी को अपने यूज़र इंटरफ़ेस (यूआई) का सेमैंटिक वर्शन दिखाता है.
- सहायक टेक्नोलॉजी, एपीआई के ज़रिए पढ़ी गई जानकारी का इस्तेमाल करके, उपयोगकर्ता के लिए यूज़र इंटरफ़ेस का कोई दूसरा प्रज़ेंटेशन बना सकती है. उदाहरण के लिए, स्क्रीन रीडर एक ऐसा इंटरफ़ेस बनाता है जिसमें उपयोगकर्ता को ऐप्लिकेशन के बारे में बोलकर सुनाया जाता है.
- सहायक टेक्नोलॉजी की मदद से, उपयोगकर्ता ऐप्लिकेशन के साथ अलग तरीके से इंटरैक्ट कर सकता है. उदाहरण के लिए, ज़्यादातर स्क्रीन रीडर, उपयोगकर्ता को माउस क्लिक या उंगली से टैप करने की सुविधा देने के लिए हुक उपलब्ध कराते हैं.
- सहायक टेक्नोलॉजी, उपयोगकर्ता के इंटेंट (जैसे, "क्लिक") को ऐक्सेसibility API की मदद से ऐप्लिकेशन पर भेजती है. इसके बाद, ऐप्लिकेशन की ज़िम्मेदारी होती है कि वह ओरिजनल यूज़र इंटरफ़ेस (यूआई) के संदर्भ में, कार्रवाई को सही तरीके से समझे.
वेब ब्राउज़र के लिए, हर दिशा में एक अतिरिक्त चरण होता है, क्योंकि ब्राउज़र, असल में वेब ऐप्लिकेशन के लिए एक प्लैटफ़ॉर्म होता है. इसलिए, ब्राउज़र को वेब ऐप्लिकेशन को सुलभता ट्री में बदलना होगा. साथ ही, यह पक्का करना होगा कि सहायक टेक्नोलॉजी से मिलने वाली उपयोगकर्ता कार्रवाइयों के आधार पर, JavaScript में सही इवेंट ट्रिगर हों.
हालांकि, यह ब्राउज़र की ज़िम्मेदारी है. वेब डेवलपर के तौर पर हमारा काम सिर्फ़ यह जानना है कि यह प्रोसेस चल रही है. साथ ही, ऐसे वेब पेज बनाना है जो इस प्रोसेस का फ़ायदा उठाकर, हमारे उपयोगकर्ताओं के लिए ऐक्सेस करने लायक अनुभव दे सकें.
हम यह पक्का करते हैं कि हम अपने पेजों के सेमेटिक्स को सही तरीके से दिखाएं: पेज के अहम एलिमेंट के लिए, ऐक्सेस की जा सकने वाली सही भूमिकाएं, स्थितियां, और प्रॉपर्टी का इस्तेमाल किया गया हो. साथ ही, हम ऐक्सेस किए जा सकने वाले नाम और जानकारी दें. इसके बाद, ब्राउज़र सहायक टेक्नोलॉजी को वह जानकारी ऐक्सेस करने की अनुमति दे सकता है, ताकि उपयोगकर्ता के हिसाब से अनुभव बनाया जा सके.
नेटिव एचटीएमएल में सिमेंटिक
ब्राउज़र, डीओएम ट्री को सुलभता ट्री में बदल सकता है, क्योंकि डीओएम के ज़्यादातर हिस्से का सेमेंटिक मतलब अहम होता है. इसका मतलब है कि DOM, नेटिव एचटीएमएल एलिमेंट का इस्तेमाल करता है. ये एलिमेंट ब्राउज़र के लिए पहचाने जाते हैं और कई प्लैटफ़ॉर्म पर काम करते हैं. इस तरह, लिंक या बटन जैसे नेटिव एचटीएमएल एलिमेंट के लिए, सुलभता की सुविधा अपने-आप मैनेज हो जाती है. हम अपने पेज के एलिमेंट के बारे में जानकारी देने वाला एचटीएमएल लिखकर, पहले से मौजूद सुलभता सुविधा का फ़ायदा ले सकते हैं.
हालांकि, कभी-कभी हम ऐसे एलिमेंट का इस्तेमाल करते हैं जो नेटिव एलिमेंट जैसे दिखते हैं, लेकिन असल में वे नेटिव एलिमेंट नहीं होते. उदाहरण के लिए, यह "बटन" कोई बटन नहीं है.
इसे एचटीएमएल में कई तरीकों से बनाया जा सकता है. एक तरीका यहां दिखाया गया है.
<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>
जब चेकबॉक्स को सही तरीके से लेबल किया गया हो, तो स्क्रीन रीडर यह बता सकता है कि एलिमेंट की भूमिका चेकबॉक्स है, वह चुने गए स्टेटस में है, और उसका नाम "प्रमोशनल ऑफ़र पाएं?" है.
