main, nav, और aside जैसे HTML5 एलिमेंट, पेज पर लैंडमार्क या खास क्षेत्रों के तौर पर काम करते हैं. यहां स्क्रीन रीडर और दूसरी सहायक टेक्नोलॉजी जा सकती हैं.
लैंडमार्क एलिमेंट का इस्तेमाल करके, सहायक टेक्नोलॉजी के उपयोगकर्ताओं के लिए, अपनी साइट पर नेविगेशन के अनुभव को बेहतर बनाया जा सकता है.
डेक यूनिवर्सिटी के एचटीएमएल 5 और ARIA लैंडमार्क में ज़्यादा जानें.
लैंडमार्क को मैन्युअल तरीके से देखने का तरीका
W3C की लैंडमार्क एलिमेंट की सूची का इस्तेमाल करके पता लगाएं कि आपके पेज का हर मुख्य सेक्शन किसी लैंडमार्क एलिमेंट में शामिल है या नहीं. उदाहरण के लिए:
<header>
<p>Put product name and logo here</p>
</header>
<nav>
<ul>
<li>Put navigation here</li>
</ul>
</nav>
<main>
<p>Put main content here</p>
</main>
<footer>
<p>Put copyright info, supplemental links, etc. here</p>
</footer>
अपने पेज के स्ट्रक्चर को विज़ुअलाइज़ करने और उन सेक्शन को देखने के लिए, जो लैंडमार्क में शामिल नहीं हैं, Microsoft के Accessibility Insights एक्सटेंशन जैसे टूल का भी इस्तेमाल किया जा सकता है:
लैंडमार्क का इस्तेमाल बेहतर तरीके से करने का तरीका
<div>या<span>जैसे जेनरिक एलिमेंट पर भरोसा करने के बजाय, अपने पेज के मुख्य सेक्शन के बारे में बताने के लिए लैंडमार्क एलिमेंट का इस्तेमाल करें.- अपने पेज की बनावट बताने के लिए लैंडमार्क का इस्तेमाल करें.
उदाहरण के लिए,
<main>एलिमेंट में ऐसा कॉन्टेंट होना चाहिए जो पेज के मुख्य आइडिया से सीधे तौर पर जुड़ा हो. इसलिए, हर पेज पर सिर्फ़ एक कॉन्टेंट होना चाहिए. हर लैंडमार्क को इस्तेमाल करने का तरीका जानने के लिए, कॉन्टेंट सेक्शन करने वाले एलिमेंट के एमडीएन की खास जानकारी देखें. - लैंडमार्क का इस्तेमाल सोच-समझकर करें. बहुत ज़्यादा लैंडमार्क होने से, सहायक टेक्नोलॉजी इस्तेमाल करने वालों के लिए, नेविगेशन ज़्यादा मुश्किल हो सकता है. इससे लोग मनचाहे कॉन्टेंट पर आसानी से नहीं जा पाते हैं.
ज़्यादा जानकारी के लिए, शीर्षक और लैंडमार्क वाली पोस्ट देखें.