डिजिटल सुलभता का सबसे अहम पहलू यह है कि इसमें पेज का स्ट्रक्चर. जब इसका इस्तेमाल करके अपनी वेबसाइट या ऐप्लिकेशन को बनाया जाता है स्ट्रक्चरल एलिमेंट के बजाय, सिर्फ़ स्टाइल पर निर्भर रहना पड़ता है. ऐसे में, आप सहायक डिवाइसों का इस्तेमाल करने वाले लोगों को अहम संदर्भ देते हैं टेक्नोलॉजी (AT) जैसे कि स्क्रीन रीडर.
स्ट्रक्चरल एलिमेंट, स्क्रीन पर कॉन्टेंट के लिए आउटलाइन के तौर पर काम करते हैं. हालांकि, वे ये कॉन्टेंट के बीच में आसानी से नेविगेट करने के लिए ऐंकर पॉइंट के तौर पर भी काम करते हैं.
जब आप सिमेंटिक एचटीएमएल एलिमेंट का इस्तेमाल करते हैं, तो हर एलिमेंट का पहले से मौजूद मतलब सुलभता ट्री के पास भेज दिया जाता है और AT का इस्तेमाल करके, कॉन्टेंट को बिना मतलब वाले एलिमेंट के ज़्यादा बेहतर तरीके से समझाया जाता है. ऐसा हो सकता है कि आपको अपने ऐप्लिकेशन को बनाने के लिए, अतिरिक्त ARIA एट्रिब्यूट जोड़ने पड़ें उपयोगकर्ता अनुभव को बेहतर बनाने के लिए किया जा सकता है. हालांकि, ज़्यादातर मामलों में स्थितियों में, 100+ एचटीएमएल एलिमेंट में से किसी एक को अपने आप में काफ़ी अच्छी तरह से काम करती है.
यह मॉड्यूल सबसे ज़्यादा इस्तेमाल किए जाने वाले बुनियादी संरचना पर फ़ोकस करता है तो डिजिटल सुलभता के लिए, कुछ अतिरिक्त एलिमेंट और पर्यावरण से जुड़े ऐसे फ़ैक्टर जिन पर आपको अपनी वेबसाइट का स्ट्रक्चर बनाते समय या है. ये उदाहरण, विषय के बारे में जानकारी देने के लिए हैं. इनमें सभी तरह के कॉन्टेंट शामिल नहीं हैं.
लैंडमार्क
AT के उपयोगकर्ता, संरचनात्मक तत्वों पर निर्भर होते हैं, ताकि उन्हें का पूरा लेआउट देखा जा सकता है. कॉन्टेंट के बड़े हिस्सों को अलग-अलग सेक्शन में भेजते समय, जोड़ने के लिए, ARIA लैंडमार्क रोल या नए एचटीएमएल लैंडमार्क एलिमेंट का इस्तेमाल करें आपके पेज के संरचनात्मक संदर्भ को समझ में आता है.
लैंडमार्क यह पक्का करते हैं कि कॉन्टेंट उन इलाकों में दिखे जहां इसे नेविगेट किया जा सकता है. हमारा सुझाव है कि आप हर पेज के लिए कम से कम एक लैंडमार्क दें.
कुछ संसाधन ARIA और HTML लैंडमार्क को एक साथ मिलाने का सुझाव देते हैं ताकि AT के तौर पर बेहतर कवरेज मिल सके. हालांकि, इस तरह की रिडंडंसी को की वजह से आपके उपयोगकर्ताओं को कोई समस्या होती है, तो स्क्रीन रीडर का इस्तेमाल करके पैटर्न की जांच करें कोई बात नहीं. जब आपको संदेह हो, तो डिफ़ॉल्ट रूप से सिर्फ़ नया HTML इस्तेमाल करना सबसे अच्छा होता है लैंडमार्क एलिमेंट, जैसे कि ब्राउज़र समर्थन मज़बूत.
आइए, एचटीएमएल लैंडमार्क एलिमेंट की तुलना इस तरह करते हैं मैप किया गया है मिलता-जुलता ARIA लैंडमार्क रोल है.
| एचटीएमएल लैंडमार्क एलिमेंट | ARIA लैंडमार्क रोल |
|---|---|
<header> |
बैनर |
<aside> |
पूरक |
<footer> |
contentinfo |
<nav>
|
नेविगेशन |
<main> |
मुख्य |
<form> 1 |
फ़ॉर्म |
<section> 1 |
क्षेत्र |
आइए, अब कॉन्टेंट के अलग-अलग स्ट्रक्चर के ऐसे उदाहरणों की तुलना करें जिन्हें ऐक्सेस किया जा सकता है.
<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 के उपयोगकर्ताओं के लिए, हेडिंग के लेवल का क्रम खास तौर पर ज़रूरी है
क्योंकि यह कॉन्टेंट को नेविगेट करने के उनके मुख्य तरीकों में से एक है.
टाइटल के सही सिमैंटिक स्ट्रक्चर और क्रम का पालन करने में आपकी मदद करने के लिए, शीर्ष स्तर से अपनी CSS शैलियों को अलग करने पर विचार करें. इससे आपको हेडिंग स्टाइल में ज़्यादा सुविधा मिलती है और हेडिंग लेवल का क्रम भी बना रहता है. यह ज़रूरी है कि हेडिंग बनाने के लिए सिर्फ़ स्टाइल का इस्तेमाल न करें, क्योंकि 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>
सूचियां
एचटीएमएल सूचियां आइटम को एक-दूसरे से मिलते-जुलते शब्दों में ग्रुप करने का तरीका बताया गया है. इससे वे चीज़ें पहले से मौजूद होती हैं यानी किराने की दुकान की सूची या कभी खत्म न होने वाली सूची जैसा .
एचटीएमएल सूचियां तीन तरह की होती हैं:
सूची में मौजूद आइटम <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>.
लेआउट टेबल, ARIA वाले AT उपयोगकर्ताओं से छिपी होनी चाहिए प्रज़ेंटेशन की भूमिका या 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>
Data
लेआउट टेबल, जिसे 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>