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