पेज नेविगेशन में सिमेंटिक्स की भूमिका
आपने सुविधाओं, सेमेटिक्स, और सहायक टेक्नोलॉजी के बारे में जाना है. साथ ही, यह भी जाना है कि सहायक टेक्नोलॉजी, उपयोगकर्ताओं के लिए वैकल्पिक उपयोगकर्ता अनुभव बनाने के लिए, सुलभता ट्री का इस्तेमाल कैसे करती हैं. आप देख सकते हैं कि एक्सप्रेसिव, सिमैंटिक एचटीएमएल लिखने से आपको बहुत कम मेहनत में बहुत ज़्यादा सुलभता मिल जाती है, क्योंकि कई स्टैंडर्ड एलिमेंट में सिमेंटिक और मददगार व्यवहार, दोनों पहले से मौजूद होते हैं.
इस लेसन में, हम कुछ ऐसे सेमेटिक्स के बारे में बताएंगे जो स्क्रीन रीडर का इस्तेमाल करने वाले लोगों के लिए काफ़ी अहम हैं. खास तौर पर, नेविगेशन के लिए. इस आसान पेज पर कॉन्टेंट के बहुत ज़्यादा कंट्रोल होने के बावजूद, आसानी से पेज को स्कैन किया जा सकता है. हालांकि, बहुत ज़्यादा कॉन्टेंट वाले पेज, जैसे कि 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 ब्लॉक की जगह लेते हैं. साथ ही, लेखकों और पाठकों, दोनों के लिए पेज के स्ट्रक्चर को आसानी से समझने के लिए, ज़्यादा जानकारी देने वाला और साफ़ तौर पर बताने वाला तरीका उपलब्ध कराते हैं.