पेज नेविगेशन में सिमेंटिक्स की भूमिका
आपने सुविधाओं, सेमेटिक्स, और सहायक टेक्नोलॉजी के बारे में जाना है. साथ ही, यह भी जाना है कि सहायक टेक्नोलॉजी, उपयोगकर्ताओं के लिए वैकल्पिक उपयोगकर्ता अनुभव बनाने के लिए, सुलभता ट्री का इस्तेमाल कैसे करती हैं. इससे पता चलता है कि बेहतर और सिमेंटिक एचटीएमएल लिखने से, आपको बहुत कम मेहनत में कई तरह की ऐक्सेसibilit
इस लेसन में, हम कुछ ऐसे सेमेटिक्स के बारे में बताएंगे जो स्क्रीन रीडर के उपयोगकर्ताओं के लिए काफ़ी अहम हैं. खास तौर पर, नेविगेशन के लिए. अगर किसी पेज पर बहुत सारे कंट्रोल हैं, लेकिन ज़्यादा कॉन्टेंट नहीं है, तो अपनी ज़रूरत के हिसाब से पेज को आसानी से स्कैन किया जा सकता है. हालांकि, ज़्यादा कॉन्टेंट वाले पेज, जैसे कि Wikipedia का कोई लेख या न्यूज़ एग्रीगेटर पर, सबसे ऊपर से नीचे तक सब कुछ पढ़ना मुमकिन नहीं है. ऐसे में, कॉन्टेंट पर आसानी से नेविगेट करने के लिए, आपको किसी तरीके की ज़रूरत होती है.
डेवलपर अक्सर यह गलतफ़हमी रखते हैं कि स्क्रीन रीडर का इस्तेमाल करना मुश्किल और धीमा होता है. इसके अलावा, वे यह भी सोचते हैं कि स्क्रीन रीडर को स्क्रीन पर मौजूद हर चीज़ पर फ़ोकस करना पड़ता है. हालांकि, ऐसा अक्सर नहीं होता.
जानकारी ढूंढने के लिए, स्क्रीन रीडर का इस्तेमाल करने वाले लोग अक्सर हेडिंग की सूची पर भरोसा करते हैं. ज़्यादातर स्क्रीन रीडर में, पेज की हेडिंग की सूची को अलग करने और स्कैन करने के आसान तरीके होते हैं. इसे रोटर कहा जाता है. आइए, देखते हैं कि इस सुविधा के साथ काम करने के लिए, एचटीएमएल हेडिंग का इस्तेमाल कैसे किया जा सकता है.
हेडिंग का असरदार तरीके से इस्तेमाल करना
सबसे पहले, एक बात दोहराएं: DOM का क्रम मायने रखता है. यह क्रम, फ़ोकस के क्रम के साथ-साथ स्क्रीन रीडर के क्रम के लिए भी ज़रूरी है. VoiceOver, NVDA, JAWS, और ChromeVox जैसे स्क्रीन रीडर का इस्तेमाल करने पर, आपको पता चलेगा कि हेडिंग की सूची, विज़ुअल क्रम के बजाय डीओएम क्रम में दिखती है.
यह बात आम तौर पर स्क्रीन रीडर पर लागू होती है. स्क्रीन रीडर, सुलभता ट्री के साथ इंटरैक्ट करते हैं और सुलभता ट्री, डीओएम ट्री पर आधारित होता है. इसलिए, स्क्रीन रीडर के क्रम का पता लगाने का तरीका, सीधे डीओएम क्रम पर आधारित होता है. इसका मतलब है कि हेडिंग का सही स्ट्रक्चर होना पहले से ज़्यादा ज़रूरी है.
ज़्यादातर अच्छी तरह से बनाए गए पेजों में, हेडिंग लेवल नेस्ट किए जाते हैं, ताकि कॉन्टेंट ब्लॉक के बीच पैरंट-चाइल्ड संबंधों को दिखाया जा सके. WebAIM की चेकलिस्ट में इस तकनीक का बार-बार ज़िक्र किया गया है.
- 1.3.1 में बताया गया है कि "हेडिंग तय करने के लिए, सेमेंटिक मार्कअप का इस्तेमाल किया जाता है"
- 2.4.1 में, हेडर स्ट्रक्चर को कॉन्टेंट के ब्लॉक को बायपास करने की तकनीक के तौर पर बताया गया है
- 2.4.6 इसमें काम की हेडिंग लिखने के बारे में बताया गया है
- 2.4.10 में बताया गया है कि "कॉन्टेंट के अलग-अलग सेक्शन को हेडिंग का इस्तेमाल करके तय किया जाता है, जहां ज़रूरी हो"
सभी हेडलाइन, स्क्रीन पर दिखनी ज़रूरी नहीं हैं. उदाहरण के लिए, Wikipedia में एक ऐसी तकनीक का इस्तेमाल किया जाता है जिससे कुछ हेडिंग को जान-बूझकर स्क्रीन से हटा दिया जाता है. ऐसा इसलिए किया जाता है, ताकि उन्हें स्क्रीन रीडर और अन्य सहायक टेक्नोलॉजी से सिर्फ़ ऐक्सेस किया जा सके.
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
जटिल ऐप्लिकेशन के लिए, यह हेडिंग जोड़ने का एक अच्छा तरीका हो सकता है. ऐसा तब किया जा सकता है, जब विज़ुअल डिज़ाइन में हेडिंग के लिए जगह न हो या उसे दिखाने की ज़रूरत न हो.
नेविगेशन के अन्य विकल्प
अच्छी हेडिंग वाले पेजों पर, स्क्रीन रीडर का इस्तेमाल करने वाले लोग आसानी से नेविगेट कर सकते हैं. हालांकि, पेज पर नेविगेट करने के लिए, लिंक, फ़ॉर्म कंट्रोल, और लैंडमार्क जैसे अन्य एलिमेंट का भी इस्तेमाल किया जा सकता है.
स्क्रीन रीडर की रोटर सुविधा का इस्तेमाल करके, पेज पर मौजूद लिंक की सूची को ऐक्सेस किया जा सकता है. यह सुविधा, पेज की हेडिंग की सूची को अलग करने और स्कैन करने का आसान तरीका है. कभी-कभी, किसी विकी की तरह कई लिंक होते हैं. इसलिए, हो सकता है कि पाठक लिंक में कोई शब्द खोजें. इससे, पेज पर शब्द के हर इस्तेमाल के बजाय, सिर्फ़ उन लिंक पर हिट मिलते हैं जिनमें वह शब्द मौजूद होता है.
यह सुविधा सिर्फ़ तब काम की होती है, जब स्क्रीन रीडर लिंक ढूंढ पाए और लिंक का टेक्स्ट काम का हो. उदाहरण के लिए, यहां कुछ सामान्य पैटर्न दिए गए हैं जिनकी वजह से लिंक ढूंढना मुश्किल हो जाता है.
hrefएट्रिब्यूट के बिना ऐंकर टैग. इन लिंक टारगेट का इस्तेमाल अक्सर एक पेज वाले ऐप्लिकेशन में किया जाता है. इनकी वजह से, स्क्रीन रीडर को समस्याएं आती हैं. सिंगल-पेज ऐप्लिकेशन के बारे में इस लेख में ज़्यादा पढ़ें.- लिंक के साथ लागू किए गए बटन. इनकी वजह से स्क्रीन रीडर, कॉन्टेंट को लिंक के तौर पर समझता है और बटन की सुविधा काम नहीं करती. ऐसे मामलों में, ऐंकर टैग को किसी असली बटन से बदलें और उसे सही तरीके से स्टाइल करें.
- लिंक के कॉन्टेंट के तौर पर इस्तेमाल की गई इमेज. कभी-कभी, लिंक की गई ज़रूरी इमेज, स्क्रीन रीडर के लिए काम की नहीं होतीं. यह पक्का करने के लिए कि लिंक, सहायक टेक्नोलॉजी के लिए सही तरीके से दिखाया गया है, पक्का करें कि इमेज में
altएट्रिब्यूट टेक्स्ट हो.
लिंक का टेक्स्ट खराब होना भी एक समस्या है. क्लिक किए जा सकने वाले टेक्स्ट, जैसे कि "ज़्यादा जानें" या "यहां क्लिक करें" से यह जानकारी नहीं मिलती कि लिंक कहां ले जाता है. इसके बजाय, "रिस्पॉन्सिव डिज़ाइन के बारे में ज़्यादा जानें" या "यह कैनवस ट्यूटोरियल देखें" जैसे जानकारी देने वाले टेक्स्ट का इस्तेमाल करें. इससे स्क्रीन रीडर को लिंक के बारे में सही संदर्भ देने में मदद मिलती है.
रोटर, फ़ॉर्म कंट्रोल की सूची भी वापस ला सकता है. इस सूची का इस्तेमाल करके, पाठक किसी खास आइटम को खोज सकते हैं और सीधे उस पर जा सकते हैं.
स्क्रीन रीडर की एक आम गड़बड़ी, उच्चारण में होती है. उदाहरण के लिए, स्क्रीन रीडर "Udacity" को "oo-dacity" के तौर पर बोल सकता है. इसके अलावा, वह किसी फ़ोन नंबर को बड़े पूर्णांक के तौर पर पढ़ सकता है या बड़े अक्षरों में लिखे गए टेक्स्ट को ऐसा पढ़ सकता है जैसे कि वह कोई छोटा नाम हो. दिलचस्प बात यह है कि स्क्रीन रीडर के उपयोगकर्ता इस समस्या से काफ़ी अच्छी तरह वाकिफ़ होते हैं और इसे ध्यान में रखते हैं.
कुछ डेवलपर, सिर्फ़ स्क्रीन रीडर के लिए, फ़ोनेटिक तरीके से लिखा गया टेक्स्ट उपलब्ध कराकर इस समस्या को हल करने की कोशिश करते हैं. फ़ोनेटिक स्पेलिंग के लिए एक आसान नियम है: इसे इस्तेमाल न करें; इससे समस्या और भी बढ़ जाती है! उदाहरण के लिए, अगर कोई उपयोगकर्ता ब्रेल डिसप्ले का इस्तेमाल कर रहा है, तो शब्द की स्पेलिंग गलत होगी. इससे उपयोगकर्ता को और भी उलझन होगी. स्क्रीन रीडर की मदद से, शब्दों को ज़ोर से पढ़कर सुनाया जा सकता है. इसलिए, यह पाठक पर छोड़ दें कि उसे कब यह सुविधा चाहिए.
पाठक, रोटर का इस्तेमाल करके लैंडमार्क की सूची देख सकते हैं. इस सूची से पाठकों को मुख्य कॉन्टेंट और एचटीएमएल लैंडमार्क एलिमेंट से मिले नेविगेशनल लैंडमार्क का सेट ढूंढने में मदद मिलती है.
HTML5 में कुछ नए एलिमेंट जोड़े गए हैं. इनसे पेज के सेमैंटिक स्ट्रक्चर को तय करने में मदद मिलती है. इनमें header, footer, nav, article, section, main, और
aside शामिल हैं. ये एलिमेंट, पेज में खास तौर पर स्ट्रक्चर से जुड़ी जानकारी देते हैं. ऐसा, पेज में पहले से मौजूद स्टाइल को लागू किए बिना किया जाता है. हालांकि, आपको सीएसएस की मदद से ऐसा करना चाहिए.
सेमेंटिक स्ट्रक्चरल एलिमेंट, एक से ज़्यादा बार दिखने वाले div ब्लॉक की जगह लेते हैं. साथ ही, लेखकों और पाठकों, दोनों के लिए पेज के स्ट्रक्चर को आसानी से समझने के लिए, ज़्यादा जानकारी देने वाला और साफ़ तौर पर बताने वाला तरीका उपलब्ध कराते हैं.