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