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