स्क्रीन रीडर में एक टाइटल से दूसरे टाइटल पर जाने या सीधे किसी खास टाइटल पर जाने के लिए कमांड दिए जाते हैं मशहूर इलाके. असल में, स्क्रीन रीडर इस्तेमाल करने वालों का सर्वे यह पता चला है कि वे अक्सर किसी नए पेज पर जाने के लिए, शीर्षक.
सही हेडिंग और लैंडमार्क एलिमेंट का इस्तेमाल करके, सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोगों के लिए, अपनी साइट पर नेविगेशन के अनुभव को बेहतर बनाना.
पेज को आउटलाइन करने के लिए हेडिंग इस्तेमाल करना
अपने पेज के लिए स्ट्रक्चरल आउटलाइन बनाने के लिए, h1 से h6 एलिमेंट का इस्तेमाल करें. इसका मकसद है
पेज का ढांचा या मचान बनाने के लिए इस तरह बनाया जा सकता है कि कोई भी व्यक्ति नेविगेट करके
हेडिंग से लोगों को मानसिक तौर पर मदद मिल सकती है.
आम तौर पर, मुख्य हेडलाइन या लोगो के लिए एक ही h1 का इस्तेमाल किया जाता है
पेज, मुख्य सेक्शन तय करने के लिए h2 एलिमेंट, और सहायक सब-सेक्शन में h3 एलिमेंट:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
हेडिंग के लेवल को न छोड़ें
डेवलपर अक्सर ब्राउज़र की डिफ़ॉल्ट स्टाइल का इस्तेमाल करने के लिए हेडिंग लेवल को स्किप कर देते हैं, जो वे उनके डिज़ाइन से निकटता से मेल खाते हैं. इसे एक एंटी-पैटर्न माना जाता है, क्योंकि यह आउटलाइन मॉडल.
हेडिंग के लिए ब्राउज़र के डिफ़ॉल्ट फ़ॉन्ट साइज़ पर निर्भर रहने के बजाय, अपने इस्तेमाल करने के लिए ज़रूरी है और लेवल स्किप न करें.
उदाहरण के लिए, इस साइट में "IN THE NEWS" नाम का एक सेक्शन है. इसके बाद दो सेक्शन हैं हेडलाइन:
" इन खबरों में" सेक्शन का टाइटल, h2 हो सकता है. साथ ही, यह
हेडलाइन दोनों h3 एलिमेंट हो सकते हैं.
क्योंकि "IN THE News" के लिए font-size टाइटल से कम हो, तो हो सकता है
पहली कहानी के लिए हेडलाइन को h2 बनाने और
"समाचार में" h3. यह ब्राउज़र की डिफ़ॉल्ट स्टाइल से मेल खा सकता है.
इससे स्क्रीन रीडर का इस्तेमाल करने वाले व्यक्ति को बताई गई आउटलाइन भंग हो जाएगी!
लाइटहाउस का इस्तेमाल करके, यह पता लगाया जा सकता है कि आपका पेज, हेडिंग लेवल को स्किप करता है या नहीं. यह चलाकर देखेंः सुलभता ऑडिट (लाइटहाउस > विकल्प > सुलभता) और लुक हेडिंग लेवल स्किप नहीं करते ऑडिट के नतीजों के लिए.
नेविगेशन में मदद करने के लिए लैंडमार्क का इस्तेमाल करें
HTML5 एलिमेंट, जैसे कि main, nav, और aside लैंडमार्क की तरह काम करते हैं या
पेज पर मौजूद वे खास जगहें जहां स्क्रीन रीडर सीधे जा सकता है.
अपने पेज के मुख्य सेक्शन तय करने के लिए, लैंडमार्क टैग का इस्तेमाल करें
div. सावधानी बरतें, क्योंकि बहुत ज़्यादा लैंडमार्क होने पर
मुश्किल था. उदाहरण के लिए, तीन के बजाय सिर्फ़ एक main एलिमेंट का इस्तेमाल करें या
4.
लाइटहाउस आपकी साइट को मैन्युअल तौर पर ऑडिट करने का सुझाव देता है, ताकि यह जांच की जा सके कि "HTML5 लैंडमार्क एलिमेंट का इस्तेमाल नेविगेशन को बेहतर बनाने के लिए किया जाता है." आप लैंडमार्क की इस सूची का इस्तेमाल कर सकते हैं एलिमेंट अपने पेज की जांच करें.
स्किप लिंक की मदद से, बार-बार दिखने वाले कॉन्टेंट को बायपास करें
कई साइटों के हेडर में एक जैसा नेविगेशन होता है. इससे लोगों को परेशानी हो सकती है कई काम आसानी से किए जा सकते हैं. लिंक छोड़ें का इस्तेमाल करें, ताकि उपयोगकर्ता इस कॉन्टेंट को बायपास कर सकें.
स्किप लिंक एक ऑफ़स्क्रीन ऐंकर है. यह हमेशा ऐसा पहला आइटम होता है जिस पर फ़ोकस किया जा सकता है 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 कुंजी दबाएँ
कुछ बार कीबोर्ड का उपयोग करें.
लाइटहाउस यह जानने में आपकी मदद कर सकता है कि आपके पेज पर कोई स्किप लिंक है या नहीं. यह चलाकर देखेंः सुलभता ऑडिट फिर से शुरू करें और इस पेज में हेडिंग, स्किप लिंक या लैंडमार्क क्षेत्र का ऑडिट.