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