O‘tkazib yuborish havolalari (skip links)
Nega
Klaviatura, ekran o‘quvchi dasturlar, switch qurilmalari va boshqa yordamchi texnologiyalardan foydalanadigan insonlar asosiy kontentga yoki boshqa muhim bo‘limlarga osonroq va tezroq yetib borish uchun o‘tkazib yuborish havolalaridan (skip links) foydalanadi.
Nima
Eng keng tarqalgan o‘tkazib yuborish havolasi sahifadagi birinchi interaktiv element bo‘ladi. U foydalanuvchini logotip, qidiruv va navigatsiya kabi global elementlarni chetlab o‘tib, asosiy kontentga olib boradi. U deyarli har doim fokus olmaguncha yashirin turadi.
Qanday
O‘zingiz sinab ko‘ring
- Stol kompyuteri yoki noutbukingizda WebAIM veb-saytini oching.
- Tab tugmasini bosing.
- Havolaga o‘tish uchun Enter tugmasini bosing.
HTML
O‘tkazib yuborish havolasining HTML qismi — eng oson qism.
Aytaylik, Mo‘ljal hududlari darsida o‘rganganingizdek, saytingizda <header> va <main> ishlatgansiz. O‘tkazib yuborish havolasi global element, shuning uchun uni <header> ichiga joylashtirishingiz kerak. Shuningdek, <main> elementiga ID berishingiz kerak, shunda unga anchor (langar) orqali havola bera olasiz.
<header>
<a href="#main" class="skip">Skip to main content</a>
…
</header>
…
<main id="main">
Bo‘ldi. JavaScript kerak emas. Bitta havola va bitta ID.
CSS
HTML’da payqagan bo‘lsangiz kerak, havolada skip klassi bor edi, shu tufayli uni yashira olamiz.
.skip {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
Bu kod havolani brauzer oynasidan ancha tashqariga surib qo‘yadi. Agar mutlaq joylashuv (absolute positioning) bilan tanish bo‘lmasangiz, CSS position xossasi haqida o‘qing. 1px o‘lcham va overflow: hidden; foydalanuvchi mutlaq joylashuvni o‘chirib qo‘ygan maxsus holatlar uchun kerak.
Havola fokus olganda u ko‘rinadigan bo‘lishi kerak. Bu ham CSS yordamida amalga oshiriladi:
.skip:focus {
position: static;
width: auto;
height: auto;
}
Bu usul klaviatura va shunga o‘xshash kiritish vositalariga tayanadigan foydalanuvchilar uchun juda foydali va muhim. Agar saytingiz murakkab bo‘lsa, faqat asosiy kontentga emas, boshqa bo‘limlarga ham o‘tkazib yuborish havolalarini qo‘shishni xohlashingiz mumkin. Buni keyinroq ko‘rib chiqamiz.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!