Yorliqlar (labels)

Nega

Yorliqlar ko‘zi ojiz foydalanuvchilar, ko‘rish qobiliyati past foydalanuvchilar, harakatlanish imkoniyati cheklangan va xotirasi zaif foydalanuvchilar uchun juda muhim. Yorliqlarning yo‘qligi formani ko‘plab foydalanuvchilar uchun foydalanib bo‘lmaydigan qilib qo‘yadi.

Nima

Vizual yorliqlar — forma boshqaruv elementi yonidagi matn bo‘lib, u muayyan forma maydoniga yoki maydonlar guruhiga qanday ma’lumot kiritilishini tavsiflaydi. Har bir yorliq forma elementi yoki elementlar guruhi bilan dasturiy jihatdan bog‘langan bo‘lishi kerak. Yorliqlar albatta <label> elementi bo‘lishi shart emas.

Qanday

Quyidagilardan qanday foydalanishni o‘rganasiz: <label>, aria-label va <legend>.

<label> elementi

<label> tegi <input>, <select> va <textarea> kabi bir nechta element uchun yorliqni belgilaydi.

Screenshot from Vodafone order form, showing one select and one email input.

Vodafone’dan olingan ushbu misolda bitta <select> va bitta <input type="email"> bor, ularning har biri tavsiflovchi <label> elementiga ega:

<label for="customerType">Who are you buying for today?</label>
<select name="customerType" id="customerType">

Yuqoridagi misolda <label> elementidan foydalanilganiga e’tibor bering.

<label> elementi ekran o‘quvchi dastur foydalanuvchilari uchun foydali, chunki foydalanuvchi kiritish elementiga fokus berganda ekran o‘quvchi dastur yorliqni ovoz chiqarib o‘qiydi.

<label> elementi juda kichik hududlarni (masalan, radio tugmalar yoki checkboxlarni) bosishda qiynaladigan foydalanuvchilarga ham yordam beradi, chunki foydalanuvchi <label> elementi ichidagi matnni bosganda radio tugma yoki checkbox holati almashadi.

Ularni bir-biriga bog‘lash uchun <label> tegining for atributi <input> elementining id atributiga teng bo‘lishi kerak.

Majburiy maydonlar

Forma yorliqlari ko‘pincha maydonni to‘ldirish majburiy ekanini bildirish uchun "*" belgisini yoki "required" (majburiy) so‘zini o‘z ichiga oladi. Bu ikkala usul ham to‘g‘ri. Biroq agar yulduzcha (*) ishlatsangiz, forma elementiga required va aria-required="true" qo‘shish tavsiya etiladi:

Screenshot from Optus, showing a required email field.

<label for="email">Your email address <span class="mandatory">*</span></label>
<input id="email" name="email" required aria-required="true" placeholder="Email" required="">

aria-label atributi

Vizual yorlig‘i bo‘lmagan maydonlarga ham yorliq kerak. Agar <label> ishlata olmasangiz, variantlardan biri — aria-label atributidan foydalanish.

Screenshot from a search field from Vodafone, with no label on top.

Bu qidiruv maydonida placeholder (namuna matn) bor, lekin yorliq yo‘q. Placeholder yaroqli qulaylik nomi (accessible name) hisoblanmaydi. Unga o‘rinbosar sifatida tayana olmaysiz. Bu yerda oddiy yechim — aria-label="Enter search term" qo‘shish:

<input placeholder="Enter search term" aria-label="Enter search term">

<legend> elementi

Checkboxlar va radio tugmalar kabi forma elementlari guruhlari ko‘pincha <label>ga qo‘shimcha ravishda yuqoriroq darajadagi "yorliq"ni talab qiladi. Bu yuqori darajadagi "yorliq" <fieldset> va <legend> yordamida yaratiladi.

Screenshot from the Optus registration form, showing date of birth with three form controls.

Bu ro‘yxatdan o‘tish formasida tug‘ilgan sanani kiritish uchun uchta forma elementi bor. Vizual jihatdan kun, oy va yil "Your date of birth" (Tug‘ilgan sanangiz) bilan bog‘liq ekani tushunarli. Ekran o‘quvchi dastur foydalanuvchisi uchun bu bog‘liqlik aniq emas. Bu yerda <label> ishlata olmaymiz. Yorliqlar — Day, Month va Year. Yechim — <fieldset> va <legend> qo‘shish:

<fieldset> <legend>Your date of birth</legend> <label for="dobDay">Day</label> <select id="dobDay">…</select> <label for="dobMonth">Month</label> <select id="dobMonth">…</select> <label for="dobYear">Year</label> <input id="dobYear" type="text" placeholder="YYYY"> </fieldset>

Samarali formalar yaratmoqchimisiz? Avtoto‘ldirish (autocomplete) haqida o‘rganing.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish