स्क्रीन रीडर में ऐसे निर्देश होते हैं जिनकी मदद से, शीर्षकों या खास लैंडमार्क वाले इलाकों के बीच तुरंत पहुंचा जा सकता है. असल में, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों के सर्वे से पता चला है कि वे अक्सर किसी ऐसे पेज पर जाने के लिए, हेडिंग का इस्तेमाल करते हैं जिसे वे पहले कभी नहीं देखे हैं.
सही हेडिंग और लैंडमार्क एलिमेंट का इस्तेमाल करके, सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोगों के लिए, अपनी साइट पर नेविगेशन अनुभव को काफ़ी बेहतर बनाया जा सकता है.
पेज की खास जानकारी देने के लिए हेडिंग का इस्तेमाल करना
अपने पेज के लिए स्ट्रक्चर की आउटलाइन बनाने के लिए, 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 बनाना एक सही विकल्प हो सकता है. ऐसा करने पर, हो सकता है कि यह ब्राउज़र की डिफ़ॉल्ट स्टाइल से मेल खाए, लेकिन इससे स्क्रीन रीडर का इस्तेमाल करने वाले व्यक्ति को दी गई आउटलाइन खराब हो जाएगी!
Lighthouse का इस्तेमाल करके यह देखा जा सकता है कि आपका पेज हेडिंग के किसी लेवल को स्किप करता है या नहीं. सुलभता ऑडिट (Lighthouse > विकल्प > सुलभता) चलाएं और हेडिंग लेवल को स्किप नहीं करतीं ऑडिट के नतीजे देखें.
नेविगेट करने में मदद पाने के लिए लैंडमार्क का इस्तेमाल करना
main, nav, और aside जैसे एचटीएमएल5 एलिमेंट, पेज पर लैंडमार्क या खास इलाकों के तौर पर काम करते हैं. स्क्रीन रीडर इन पर जा सकता है.
अपने पेज के मुख्य सेक्शन तय करने के लिए, div के बजाय लैंडमार्क टैग का इस्तेमाल करें. ध्यान रखें कि आप ज़रूरत से ज़्यादा जगहों को लैंडमार्क न करें. ऐसा करने पर, ज़्यादा लैंडमार्क होने की वजह से, लोगों को आपका कॉन्टेंट समझने में मुश्किल हो सकती है. उदाहरण के लिए, तीन या चार के बजाय सिर्फ़ एक main एलिमेंट का इस्तेमाल करें.
Lighthouse का सुझाव है कि अपनी साइट की मैन्युअल तौर पर ऑडिटिंग करें. इससे यह पता चलेगा कि "नेविगेशन को बेहतर बनाने के लिए, एचटीएमएल5 लैंडमार्क एलिमेंट का इस्तेमाल किया गया है या नहीं." अपने पेज की जांच करने के लिए, लैंडमार्क एलिमेंट की इस सूची का इस्तेमाल किया जा सकता है.
स्किप करने के लिंक की मदद से, दोहराए गए कॉन्टेंट को बायपास करना
कई साइटों के हेडर में, एक ही तरह का नेविगेशन होता है. सहायक टेक्नोलॉजी का इस्तेमाल करके, इन साइटों पर नेविगेट करना परेशानी भरा हो सकता है. उपयोगकर्ताओं को इस कॉन्टेंट को बायपास करने की सुविधा देने के लिए, स्किप लिंक का इस्तेमाल करें.
स्किप लिंक, ऑफ़स्क्रीन ऐंकर होता है. यह हमेशा DOM में, फ़ोकस करने लायक पहला आइटम होता है. आम तौर पर, इसमें पेज के मुख्य कॉन्टेंट का इन-पेज लिंक होता है. यह 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 बटन को कुछ समय के लिए दबाकर रखें.
लाइटहाउस की मदद से यह जांचा जा सकता है कि आपके पेज में स्किप लिंक है या नहीं. फिर से सुलभता ऑडिट चलाएं और पेज में हेडिंग, स्किप लिंक या लैंडमार्क क्षेत्र है ऑडिट के नतीजे देखें.