Skip links

Skip links क्यों महत्वपूर्ण हैं

यदि हर पृष्ठ 50-item nav menu load करता है, तो कीबोर्ड उपयोगकर्ता सामग्री तक पहुँचने के लिए सभी 50 को tab करते हैं। Skip link उन्हें मुख्य पर jump करता है। यह स्क्रीन रीडर उपयोगकर्ताओं के लिए भी अच्छा UX है।

कार्यान्वयन

skip link को HTML के शीर्ष पर रखें, इसे off-screen छिपाएं, फोकस पर दिखाएं।

<!-- At the very top of <body> -->
<a href="#main" class="skip-link">Skip to main content</a>

<style>
  .skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .skip-link:focus {
    top: 0;
    left: 0;
    z-index: 9999;
    background: #000;
    color: white;
    padding: 10px;
  }
</style>

एकाधिक skip links

बड़ी साइटों में कई skip links हो सकते हैं: main को skip करें, sidebar को skip करें, footer को skip करें।

Skip link सर्वश्रेष्ठ प्रथाएं

Skip links को focus पर visible बनाएँ। Clear, action-oriented text का उपयोग करें। Test करें कि skip links screen readers के साथ भी काम करते हैं।