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