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