स्क्रीन रीडर में, हेडिंग या खास लैंडमार्क क्षेत्रों के बीच तुरंत जाने के लिए निर्देश होते हैं. दरअसल, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों के एक सर्वे में यह पता चला है कि वे अक्सर किसी नए पेज पर हेडिंग देखकर नेविगेट करते हैं.
सही हेडिंग और लैंडमार्क एलिमेंट का इस्तेमाल करके, सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोगों के लिए अपनी साइट पर नेविगेशन के अनुभव को बेहतर बनाया जा सकता है.
पेज का स्ट्रक्चर बनाने के लिए हेडिंग का इस्तेमाल करना
अपने पेज के लिए स्ट्रक्चरल आउटलाइन बनाने के लिए, h1-h6 एलिमेंट का इस्तेमाल करें. इसका मकसद, पेज का एक स्केलेटन या ढांचा तैयार करना है, ताकि हेडिंग के हिसाब से नेविगेट करने वाला कोई भी व्यक्ति, पेज की एक मानसिक तस्वीर बना सके.
आम तौर पर, किसी पेज पर मुख्य हेडलाइन या लोगो के लिए एक h1 का इस्तेमाल किया जाता है. साथ ही, मुख्य सेक्शन के लिए h2 एलिमेंट और सहायक सब-सेक्शन में h3 एलिमेंट का इस्तेमाल किया जाता है:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
हेडिंग लेवल को स्किप न करें
डेवलपर अक्सर हेडिंग लेवल छोड़ देते हैं, ताकि ब्राउज़र की डिफ़ॉल्ट स्टाइल का इस्तेमाल किया जा सके. ये स्टाइल, उनके डिज़ाइन से मिलती-जुलती होती हैं. इसे एंटी-पैटर्न माना जाता है, क्योंकि इससे आउटलाइन मॉडल टूट जाता है.
हेडिंग के लिए, ब्राउज़र के डिफ़ॉल्ट फ़ॉन्ट-साइज़िंग पर भरोसा करने के बजाय, अपनी सीएसएस का इस्तेमाल करें. साथ ही, लेवल न छोड़ें.
उदाहरण के लिए, इस साइट पर "खबरों में" नाम का एक सेक्शन है. इसके बाद, दो हेडलाइन दी गई हैं:
सेक्शन हेडिंग "खबरों में" को h2 के तौर पर मार्क किया जा सकता है. साथ ही, इससे जुड़ी हेडलाइन को h3 के तौर पर मार्क किया जा सकता है.
"खबरों में" के लिए font-size, हेडलाइन से छोटा होता है. इसलिए, पहली कहानी की हेडलाइन को h2 और "खबरों में" को h3 बनाने का विकल्प चुना जा सकता है. ऐसा हो सकता है कि यह ब्राउज़र की डिफ़ॉल्ट स्टाइलिंग से मेल खाए. हालांकि, इससे स्क्रीन रीडर का इस्तेमाल करने वाले व्यक्ति को बताई गई आउटलाइन टूट जाएगी!
भले ही, यह आपको सुनने में बिलकुल उलटा लगे, लेकिन इससे कोई फ़र्क़ नहीं पड़ता कि विज़ुअल तौर पर h3 और h4 एलिमेंट, h2 या h1 के मुकाबले बड़े हैं या नहीं.
सबसे ज़रूरी यह है कि एलिमेंट और एलिमेंट के क्रम से क्या जानकारी मिलती है.
लाइटहाउस का इस्तेमाल करके यह जांच की जा सकती है कि आपका पेज किसी हेडिंग लेवल को स्किप तो नहीं कर रहा है. सुलभता ऑडिट (Lighthouse > विकल्प > सुलभता) चलाएं. इसके बाद, हेडिंग के लेवल स्किप नहीं किए गए हैं ऑडिट के नतीजे देखें.
नेविगेशन में मदद पाने के लिए लैंडमार्क का इस्तेमाल करना
main, nav, और aside जैसे HTML5 एलिमेंट, लैंडमार्क के तौर पर काम करते हैं. ये पेज पर ऐसे खास क्षेत्र होते हैं जिन पर स्क्रीन रीडर सीधे पहुंच सकता है.
अपने पेज के मुख्य सेक्शन तय करने के लिए, लैंडमार्क टैग का इस्तेमाल करें. इसके लिए, div पर भरोसा न करें. हालांकि, बहुत ज़्यादा लैंडमार्क जोड़ने से, लोगों को समझने में मुश्किल हो सकती है. इसलिए, सोच-समझकर लैंडमार्क जोड़ें. उदाहरण के लिए, तीन या चार main एलिमेंट के बजाय, सिर्फ़ एक main एलिमेंट का इस्तेमाल करें.
Lighthouse का सुझाव है कि अपनी साइट की मैन्युअल तरीके से ऑडिट करें. इससे यह पता चलेगा कि "नेविगेशन को बेहतर बनाने के लिए, एचटीएमएल5 लैंडमार्क एलिमेंट का इस्तेमाल किया गया है या नहीं." अपने पेज की जांच करने के लिए, लैंडमार्क एलिमेंट की इस सूची का इस्तेमाल करें.
स्किप लिंक की मदद से, बार-बार दिखने वाले कॉन्टेंट को स्किप करना
कई साइटों के हेडर में बार-बार नेविगेशन की सुविधा दी जाती है. इससे सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोगों को नेविगेट करने में परेशानी हो सकती है. लोगों को इस कॉन्टेंट को स्किप करने की सुविधा देने के लिए, स्किप लिंक का इस्तेमाल करें.
स्किप लिंक, स्क्रीन से बाहर मौजूद एक ऐंकर होता है. यह हमेशा DOM में फ़ोकस करने लायक पहला आइटम होता है. आम तौर पर, इसमें पेज के मुख्य कॉन्टेंट का इन-पेज लिंक होता है. यह डीओएम में पहला एलिमेंट है. इसलिए, इसे फ़ोकस करने के लिए, सुलभता टेक्नोलॉजी को सिर्फ़ एक ऐक्शन की ज़रूरत होती है. साथ ही, बार-बार नेविगेट करने की ज़रूरत नहीं पड़ती.
<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
[Main content]
</main>
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
GitHub, The NY
Times, और Wikipedia जैसी कई लोकप्रिय साइटों में स्किप लिंक मौजूद होते हैं. इन पर जाएं और अपने कीबोर्ड पर मौजूद TAB बटन को कुछ बार दबाएं.
लाइटहाउस की मदद से, यह पता लगाया जा सकता है कि आपके पेज में स्किप लिंक मौजूद है या नहीं. सुलभता की जांच फिर से करें और पेज में हेडिंग, स्किप लिंक या लैंडमार्क क्षेत्र मौजूद है ऑडिट के नतीजे देखें.