Mo‘ljal hududlari (landmarks)
Nega
Mo‘ljal hududlari (landmarks) tufayli ekran o‘quvchi dasturdan foydalanadigan ko‘zi ojiz foydalanuvchilar veb-sahifaning kerakli bo‘limlariga to‘g‘ridan-to‘g‘ri o‘ta oladi.
Nima
HTML’da veb-sahifaning turli qismlarini belgilash uchun ishlatilishi mumkin bo‘lgan bir nechta semantik element mavjud:
<header><nav><main><aside><section><footer>
Qanday – The White House misolida
The White House saytining bosh sahifasida mo‘ljal hududlaridan foydalanilgan. U yuqoridagi <header>, barcha asosiy kontentni o‘z ichiga olgan <main> va pastdagi bir nechta <nav> elementini o‘z ichiga olgan <footer> dan iborat.
Mo‘ljal hududlarini vizual ko‘rsatishning bir usuli — Accessibility Insights vositasidan foydalanish. Uning imkoniyatlaridan biri mo‘ljal hududlarini ajratib ko‘rsatishdir, buni quyidagi skrinshotda ko‘rishimiz mumkin.
O‘zingiz sinab ko‘ring. Accessibility Insights brauzer kengaytmasini yuklab oling va mo‘ljal hududlarini vizuallashtirishni yoqing. Sevimli saytingiz mo‘ljal hududlaridan foydalanadimi?
Rollar
Lekin to‘xtang, u banner, contentinfo va navigation rollarini ko‘rsatyapti. Bu biroz chalkash. Buning sababi shundaki, har bir mo‘ljal hududi elementiga mos rol (role) biriktirilgan. Shu paytgacha bu kursda rollar haqida gapirmadik. Bu mavzuga keyinroq qaytamiz, hozircha esa soddalashtirilgan tushuntirish:
<header> elementida banner roli o‘rnatilgan. Bu <header>, <header role="banner"> va <div role="banner"> deyarli bir xil ekanini anglatadi. Aksariyat hollarda <header> yetarli bo‘ladi.
Xuddi shu narsa <nav> uchun ham to‘g‘ri, unda role="navigation" o‘rnatilgan. <main> bilan osonroq, unda role="main" bor. Va nihoyat, role="contentinfo" roliga ega <footer> elementi bor. Hozircha rollarni shu yerda qoldiramiz.
Bir turdagi bir nechta mo‘ljal hududi
Amaliy qoida: har bir sahifada faqat bitta <main> ishlating. Bir turdagi mo‘ljal hududidan bir nechtasini ishlatganimizda, masalan, ushbu misoldagi kabi bir nechta <nav> bo‘lsa, ularning har biriga yorliq (label) berishimiz kerak. Bu aria-label atributi yordamida amalga oshiriladi.
The White House saytining footer qismida uchta <nav> bor, ularning har birida aria-label mavjud, masalan, aria-label="social navigation". Bu ekran o‘quvchi dastur foydalanuvchisi to‘g‘ridan-to‘g‘ri ijtimoiy tarmoqlar navigatsiyasiga o‘ta olishini anglatadi. Bu katta yordam. Ba’zilar <nav> yorlig‘ida "navigation" so‘zini ishlatish ortiqcha deyishadi. Bu yerda to‘g‘ri yoki noto‘g‘ri javob yo‘q, lekin aria-label="social" ham yetarli bo‘ladi.
<aside> va <section> teglari
Mo‘ljal hududlari HTML’ga kiritilganidan beri dasturchilar chalkashib kelmoqda. Odamlar noaniq ta’riflangan deb hisoblaydigan ikki element — <aside> va <section>. Keling, biroz aniqlik kiritamiz. Asosiy farq shundaki, <aside> asosiy kontentga bog‘liq, <section> esa unga bog‘liq emas.
The White House saytining aloqa sahifasida ham <aside>, ham <section> ishlatilgan. Uchta ulashish tugmasi <aside> ichida joylashgan. Bu mantiqan to‘g‘ri, chunki ular asosiy kontentga bog‘liq. Ulardan foydalansangiz, hozir turgan sahifangizni ulashasiz.
Stay Connected bloki — <section>. Yaxshi. U asosiy kontentga bog‘liq emas va boshqa hech bir mo‘ljal hududi bu yerga mos kelmaydi. The White House bu mo‘ljal hududlarini yaxshilash uchun ularga yorliqlar qo‘shishi mumkin. Bu ekran o‘quvchi dastur foydalanuvchisi uchun qulayroq bo‘ladi. <section aria-label="Newsletter"> va <aside aria-label="Share this page"> foydali bo‘lardi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!