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