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