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

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

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

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

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

लैंडमार्क

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

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

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

आइए, एचटीएमएल लैंडमार्क एलिमेंट की तुलना मैप किए गए से करते हुए, उनके बराबर 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> में क्रम में आगे बढ़ना चाहिए. AT के उपयोगकर्ताओं के लिए हेडिंग लेवल का क्रम अहम है, क्योंकि यह कॉन्टेंट में नेविगेट करने के मुख्य तरीकों में से एक है.

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

जब हम नकली हेडिंग का इस्तेमाल करते हैं, तो AT के उपयोगकर्ताओं को सही स्ट्रक्चर की जानकारी नहीं दी जाती है.

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

<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>
• ब्यौरा <dl>

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

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

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

<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>.

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

<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>

डेटा

लेआउट टेबल, जिसे AT उपयोगकर्ताओं से छिपा दिया जाना चाहिए, के उलट एक डेटा टेबल और उसके सभी एलिमेंट सार्वजनिक होने चाहिए. उपयोगकर्ताओं को आसान और जटिल जानकारी देने के लिए, डेटा टेबल का स्ट्रक्चर काफ़ी अहम होता है.

जब टेबल को सही तरीके से बनाया जाता है, तो कॉलम हेडर और पंक्तियों और टेबल के डेटा के बीच संबंध बन जाते हैं. गलत तरीके से स्ट्रक्चर करने पर, उपयोगकर्ता को टेबल में दी गई जानकारी का मतलब और संदर्भ समझ में नहीं आता है.

टेबल की जटिलता के आधार पर, कोड के ज़रिए संबंध बनाने की प्रक्रिया को अलग-अलग तरीकों से पूरा किया जाता है. टेबल को ऐक्सेस करने लायक बनाने के लिए सबसे पहले, हेडर सेल को <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>