क्या आपने कभी यह सोचा है कि स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी को कैसे पता चलता है कि उपयोगकर्ताओं को क्या पढ़कर सुनाना है? इसका जवाब यह है कि ये टेक्नोलॉजी, डेवलपर के उन पेजों पर निर्भर करती हैं जिन्हें सिमेंटिक एचटीएमएल से मार्क किया गया हो. हालांकि, सेमैंटिक्स क्या होते हैं और स्क्रीन रीडर उनका इस्तेमाल कैसे करते हैं?
उपलब्धता और सिमेंटिक
सेमेटिक्स के बारे में जानने से पहले, एक और शब्द समझना मददगार होगा: अफ़र्डेंस. अवसर देने वाला कोई भी आइटम, उपयोगकर्ता को कोई कार्रवाई करने का मौका देता है. इसका एक अच्छा उदाहरण है, टीपॉट:
इस टीपॉट के लिए, निर्देशों वाले मैन्युअल की ज़रूरत नहीं होती. इसके बजाय, इसका फ़िज़िकल डिज़ाइन, उपयोगकर्ता को यह बताता है कि इसे कैसे इस्तेमाल करना चाहिए. इसमें एक हैंडल है. आपने दुनिया में मिलते-जुलते हैंडल वाले अन्य ऑब्जेक्ट देखे हैं. इसलिए, इस बात का अनुमान लगाया जा सकता है कि इसे कैसे उठाया और इस्तेमाल किया जाना चाहिए.
ग्राफ़िकल यूज़र इंटरफ़ेस बनाते समय, हम अपने यूज़र इंटरफ़ेस में विज़ुअल ऐफ़र्डेंस जोड़ने के लिए, सीएसएस जैसी चीज़ों का इस्तेमाल करते हैं. उदाहरण के लिए, किसी बटन को ड्रॉप शैडो और बॉर्डर दिया जा सकता है, ताकि वह असल बटन जैसा दिखे.
हालांकि, अगर कोई उपयोगकर्ता स्क्रीन नहीं देख पा रहा है, तो उसे ये विज़ुअल अवसर नहीं दिखाए जाएंगे. इसलिए, आपको यह पक्का करना होगा कि आपका यूज़र इंटरफ़ेस (यूआई) इस तरह से बनाया गया हो कि सहायक टेक्नोलॉजी को भी ये सुविधाएं मिल सकें. यूज़र इंटरफ़ेस (यूआई) एलिमेंट के अवफ़र्डेंस को विज़ुअल के ज़रिए न दिखाने को, सीमेंटिक्स कहा जाता है.
सिमेंटिक एचटीएमएल का इस्तेमाल करना
सही सेमेटिक्स बताने का सबसे आसान तरीका, सिमेंटिक रूप से बेहतर एचटीएमएल एलिमेंट का इस्तेमाल करना है.
सीएसएस का इस्तेमाल करके, <div> और <button> एलिमेंट को स्टाइल किया जा सकता है, ताकि वे एक जैसे विज़ुअल अवफ़र्डेंस दिखा सकें. हालांकि, स्क्रीन रीडर का इस्तेमाल करने पर, दोनों एलिमेंट का अनुभव बहुत अलग होता है.
<div> सिर्फ़ एक सामान्य ग्रुपिंग एलिमेंट है, इसलिए स्क्रीन रीडर सिर्फ़ <div> के टेक्स्ट कॉन्टेंट को पढ़कर सुनाता है.
<button> को "बटन" के तौर पर बताया जाता है. इससे उपयोगकर्ता को यह पता चलता है कि वह किसी ऐसे आइटम के साथ इंटरैक्ट कर सकता है.
इस समस्या का सबसे आसान और अक्सर सबसे अच्छा समाधान यह है कि कस्टम इंटरैक्टिव कंट्रोल का इस्तेमाल न करें.
उदाहरण के लिए, बटन की तरह काम करने वाले <div> को असल <button> से बदलें.
सेमैनटिक प्रॉपर्टी और सुलभता ट्री
आम तौर पर, हर एचटीएमएल एलिमेंट में सेमैटिक प्रॉपर्टी में से कुछ एक होंगी:
- भूमिका या टाइप
- नाम
- value (ज़रूरी नहीं)
- state (ज़रूरी नहीं)
एलिमेंट की भूमिका से उसके टाइप के बारे में पता चलता है. उदाहरण के लिए, div और span एलिमेंट के लिए, "बटन", "इनपुट" या सिर्फ़ "ग्रुप".
एलिमेंट का नाम, उसका कंप्यूट किया गया लेबल होता है. आम तौर पर, स्क्रीन रीडर ऐप्लिकेशन किसी एलिमेंट का नाम बोलते हैं.इसके बाद, उसकी भूमिका के बारे में बताते हैं. जैसे, "साइन अप, बटन." एलिमेंट के नाम का पता लगाने वाला एल्गोरिदम, इन बातों को ध्यान में रखता है: एलिमेंट में कोई टेक्स्ट कॉन्टेंट है या नहीं, उसमें title या placeholder जैसे एट्रिब्यूट हैं या नहीं, एलिमेंट किसी असल <label> एलिमेंट से जुड़ा है या नहीं, और एलिमेंट में aria-label और aria-labelledby जैसे ARIA एट्रिब्यूट हैं या नहीं.
कुछ एलिमेंट में वैल्यू हो सकती है. उदाहरण के लिए, <input type="text"> की वैल्यू में वह टेक्स्ट दिख सकता है जिसे उपयोगकर्ता ने टेक्स्ट फ़ील्ड में टाइप किया है.
कुछ एलिमेंट में स्थिति भी हो सकती है. इससे उनकी मौजूदा स्थिति का पता चलता है.
उदाहरण के लिए, <select> एलिमेंट बड़ा या छोटा हो सकता है. यह इस बात पर निर्भर करता है कि वह खुला है या बंद.
सुलभता ट्री
डीओएम में मौजूद हर नोड के लिए, ब्राउज़र यह तय करता है कि वह नोड, सेमेटिक तौर पर "दिलचस्प" है या नहीं. साथ ही, उसे सुलभता ट्री में जोड़ता है. जब स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी, उपयोगकर्ता को कोई वैकल्पिक यूज़र इंटरफ़ेस उपलब्ध कराती है, तो अक्सर ऐसा सुलभता ट्री की मदद से किया जाता है.
Chrome के DevTools का इस्तेमाल करके, किसी एलिमेंट की सेमैटिक प्रॉपर्टी की जांच की जा सकती है. साथ ही, ऐक्सेसibililty ट्री में उसकी स्थिति के बारे में भी पता लगाया जा सकता है.
अगले चरण
सेमेटिक्स और स्क्रीन रीडर नेविगेशन में उनकी मदद करने के तरीके के बारे में थोड़ा जानने के बाद, आपके बनाए गए पेजों को अलग नज़र से देखना पड़ता है. अगले सेक्शन में, हम थोड़ा पीछे हटकर इस बारे में बात करेंगे कि असरदार शीर्षकों और लैंडमार्क का इस्तेमाल करके, किसी पेज की पूरी आउटलाइन कैसे दी जा सकती है.