टाइटल और लैंडमार्क

रॉब डॉडसन

स्क्रीन रीडर के पास एक से दूसरे शीर्षक या किसी खास खास इलाके पर जाने के लिए निर्देश होते हैं. स्क्रीन रीडर इस्तेमाल करने वालों पर हुए एक सर्वे से पता चला है कि वे अक्सर किसी अनजान पेज पर जाने के लिए, हेडिंग को एक्सप्लोर करते हैं.

सही हेडिंग और लैंडमार्क एलिमेंट का इस्तेमाल करके, सहायक टेक्नोलॉजी के उपयोगकर्ताओं के लिए अपनी साइट पर नेविगेशन के अनुभव को बहुत बेहतर बनाया जा सकता है.

पेज को आउटलाइन करने के लिए हेडिंग का इस्तेमाल करें

अपने पेज की स्ट्रक्चर आउटलाइन बनाने के लिए, 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 > विकल्प > सुलभता) चलाएं और हेडिंग लेवल स्किप न करें ऑडिट के नतीजे देखें.

नेविगेशन में मदद के लिए लैंडमार्क का इस्तेमाल करना

main, nav, और aside जैसे HTML5 एलिमेंट, लैंडमार्क या पेज पर ऐसे खास क्षेत्रों के तौर पर काम करते हैं जहां कोई स्क्रीन रीडर सीधे वहां से जा सकता है.

div पर भरोसा करने के बजाय, अपने पेज के मुख्य सेक्शन को बताने के लिए, लैंडमार्क टैग का इस्तेमाल करें. सावधान रहें, क्योंकि बहुत ज़्यादा लैंडमार्क होना मुश्किल हो सकता है. उदाहरण के लिए, तीन या चार के बजाय, सिर्फ़ एक main एलिमेंट का इस्तेमाल करें.

लाइटहाउस आपकी साइट का मैन्युअल रूप से ऑडिट करने का सुझाव देता है, ताकि यह जांच की जा सके कि "नेविगेशन को बेहतर बनाने के लिए HTML5 लैंडमार्क एलिमेंट का इस्तेमाल किया जाता है". अपने पेज को देखने के लिए आप इस लैंडमार्क एलिमेंट की सूची का इस्तेमाल कर सकते हैं.

स्किप लिंक की मदद से, बार-बार आने वाले कॉन्टेंट को बायपास करें

कई साइटों के हेडर में दोहराव वाला नेविगेशन होता है, जिससे सहायक टेक्नोलॉजी की मदद से नेविगेट करने में परेशानी हो सकती है. स्किप लिंक का इस्तेमाल करें, ताकि उपयोगकर्ता इस कॉन्टेंट को बायपास कर सकें.

स्किप लिंक एक ऑफ़स्क्रीन ऐंकर होता है. यह डीओएम में हमेशा फ़ोकस करने लायक पहला आइटम होता है. आम तौर पर, इसमें पेज के मुख्य कॉन्टेंट का एक इन-पेज लिंक होता है. यह डीओएम में पहला एलिमेंट है. इसलिए, यह सहायक टेक्नोलॉजी की मदद से सिर्फ़ एक कार्रवाई करता है, ताकि इस पर फ़ोकस किया जा सके और दोहराए जाने वाले नेविगेशन को बायपास किया जा सके.

<!-- 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 कुंजी को कुछ बार दबाकर देखें.

लाइटहाउस यह जांचने में आपकी मदद कर सकता है कि आपके पेज पर स्किप लिंक मौजूद है या नहीं. सुलभता ऑडिट फिर से चलाएं और पेज में एक हेडलाइन, स्किप लिंक या लैंडमार्क रीजन ऑडिट के नतीजे देखें.