डिजिटल ऐक्सेस के लिए वेबसाइट बनाते और डिज़ाइन करते समय, स्ट्रक्चर के साथ-साथ कई सहायक एचटीएमएल एलिमेंट का भी ध्यान रखना चाहिए. 'सुलभता के बारे में जानें' कोर्स में, हम कई एलिमेंट कवर करते हैं.
इस मॉड्यूल में खास एलिमेंट पर फ़ोकस किया गया है, जो किसी भी अन्य मॉड्यूल में पूरी तरह से फ़िट नहीं होते. हालांकि, इन्हें समझना ज़रूरी है.
पेज का शीर्षक
एचटीएमएल <title>
एलिमेंट, उस पेज या स्क्रीन के कॉन्टेंट के बारे में बताता है जिसे उपयोगकर्ता देखना चाहता है. यह एचटीएमएल दस्तावेज़ के <head>
सेक्शन में पाया जाता है. यह पेज के <h1>
या मुख्य विषय के बराबर होता है. टाइटल कॉन्टेंट, ब्राउज़र टैब में दिखता है. इससे उपयोगकर्ताओं को यह समझने में मदद मिलती है कि वे किस पेज पर हैं. हालांकि, यह वेबसाइट या ऐप्लिकेशन पर नहीं दिखता.
एक पेज वाले ऐप्लिकेशन (एसपीए) में, <title>
को थोड़े अलग तरीके से मैनेज किया जाता है. ऐसा इसलिए, क्योंकि उपयोगकर्ता एक पेज वाले ऐप्लिकेशन के पेजों के बीच उस तरह से नेविगेट नहीं करते जिस तरह वे कई पेजों वाली वेबसाइटों के पेजों के बीच नेविगेट करते हैं. एसपीए के लिए, document.title
प्रॉपर्टी की वैल्यू को मैन्युअल रूप से या किसी हेल्पर पैकेज की मदद से जोड़ा जा सकता है. यह वैल्यू, JavaScript फ़्रेमवर्क के आधार पर तय होती है. स्क्रीन रीडर का इस्तेमाल करने वाले व्यक्ति को अपडेट किए गए पेज के टाइटल पढ़कर सुनाने के लिए, कुछ और काम करने पड़ सकते हैं.
पेज के ब्यौरे वाले टाइटल, उपयोगकर्ताओं और सर्च इंजन ऑप्टिमाइज़ेशन (एसईओ), दोनों के लिए अच्छे होते हैं. हालांकि, ज़रूरत से ज़्यादा कीवर्ड न जोड़ें. जब कोई एटी उपयोगकर्ता किसी पेज पर जाता है, तो सबसे पहले शीर्षक की जानकारी सुनाई जाती है. इसलिए, यह ज़रूरी है कि शीर्षक सटीक, यूनीक, और जानकारी देने वाला हो. साथ ही, कम शब्दों में हो.
पेज के टाइटल लिखते समय, सबसे पहले अंदरूनी पेज या अहम कॉन्टेंट को "फ़्रंट लोड" करना भी सबसे अच्छा तरीका है. इसके बाद, उससे पहले के पेज या जानकारी जोड़ें. इस तरह, एटी के उपयोगकर्ताओं को पहले से सुनी गई जानकारी सुनने की ज़रूरत नहीं पड़ती.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
भाषा
पेज की भाषा
पेज की भाषा एट्रिब्यूट (lang
), पूरे पेज के लिए डिफ़ॉल्ट भाषा सेट करता है. यह एट्रिब्यूट, <html>
टैग में जोड़ा जाता है. हर पेज पर, मान्य भाषा एट्रिब्यूट जोड़ा जाना चाहिए. इससे एटी को यह सिग्नल मिलता है कि उसे किस भाषा का इस्तेमाल करना चाहिए.
हमारा सुझाव है कि ज़्यादा एटी कवरेज के लिए, दो वर्णों वाले ISO भाषा कोड का इस्तेमाल करें. ऐसा इसलिए, क्योंकि इनमें से कई बड़े किए गए भाषा कोड के साथ काम नहीं करते.
अगर भाषा एट्रिब्यूट मौजूद नहीं है, तो एटी डिफ़ॉल्ट रूप से उपयोगकर्ता की प्रोग्राम की गई भाषा पर सेट हो जाएगा. उदाहरण के लिए, अगर एटी को स्पैनिश पर सेट किया गया है, लेकिन उपयोगकर्ता ने अंग्रेज़ी वेबसाइट या ऐप्लिकेशन पर विज़िट किया है, तो एटी अंग्रेज़ी टेक्स्ट को स्पैनिश उच्चारण और लय में पढ़ने की कोशिश करेगा. इस वजह से, डिजिटल प्रॉडक्ट का इस्तेमाल नहीं किया जा सकता और उपयोगकर्ता परेशान हो जाता है.
<html>...</html>
<html lang="en">...</html>
lang एट्रिब्यूट में सिर्फ़ एक भाषा हो सकती है. इसका मतलब है कि <html>
एट्रिब्यूट में सिर्फ़ एक भाषा हो सकती है. भले ही, पेज पर एक से ज़्यादा भाषाएं हों. lang
को पेज की मुख्य भाषा पर सेट करें.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
सेक्शन की भाषा
कॉन्टेंट में भाषा बदलने के लिए, भाषा एट्रिब्यूट (lang) का इस्तेमाल भी किया जा सकता है. इस एट्रिब्यूट के लिए वही बुनियादी नियम लागू होते हैं जो पूरे पेज की भाषा के एट्रिब्यूट के लिए लागू होते हैं. हालांकि, इस एट्रिब्यूट को <html>
टैग के बजाय, पेज के सही इन-एलिमेंट में जोड़ा जाता है.
याद रखें कि <html>
एलिमेंट में जोड़ी गई भाषा, उसमें मौजूद सभी एलिमेंट पर लागू होती है. इसलिए, पेज के टॉप-लेवल lang
एट्रिब्यूट की मुख्य भाषा हमेशा पहले सेट करें.
पेज पर मौजूद किसी भी ऐसे एलिमेंट के लिए जो किसी दूसरी भाषा में लिखा गया है, उस एलिमेंट के लिए सही रैपर एलिमेंट में lang
एट्रिब्यूट जोड़ें. ऐसा करने पर, टॉप लेवल की भाषा की सेटिंग तब तक बदली रहेगी, जब तक उस एलिमेंट को बंद नहीं किया जाता.
<html lang="en"> <body>... <div> <p>While traveling in Estonia this summer, I often asked, "Kas sa räägid inglise keelt?" when I met someone new.</p> </div> </body> </html>
<html lang="en"> <body>... <div> <p>While traveling in Estonia this summer, I often asked, <span lang="et">"Kas sa räägid inglise keelt?"</span> when I met someone new.</p> </div> </body> </html>
iFrames
iFrame एलिमेंट (<iframe>
) का इस्तेमाल, पेज में किसी दूसरे एचटीएमएल पेज या तीसरे पक्ष के कॉन्टेंट को होस्ट करने के लिए किया जाता है. यह मुख्य रूप से पैरंट पेज में एक और वेबपेज डालता है. आम तौर पर, iFrames का इस्तेमाल विज्ञापनों, एम्बेड किए गए वीडियो, वेब आंकड़ों, और इंटरैक्टिव कॉन्टेंट के लिए किया जाता है.
अपने <iframe>
को ऐक्सेस करने लायक बनाने के लिए, कुछ बातों का ध्यान रखना ज़रूरी है. सबसे पहले, अलग-अलग कॉन्टेंट वाले हर <iframe>
में, पैरंट टैग के अंदर एक टाइटल एलिमेंट शामिल होना चाहिए. यह टाइटल, एटी का इस्तेमाल करने वाले लोगों को <iframe>
में मौजूद कॉन्टेंट के बारे में ज़्यादा जानकारी देता है.
दूसरा, सबसे सही तरीका यह है कि <iframe>
टैग की सेटिंग में स्क्रोलिंग को "अपने-आप" या "हां" पर सेट करें. इससे कम दृष्टि वाले लोग, <iframe>
में मौजूद उस कॉन्टेंट को स्क्रोल कर पाते हैं जो शायद वे न देख पाते. आम तौर पर, <iframe>
कंटेनर की ऊंचाई और चौड़ाई भी बदली जा सकती है.
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<iframe title="Google Pixel - Lizzo in Real Tone" src="https://www.youtube.com/embed/3obixhGZ5ds" scrolling="auto"> </iframe>
देखें कि आपको क्या समझ आया
दस्तावेज़ की सुलभता के बारे में अपनी जानकारी की जांच करें.
आपकी साइट, कई भाषाओं में उपलब्ध ऑनलाइन टेक्स्टबुक है, जहां एक पेज पर कई भाषाएं दिखती हैं. सहायक टेक्नोलॉजी को कॉपी की भाषा बताने का सबसे सही तरीका क्या है?
<html>
एलिमेंट में सभी भाषाएं शामिल करें. उदाहरण के लिए <html lang="en,lt,pl,pt">
<html>
के लिए कोई प्राइमरी lang
सेट करें. साथ ही, किसी भी ऐसे एलिमेंट के लिए अन्य भाषाएं सेट करें जिसमें कॉन्टेंट किसी दूसरी भाषा में हो.