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