कॉन्टेंट का स्ट्रक्चर

डिजिटल ऐक्सेस की सुविधा के लिए, पेज का बुनियादी स्ट्रक्चर सबसे अहम होता है. अपनी वेबसाइट या ऐप्लिकेशन को सिर्फ़ स्टाइल के बजाय, स्ट्रक्चरल एलिमेंट का इस्तेमाल करके बनाने पर, स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी (एटी) का इस्तेमाल करने वाले लोगों को अहम जानकारी मिलती है.

स्ट्रक्चरल एलिमेंट, स्क्रीन पर कॉन्टेंट की आउटलाइन के तौर पर काम करते हैं. हालांकि, ये एलिमेंट कॉन्टेंट में आसानी से नेविगेट करने के लिए, ऐंकर पॉइंट के तौर पर भी काम करते हैं.

सिमेंटिक एचटीएमएल एलिमेंट का इस्तेमाल करने पर, हर एलिमेंट का मूल मतलब, सुलभता ट्री को भेजा जाता है और एटी इसका इस्तेमाल करता है. इससे, कॉन्टेंट को सिमेंटिक एलिमेंट के मुकाबले ज़्यादा अहम बना दिया जाता है. ऐसा हो सकता है कि आपको रिलेशनशिप बनाने या उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, ज़्यादा ARIA एट्रिब्यूट जोड़ने पड़ें. हालांकि, ज़्यादातर मामलों में, उपलब्ध 100 से ज़्यादा एचटीएमएल एलिमेंट में से कोई एक अपने-आप ठीक से काम करेगा.

इस मॉड्यूल में, डिजिटल ऐक्सेस के लिए ज़रूरी स्ट्रक्चरल एलिमेंट पर फ़ोकस किया गया है. हालांकि, अपनी वेबसाइट या ऐप्लिकेशन में स्ट्रक्चर बनाते समय, अन्य एलिमेंट और पर्यावरण से जुड़े फ़ैक्टर पर भी ध्यान देना ज़रूरी है. ये उदाहरण, विषय के बारे में जानकारी देने के मकसद से दिए गए हैं.

लैंडमार्क

एटी के उपयोगकर्ता, पेज के पूरे लेआउट के बारे में जानकारी पाने के लिए, स्ट्रक्चरल एलिमेंट पर भरोसा करते हैं. कॉन्टेंट के बड़े हिस्सों को सेक्शन में बांटते समय, अपने पेज में स्ट्रक्चरल कॉन्टेक्स्ट जोड़ने के लिए, ARIA लैंडमार्क रोल या नए एचटीएमएल लैंडमार्क एलिमेंट का इस्तेमाल किया जा सकता है.

लैंडमार्क से यह पक्का होता है कि कॉन्टेंट, नेविगेट किए जा सकने वाले इलाकों में मौजूद है. हमारा सुझाव है कि आप हर पेज पर कम से कम एक लैंडमार्क दें.

कुछ संसाधनों में, एटी को बेहतर कवरेज देने के लिए, एआरआई और एचटीएमएल लैंडमार्क को एक साथ इस्तेमाल करने का सुझाव दिया गया है. इस तरह के डुप्लीकेट एलिमेंट से, आपके उपयोगकर्ताओं को कोई समस्या नहीं होनी चाहिए. हालांकि, पक्का करने के लिए स्क्रीन रीडर का इस्तेमाल करके पैटर्न की जांच करें. अगर आपको कोई संदेह है, तो डिफ़ॉल्ट रूप से सिर्फ़ नए एचटीएमएललैंडमार्क एलिमेंट का इस्तेमाल करना सबसे अच्छा है. ऐसा इसलिए, क्योंकि ब्राउज़र के साथ काम करने की सुविधा बहुत बेहतर है.

आइए, एचटीएमएल लैंडमार्क एलिमेंट की तुलना, उनके मैप किए गए ARIA लैंडमार्क रोल से करें.

एचटीएमएल लैंडमार्क एलिमेंट ARIA लैंडमार्क की भूमिका
<header> banner
<aside> पूरक
<footer> contentinfo
<nav> नेविगेशन
<main> main
<form> 1 फ़ॉर्म
<section> 1 region
1 ऐक्सेस करने के लिए, name एट्रिब्यूट को शामिल करना ज़रूरी है. section को सुलभता के हिसाब से नाम दिया जाना चाहिए, ताकि सहायक टेक्नोलॉजी को region की 'असाइन की गई ARIA भूमिका' दिखे.

अब, ऐक्सेस किए जा सकने वाले कॉन्टेंट के स्ट्रक्चर के उदाहरणों की तुलना करें.

यह न करें
<div>
    <div>...</div>
</div>

<div>
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
</div>

<div>
<p>© 2022 - Stamps R Awesome</p>
</div>
यह करें
<header>
    <nav>...</nav>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
    </section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>

शीर्षक

सही तरीके से लागू किए जाने पर, एचटीएमएल हेडिंग लेवल, पूरे पेज के कॉन्टेंट की खास जानकारी देते हैं.

हेडिंग के छह लेवल इस्तेमाल किए जा सकते हैं. हेडिंग लेवल वन <h1> का इस्तेमाल, पेज की सबसे अहम और ज़्यादा जानकारी के लिए किया जाता है. इसके बाद, हेडिंग लेवल सिक्स <h6> का इस्तेमाल, सबसे कम और कम अहम जानकारी के लिए किया जाता है.

हेडिंग लेवल का क्रम अहम होता है. आम तौर पर, हेडिंग के लेवल को स्किप नहीं किया जाता. उदाहरण के लिए, किसी सेक्शन को <h1> से शुरू करके, तुरंत <h5> से शुरू नहीं किया जाता. इसके बजाय, आपको <h5> पर क्रम से जाना चाहिए. एटी (ऑडियो ट्रांसक्रिप्शन) का इस्तेमाल करने वाले लोगों के लिए, हेडिंग लेवल का क्रम खास तौर पर अहम है, क्योंकि यह कॉन्टेंट पर नेविगेट करने का उनका मुख्य तरीका है.

हेडिंग के लिए सही सेमेटिक स्ट्रक्चर और क्रम का पालन करने में आपकी मदद करने के लिए, अपनी सीएसएस स्टाइल को हेडिंग लेवल से अलग करें. इससे आपको हेडलाइन के लेवल का क्रम बनाए रखते हुए, हेडलाइन के स्टाइल में ज़्यादा बदलाव करने की सुविधा मिलती है. यह ज़रूरी है कि हेडिंग बनाने के लिए सिर्फ़ स्टाइल का इस्तेमाल न किया जाए. ऐसा इसलिए, क्योंकि एटी इन हेडिंग को हेडिंग के तौर पर नहीं देखता.

जब हम हेडिंग में बदलाव करते हैं, तो एटी (ऑगमेंटेड टेक्नोलॉजी) का इस्तेमाल करने वाले लोगों को सही स्ट्रक्चर नहीं दिखता.

हेडलाइन उन लोगों के लिए भी मददगार होती हैं जिन्हें सीखने और ध्यान देने से जुड़ी समस्याएं होती हैं. शीर्षक के कॉन्टेंट को काम का बनाना ज़रूरी है, ताकि उन्हें यह समझने में मदद मिल सके कि पेज पर कौनसी चीज़ सबसे अहम है.

यह न करें
<div>
    <h3>Stamps</h3>
    <p>Stamp collecting, also known as philately, is the study of
  postage stamps, stamped envelopes, postmarks, postcards, and
  other materials relating to postal delivery.</p>
</div>

<div>
    <h3>How do I start a stamp collection?</h3>
  <h2>Equipment you will need</h2>
    <h4>...</h4>
  <h2>How to acquire stamps</h2>
    <h4>...</h4>
  <h2>Organizations you can join</h2>
    <h4>...</h4>
</div>
यह करें
<header>
  <h1>Stamp collecting</h1>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
        <h2>What is stamp collecting?</h2>
        <p>Stamp collecting, also known as philately, is the study of
    postage stamps, stamped envelopes, postmarks, postcards, and
    other materials relating to postal delivery.</p>
    </section>

    <section aria-label="Start a stamp collection">
        <h2>How do I start a stamp collection?</h2>
    <h3>Required equiment</h3>
    <p>...</p>

    <h3>How to acquire stamps</h3>
    <p>...</p>

    <h3>Organizations you can join</h3>
        <p>...</p>
    </section>
</main>

सूचियां

एचटीएमएल सूचियां, एक जैसे आइटम को एक साथ ग्रुप करने का एक तरीका है. इससे, उन आइटम को एक खास मतलब मिलता है. जैसे, किराने की दुकान की सूची या कभी न खत्म होने वाली 'क्या-क्या करें' सूची, जिसे अक्सर अनदेखा किया जाता है.

एचटीएमएल सूचियां तीन तरह की होती हैं:

  • ऑर्डर किया गया <ol>
  • बिना क्रम के <ul>
  • description <dl>

लिस्ट आइटम <li> एलिमेंट का इस्तेमाल, किसी आइटम को क्रम से या बिना क्रम वाली सूची में दिखाने के लिए किया जाता है. वहीं, ब्यौरे के लिए शब्द <dt> और परिभाषा <dd> एलिमेंट, ब्यौरे की सूची में मिल सकते हैं.

सही तरीके से प्रोग्राम किए जाने पर, ये एलिमेंट, एटी का इस्तेमाल करने वाले ऐसे लोगों को सूची के दिखने वाले स्ट्रक्चर के बारे में बता सकते हैं जो देख नहीं सकते. जब किसी एटी को सेमैटिक सूची मिलती है, तो वह उपयोगकर्ता को सूची का नाम और उसमें मौजूद आइटम की संख्या बता सकता है. जब उपयोगकर्ता सूची में नेविगेट करता है, तो एटी सूची में मौजूद हर आइटम को ज़ोर से पढ़कर सुनाएगा. साथ ही, यह भी बताएगा कि सूची में वह आइटम किस नंबर पर है—पांच में से पहला आइटम, पांच में से दूसरा आइटम वगैरह.

आइटम को सूचियों में ग्रुप करने से, उन लोगों को भी मदद मिलती है जो देख सकते हैं, लेकिन जिनमें सीखने और ध्यान देने से जुड़ी समस्याएं हैं. साथ ही, जिन लोगों को पढ़ने में परेशानी होती है उन्हें भी इससे मदद मिलती है. ऐसा इसलिए, क्योंकि सूची के कॉन्टेंट को आम तौर पर इस तरह से स्टाइल किया जाता है कि उसमें ज़्यादा खाली जगह हो और कॉन्टेंट काम का हो.

यह न करें
<div>
  <p>How do I start a stamp collection?</p>
  <p>Equipment you will need</p>
    <div>
      <p>Small tongs with rounded tips</p>
      <p>Stamp hinges</p>
      <p>Stockbook or albumn</p>
      <p>Magnifying glass</p>
      <p>Stamps</p>
    </div>
</div>
यह करें
<div>
  <h1>How do I start a stamp collection?</h1>
  <h2>Equipment you will need</h2>
  <ol>
    <li>Small tongs with rounded tips</li>
    <li>Stamp hinges</li>
    <li>Stockbook or albumn</li>
    <li>Magnifying glass</li>
    <li>Stamps</li>
  </ol>
</div>

तालिकाएं

एचटीएमएल में, टेबल का इस्तेमाल आम तौर पर डेटा या पेज लेआउट को व्यवस्थित करने के लिए किया जाता है.

टेबल के मकसद के आधार पर, आपको अलग-अलग सेमैंटिक स्ट्रक्चरल एलिमेंट इस्तेमाल करने होंगे. टेबल का स्ट्रक्चर बहुत जटिल हो सकता है. हालांकि, अगर सेमेटिक के बुनियादी नियमों का पालन किया जाता है, तो उन्हें बिना किसी रुकावट के ऐक्सेस किया जा सकता है.

लेआउट

इंटरनेट के शुरुआती दिनों में, विज़ुअल स्ट्रक्चर बनाने के लिए, लेआउट टेबल मुख्य एचटीएमएल एलिमेंट थे. फ़िलहाल, हम लेआउट बनाने के लिए, सिमेंटिक और नॉन-सिमेंटिक एलिमेंट का इस्तेमाल करते हैं. जैसे, <div> और लैंडमार्क.

लेआउट टेबल बनाने का ज़माना अब बीत चुका है. हालांकि, अब भी कुछ मामलों में लेआउट टेबल का इस्तेमाल किया जाता है. जैसे, विज़ुअल तौर पर बेहतर ईमेल, न्यूज़लेटर, और विज्ञापनों में. इन मामलों में, सिर्फ़ लेआउट के लिए इस्तेमाल की जाने वाली टेबल में, स्ट्रक्चरल एलिमेंट का इस्तेमाल नहीं किया जाना चाहिए. ये एलिमेंट, टेबल के एलिमेंट के बीच के संबंधों के बारे में बताते हैं और टेबल में कॉन्टेक्स्ट जोड़ते हैं. जैसे, <th> या <caption>.

लेआउट टेबल को एटी के उपयोगकर्ताओं से भी छिपाना चाहिए. इसके लिए, ARIA के प्रज़ेंटेशन रोल या aria-hidden स्टेटस का इस्तेमाल करें.

यह न करें
<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>
यह करें
<table role="presentation">
  <tr>
    <td>[Stamp Image 1]</td>
    <td>[Stamp Image 2]</td>
    <td>[Stamp Image 3]</td>
  </tr>
</table>

Data

लेआउट टेबल को एटी के उपयोगकर्ताओं से छिपाया जाना चाहिए. इसके उलट, डेटा टेबल और उसके सभी एलिमेंट को दिखाया जाना चाहिए. उपयोगकर्ताओं को आसान और मुश्किल जानकारी देने के लिए, डेटा टेबल का स्ट्रक्चर ज़रूरी है.

जब टेबल को सही तरीके से स्ट्रक्चर किया जाता है, तो कॉलम के हेडर और लाइनों के साथ-साथ टेबल में मौजूद डेटा के बीच संबंध बनते हैं. अगर टेबल को गलत तरीके से स्ट्रक्चर किया गया है, तो उपयोगकर्ता को टेबल में मौजूद जानकारी का मतलब और संदर्भ समझने में परेशानी होती है.

टेबल की जटिलता के आधार पर, कोड के ज़रिए रिलेशनशिप बनाने के अलग-अलग तरीके अपनाए जाते हैं. टेबल को ऐक्सेस करने के लिए सबसे पहले, हेडर सेल को <th> और डेटा सेल को <td> एलिमेंट से मार्क अप करें.

ज़्यादा जटिल टेबल के लिए, आपको एचटीएमएल टेबल के अन्य एलिमेंट का इस्तेमाल करना पड़ सकता है. जैसे, <rowgroup>, <colgroup>, <caption>, और scope. इन एलिमेंट का इस्तेमाल करके, टेबल के डेटा का मतलब और उसके बीच के संबंधों के बारे में बताया जा सकता है.

यह न करें
<table>
  <tr>
    <td>Animal</td>
    <td>Year</td>
    <td>Condition</td>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>
यह करें
<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>Animal</th>
    <th>Year</th>
    <th>Condition</th>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>