डिजिटल सुलभता बनाने और डिज़ाइन करते समय, स्ट्रक्चर के साथ-साथ कई ऐसे एचटीएमएल एलिमेंट पर भी ध्यान देना ज़रूरी है जिन पर ध्यान देना ज़रूरी है. 'सुलभता जानें' कोर्स में, हमने बहुत सारी चीज़ों पर बात की है.
यह मॉड्यूल ऐसे खास एलिमेंट पर फ़ोकस करता है जो किसी भी दूसरे मॉड्यूल में फ़िट नहीं होते, लेकिन उन्हें समझना उपयोगी है.
पेज का शीर्षक
एचटीएमएल <title> एलिमेंट से उस पेज या स्क्रीन के कॉन्टेंट के बारे में पता चलता है जिसे उपयोगकर्ता देखना चाहता है. यह एचटीएमएल दस्तावेज़ के <head> सेक्शन में मौजूद होता है और यह <h1> या पेज के मुख्य विषय से मेल खाता है. शीर्षक का कॉन्टेंट, ब्राउज़र टैब में दिखता है. इससे उपयोगकर्ताओं को यह समझने में मदद मिलती है कि वे किस पेज पर जा रहे हैं. हालांकि, इसे वेबसाइट या ऐप्लिकेशन पर नहीं दिखाया जाता.
एक पेज वाले ऐप्लिकेशन (एसपीए) में, <title> को थोड़े अलग तरीके से हैंडल किया जाता है, क्योंकि उपयोगकर्ता एक से ज़्यादा पेज वाली वेबसाइटों पर एक पेज से दूसरे पेज पर नहीं जाते. एसपीए के लिए, document.title प्रॉपर्टी की वैल्यू को मैन्युअल तरीके से या JavaScript फ़्रेमवर्क के आधार पर किसी हेल्पर पैकेज की मदद से जोड़ा जा सकता है. स्क्रीन रीडर इस्तेमाल करने वाले को, पेज के अपडेट किए गए टाइटल का एलान करने पर, ज़्यादा मेहनत करनी पड़ सकती है.
पेज की जानकारी देने वाले शीर्षक, उपयोगकर्ताओं के साथ-साथ सर्च इंजन ऑप्टिमाइज़ेशन (एसईओ), दोनों के लिए अच्छे होते हैं, लेकिन ज़रूरत से ज़्यादा कीवर्ड न जोड़ें. जब कोई AT उपयोगकर्ता किसी पेज पर जाता है, तब शीर्षक सबसे पहला एलान होता है. यह सटीक, यूनीक, और जानकारी देने वाला होना चाहिए. साथ ही, यह छोटा भी होना चाहिए.
पेज के टाइटल लिखते समय, अंदरूनी पेज या ज़रूरी कॉन्टेंट को पहले "फ़्रंट लोड" कर लें. इसके बाद, पहले वाले पेज या जानकारी को जोड़ दें. इस तरह, AT उपयोगकर्ताओं को उस जानकारी को समझने की ज़रूरत नहीं होती है जिसके बारे में उन्होंने पहले से सुना है.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
Language
पेज की भाषा
पेज भाषा एट्रिब्यूट (lang) पूरे पेज के लिए डिफ़ॉल्ट भाषा सेट करता है. इस एट्रिब्यूट को <html> टैग में जोड़ा गया है. हर पेज पर एक मान्य भाषा एट्रिब्यूट जोड़ा जाना चाहिए, क्योंकि यह AT को यह सिग्नल देता है कि उसे किस भाषा का इस्तेमाल करना चाहिए.
हमारा सुझाव है कि बेहतर AT कवरेज के लिए, आप दो वर्णों वाले ISO भाषा कोड का इस्तेमाल करें, क्योंकि उनमें से कई कोड बड़े किए गए भाषा कोड के साथ काम नहीं करते.
जब कोई भाषा एट्रिब्यूट पूरी तरह से मौजूद नहीं होता है, तो AT डिफ़ॉल्ट रूप से उपयोगकर्ता की प्रोग्राम की गई भाषा पर सेट हो जाता है. उदाहरण के लिए, अगर AT को स्पैनिश पर सेट किया गया है, लेकिन कोई उपयोगकर्ता अंग्रेज़ी की वेबसाइट या ऐप्लिकेशन पर जाता है, तो AT अंग्रेज़ी टेक्स्ट को स्पैनिश उच्चारण और लय के साथ पढ़ने की कोशिश करेगा. इस कॉम्बिनेशन के कारण एक बेकार डिजिटल प्रॉडक्ट हो जाता है और उपयोगकर्ता परेशान हो जाता है.
<html>...</html>
<html lang="en">...</html>
भाषा एट्रिब्यूट के साथ सिर्फ़ एक भाषा जुड़ी हो सकती है. इसका मतलब है कि
<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>) का इस्तेमाल, पेज में किसी दूसरे एचटीएमएल पेज या किसी तीसरे पक्ष का कॉन्टेंट होस्ट करने के लिए किया जाता है. यह ज़रूरी रूप से, पैरंट पेज में एक और वेबपेज डाल देता है. iframe का इस्तेमाल आम तौर पर, विज्ञापनों, एम्बेड किए गए वीडियो, वेब ऐनलिटिक्स, और इंटरैक्टिव कॉन्टेंट के लिए किया जाता है.
आपके <iframe> को ऐक्सेस करने लायक बनाने के लिए, आपको कुछ बातों का ध्यान रखना होगा. सबसे पहले, अलग कॉन्टेंट वाले हर <iframe> के लिए, पैरंट टैग में टाइटल एलिमेंट शामिल किया जाना चाहिए. यह शीर्षक AT उपयोगकर्ताओं को <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">lang एट्रिब्यूट के साथ सिर्फ़ एक भाषा जुड़ी हो सकती है.<html> के लिए मुख्य lang सेट करें. साथ ही, ऐसे किसी भी एलिमेंट पर दूसरी भाषाएं सेट करें जिसका कॉन्टेंट किसी दूसरी भाषा में है.<html> भाषा के एट्रिब्यूट पर निर्भर करेगी. अगर आपके पास कई भाषाओं वाला टेक्स्ट है, तो उससे जुड़े एलिमेंट (जैसे कि कोई सेक्शन या पैराग्राफ़) में, दो अक्षरों वाले सही ISO कोड के साथ lang एट्रिब्यूट जोड़ना न भूलें.