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