Forma Yorliqlari: Kiritish Maydonlari uchun Maxsus Imkoniyatlarga Oid Asosiy Talablar

Formalar vebning asosiy qismidir. Oddiy aloqa formalaridan tortib murakkab elektron tijorat to'lovlarigacha, ular foydalanuvchilarga veb-saytlar va ilovalar bilan o'zaro aloqada bo'lish imkonini beradi. Biroq, yomon ishlab chiqilgan formalar nogironligi bo'lgan foydalanuvchilar uchun jiddiy to'siqlarni yaratishi mumkin. Maxsus imkoniyatlarga ega formalarni yaratishda hal qiluvchi element - bu forma yorliqlaridan to'g'ri foydalanishdir. Ushbu qo'llanma forma yorliqlariga oid maxsus imkoniyatlar talablarining keng qamrovli sharhini taqdim etadi, bu esa sizning formalaringizdan barcha, qobiliyatlaridan qat'i nazar, foydalana olishini ta'minlaydi.

Nima uchun Maxsus Imkoniyatlarga ega Forma Yorliqlari Muhim?

Maxsus imkoniyatlarga ega forma yorliqlari bir necha sabablarga ko'ra hayotiy ahamiyatga ega:

Foydalanish qulayligi: Aniq va ixcham yorliqlar barcha foydalanuvchilarga har bir kiritish maydonining maqsadini tushunishga yordam beradi va umumiy foydalanish qulayligini yaxshilaydi.
Maxsus imkoniyatlar: Yorliqlar nogironligi bo'lgan foydalanuvchilar, ayniqsa ekran o'quvchilari kabi yordamchi texnologiyalarga tayanadiganlar uchun muhim ma'lumotlarni taqdim etadi. To'g'ri yorliqlarsiz, bu foydalanuvchilar formalarni to'ldira olmasligi mumkin.
WCAG muvofiqligi: Veb-kontentga oid Maxsus Imkoniyatlar bo'yicha Qo'llanmalar (WCAG) barcha forma boshqaruv elementlarida tegishli yorliqlar bo'lishini talab qiladi. Ushbu ko'rsatmalarga rioya qilish veb-saytingizning maxsus imkoniyatlarga ega bo'lishini va ko'plab yurisdiksiyalarda qonuniy talablarga javob berishini ta'minlaydi.
SEO: Garchi to'g'ridan-to'g'ri reyting omili bo'lmasa-da, maxsus imkoniyatlarga ega veb-saytlar odatda yaxshiroq foydalanuvchi tajribasiga ega bo'ladi, bu esa bilvosita SEO ko'rsatkichlarini yaxshilashi mumkin.

Forma Yorliqlari uchun WCAG Talablarini Tushunish

WCAG forma maxsus imkoniyatlarini ta'minlash uchun maxsus ko'rsatmalarni taqdim etadi. Mana forma yorliqlari bilan bog'liq asosiy talablar:

WCAG 2.1 Muvaffaqiyat mezonlari 1.1.1 Matn bo'lmagan kontent (A daraja)

Garchi to'g'ridan-to'g'ri yorliqlar haqida bo'lmasa-da, ushbu mezon barcha matn bo'lmagan kontent, shu jumladan CAPTCHA va formalarda ishlatiladigan rasmlar uchun matnli alternativlarni taqdim etish muhimligini ta'kidlaydi. To'g'ri yorliqlangan forma ushbu alternativlarga kontekst berish uchun juda muhimdir.

WCAG 2.1 Muvaffaqiyat mezonlari 1.3.1 Ma'lumot va munosabatlar (A daraja)

Taqdimot orqali yetkaziladigan ma'lumot, tuzilma va munosabatlar dasturiy ravishda aniqlanishi yoki matnda mavjud bo'lishi kerak. Bu shuni anglatadiki, yorliq va unga mos keladigan kiritish maydoni o'rtasidagi munosabat HTML kodida aniq belgilanishi kerak.

WCAG 2.1 Muvaffaqiyat mezonlari 2.4.6 Sarlavhalar va Yorliqlar (AA daraja)

Sarlavhalar va yorliqlar mavzu yoki maqsadni tavsiflaydi. Forma yorliqlari kiritish maydonlari uchun tavsiflovchi kontekstni taqdim etadi, bu esa foydalanuvchilarga formaning tuzilishini tushunishni va uni to'g'ri to'ldirishni osonlashtiradi.

WCAG 2.1 Muvaffaqiyat mezonlari 3.3.2 Yorliqlar yoki ko'rsatmalar (A daraja)

Kontent foydalanuvchi kiritishini talab qilganda yorliqlar yoki ko'rsatmalar taqdim etiladi.

WCAG 2.1 Muvaffaqiyat mezonlari 4.1.2 Nom, Rol, Qiymat (A daraja)

Barcha foydalanuvchi interfeysi komponentlari uchun (jumladan, lekin ular bilan cheklanmagan holda, forma elementlari, havolalar va skriptlar tomonidan yaratilgan komponentlar), nom va rol dasturiy ravishda aniqlanishi mumkin; foydalanuvchi tomonidan o'rnatilishi mumkin bo'lgan holatlar, xususiyatlar va qiymatlar dasturiy ravishda o'rnatilishi mumkin; va bu elementlarga kiritilgan o'zgarishlar haqidagi bildirishnomalar foydalanuvchi agentlari, shu jumladan yordamchi texnologiyalar uchun mavjud.

Maxsus Imkoniyatlarga ega Forma Yorliqlarini Amalga Oshirish uchun Eng Yaxshi Amaliyotlar

Mana maxsus imkoniyatlarga ega forma yorliqlarini yaratish uchun bir nechta eng yaxshi amaliyotlar:

1. <label> Elementidan Foydalaning

<label> elementi matnli yorliqni kiritish maydoni bilan bog'lashning asosiy usulidir. U yorliq va boshqaruv elementi o'rtasida semantik va tarkibiy bog'liqlikni ta'minlaydi. <label> elementining for atributi mos keladigan kiritish maydonining id atributiga mos kelishi kerak.

Misol:


<label for="name">Ism:</label>
<input type="text" id="name" name="name">

Noto'g'ri misol (Qo'llamang):


<span>Ism:</span>
<input type="text" id="name" name="name">

label o'rniga span elementidan foydalanish zarur dasturiy aloqani yaratmaydi, bu esa uni ekran o'quvchilari uchun maxsus imkoniyatlarsiz qilib qo'yadi.

2. Yorliqlarni Kiritish Maydonlari bilan Aniq Bog'lang

Yuqoridagi misolda ko'rsatilganidek, for va id atributlaridan foydalanib, yorliq va kiritish maydoni o'rtasida aniq va ochiq bog'liqlikni ta'minlang.

3. Yorliqlarni To'g'ri Joylashtiring

Yorliqlarning joylashuvi foydalanish qulayligiga ta'sir qilishi mumkin. Odatda, yorliqlar quyidagicha joylashtirilishi kerak:

Kiritish maydonining tepasida: Bu ko'pincha eng qulay va foydalanuvchilar uchun qulay variantdir, ayniqsa matn maydonlari va matn sohalari uchun.
Kiritish maydonining chap tomonida: Keng tarqalgan, ammo ko'rish qobiliyati past bo'lgan, sahifani skanerlashda qiynaladigan foydalanuvchilar uchun unchalik samarali bo'lmasligi mumkin.
Radio tugmalari va belgilash katakchalari uchun: Yorliqlar boshqaruv elementining o'ng tomoniga joylashtirilishi kerak.

Yorliqlarni joylashtirishda madaniy me'yorlarni hisobga oling. Ba'zi tillarda yorliqlar an'anaviy ravishda kiritish maydonidan keyin joylashtiriladi. Dizayningizni ushbu afzalliklarga moslashtiring.

4. Aniq va Ixcham Yorliqlarni Taqdim Eting

Yorliqlar qisqa, tavsiflovchi va tushunarli bo'lishi kerak. Foydalanuvchilarni chalkashtirishi mumkin bo'lgan jargon yoki texnik atamalardan saqlaning. Masalan, "UserID" o'rniga "Foydalanuvchi nomi" yoki "Email manzili" dan foydalaning. Mahalliylashtirishni hisobga oling. Yorliqlaringizning ma'nosini saqlagan holda turli tillarga oson tarjima qilinishini ta'minlang.

5. Zarur bo'lganda ARIA Atributlaridan Foydalaning

ARIA (Accessible Rich Internet Applications) atributlari forma elementlarining maxsus imkoniyatlarini, ayniqsa murakkab stsenariylarda, yaxshilashi mumkin. Biroq, ARIA'dan oqilona va faqat mahalliy HTML elementlari va atributlari yetarli bo'lmaganda foydalaning.

aria-label: Ko'rinadigan yorliq mumkin yoki amaliy bo'lmaganda yorliqni taqdim etish uchun ushbu atributdan foydalaning.
aria-labelledby: Yorliq sifatida xizmat qilish uchun sahifadagi mavjud elementning ID'siga havola qilish uchun ushbu atributdan foydalaning.
aria-describedby: Kiritish maydoni uchun qo'shimcha ma'lumot yoki ko'rsatmalar berish uchun ushbu atributdan foydalaning. Bu kontekst berish yoki tasdiqlash qoidalarini tushuntirish uchun foydalidir.

aria-label yordamida misol:


<input type="search" aria-label="Veb-saytni qidirish">

aria-labelledby yordamida misol:


<h2 id="newsletter-title">Yangiliklar byulleteniga obuna bo'lish</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Email manzilingizni kiriting">

6. Tegishli Forma Elementlarini <fieldset> va <legend> bilan Guruhlang

<fieldset> elementi tegishli forma boshqaruv elementlarini guruhlaydi va <legend> elementi maydonlar to'plami uchun sarlavha beradi. Bu formaning tuzilishini yaxshilaydi va foydalanuvchilarga turli kiritish maydonlari o'rtasidagi munosabatlarni tushunishni osonlashtiradi.

Misol:


<fieldset>
  <legend>Bog'lanish ma'lumotlari</legend>
  <label for="name">Ism:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Aniq Xatolik Xabarlarini Taqdim Eting

Foydalanuvchilar formani to'ldirishda xatolikka yo'l qo'yganda, nima noto'g'ri bo'lganini va xatoni qanday tuzatish kerakligini tushuntiruvchi aniq va ma'lumotli xatolik xabarlarini taqdim eting. Ushbu xatolik xabarlarini aria-describedby kabi ARIA atributlaridan foydalanib, mos keladigan kiritish maydonlari bilan bog'lang.

Misol:


<label for="email">Email:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Iltimos, yaroqli email manzilini kiriting.</span>

Xatolik xabarining vizual jihatdan ajralib turishini (masalan, rang yoki belgilar yordamida) va yordamchi texnologiyalar uchun dasturiy ravishda kirish mumkinligini ta'minlang.

8. Yetarli Rang Kontrastidan Foydalaning

WCAG talablariga javob berish uchun yorliq matni va fon rangi o'rtasida yetarli rang kontrastini ta'minlang. Kontrast nisbati minimal talablarga (oddiy matn uchun 4.5:1 va katta matn uchun 3:1) javob berishini tekshirish uchun rang kontrasti analizatori vositasidan foydalaning. Bu ko'rish qobiliyati past bo'lgan foydalanuvchilarga yorliqlarni osonroq o'qishga yordam beradi.

9. Klaviatura orqali Maxsus Imkoniyatlarni Ta'minlang

Barcha forma elementlari faqat klaviatura yordamida kirish imkoniyatiga ega bo'lishi kerak. Foydalanuvchilar Tab tugmasi yordamida forma bo'ylab harakatlanishi va Spacebar yoki Enter tugmasi yordamida forma boshqaruv elementlari bilan o'zaro aloqada bo'lishi kerak. To'g'ri klaviatura maxsus imkoniyatlarini ta'minlash uchun formalaringizni klaviatura bilan sinchkovlik bilan sinab ko'ring.

10. Yordamchi Texnologiyalar bilan Sinovdan O'tkazing

Formalaringizning maxsus imkoniyatlarga ega ekanligiga ishonch hosil qilishning eng yaxshi usuli - ularni ekran o'quvchilari (masalan, NVDA, JAWS, VoiceOver) kabi yordamchi texnologiyalar bilan sinab ko'rishdir. Bu sizga vizual tekshiruv paytida ko'rinmas bo'lishi mumkin bo'lgan har qanday maxsus imkoniyatlar muammolarini aniqlashga yordam beradi. Qimmatli fikr-mulohazalarni olish uchun sinov jarayoniga nogironligi bo'lgan foydalanuvchilarni jalb qiling.

Maxsus Imkoniyatlarga ega Forma Yorliqlarini Amalga Oshirish Misollari

1-misol: Oddiy aloqa formasi (Xalqaro nuqtai nazar)

Global auditoriya uchun aloqa formasini ko'rib chiqing. Yorliqlar aniq, ixcham va oson tarjima qilinadigan bo'lishi kerak.


<form>
  <label for="name">To'liq ism:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Email manzili:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">Mamlakat:</label>
  <select id="country" name="country">
    <option value="">Mamlakatni tanlang</option>
    <option value="us">Qo'shma Shtatlar</option>
    <option value="ca">Kanada</option>
    <option value="uk">Birlashgan Qirollik</option>
    <option value="de">Germaniya</option>
    <option value="fr">Fransiya</option>
    <option value="jp">Yaponiya</option>
    <option value="au">Avstraliya</option>
    <!-- Boshqa mamlakatlarni qo'shing -->
  </select><br><br>

  <label for="message">Xabar:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="Yuborish">
</form>

Aniq bo'lishi uchun, ayniqsa familiya ismdan oldin keladigan madaniyatlar uchun faqat "Ism" o'rniga "To'liq ism" ishlatilganiga e'tibor bering.

2-misol: Elektron tijorat To'lov Formasi

Elektron tijorat to'lov formalari ko'pincha maxfiy ma'lumotlarni talab qiladi. Ishonchni mustahkamlash va maxsus imkoniyatlarni ta'minlash uchun aniq yorliqlar va ko'rsatmalar juda muhimdir.


<form>
  <fieldset>
    <legend>Yetkazib berish manzili</legend>
    <label for="shipping_name">To'liq ism:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">Manzil:</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">Shahar:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">Pochta/Zip kodi:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Mamlakat:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Mamlakatni tanlang</option>
      <option value="us">Qo'shma Shtatlar</option>
      <option value="ca">Kanada</option>
      <!-- Boshqa mamlakatlarni qo'shing -->
    </select>
  </fieldset>

  <fieldset>
    <legend>To'lov ma'lumotlari</legend>
    <label for="card_number">Kredit karta raqami:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Amal qilish muddati (OY/YIL):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="OY/YIL"><br><br>

    <label for="cvv">CVV:</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="Buyurtma berish">
</form>

Maydonlar to'plamlari va sarlavhalardan foydalanish formani mantiqiy bo'limlarga aniq tartibga soladi. O'rinbosar matn qo'shimcha ko'rsatma beradi, ammo yodda tutingki, o'rinbosar matn yorliqlar o'rnini bosa olmaydi.

3-misol: ARIA Atributlari bilan Ro'yxatdan O'tish Formasi

Taxallus ixtiyoriy bo'lgan ro'yxatdan o'tish formasini ko'rib chiqing. ARIA atributlaridan foydalanib, biz qo'shimcha kontekst taqdim eta olamiz.


<form>
  <label for="username">Foydalanuvchi nomi:</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Parol:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Taxallus (Ixtiyoriy):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Ushbu taxallus ommaviy ko'rsatiladi.</span><br><br>

  <input type="submit" value="Ro'yxatdan o'tish">
</form>

aria-describedby atributi taxallus kiritish maydonini taxallusdan qanday foydalanilishi haqida qo'shimcha ma'lumot beruvchi span elementiga bog'laydi.

Forma Maxsus Imkoniyatlarini Sinash uchun Vositalar

Bir nechta vositalar formalaringizning maxsus imkoniyatlarini baholashga yordam berishi mumkin:

Accessibility Insights: Veb-sahifalardagi maxsus imkoniyatlar muammolarini aniqlaydigan brauzer kengaytmasi.
WAVE (Web Accessibility Evaluation Tool): Veb-sahifalarni maxsus imkoniyatlar xatolari uchun baholaydigan onlayn vosita.
axe DevTools: Avtomatlashtirilgan maxsus imkoniyatlar sinovini amalga oshiradigan brauzer kengaytmasi.
Ekran o'quvchilari (NVDA, JAWS, VoiceOver): Ekran o'quvchilari bilan sinovdan o'tkazish avtomatlashtirilgan sinov orqali aniqlanmaydigan maxsus imkoniyatlar muammolarini aniqlash uchun zarurdir.

Xulosa

Maxsus imkoniyatlarga ega forma yorliqlari inklyuziv veb-tajribalarni yaratish uchun zarurdir. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz formalaringizdan barcha, qobiliyatlaridan qat'i nazar, foydalana olishini ta'minlashingiz mumkin. Maxsus imkoniyatlarga ustuvorlik berish nafaqat nogironligi bo'lgan foydalanuvchilarga foyda keltiradi, balki barcha foydalanuvchilar uchun veb-saytingizning umumiy foydalanish qulayligini ham yaxshilaydi. Qimmatli fikr-mulohazalarni olish va veb-saytingizning maxsus imkoniyatlarini doimiy ravishda yaxshilash uchun formalaringizni yordamchi texnologiyalar bilan doimiy ravishda sinab ko'rishni va sinov jarayoniga nogironligi bo'lgan foydalanuvchilarni jalb qilishni unutmang.

Maxsus imkoniyatlarni qabul qilish shunchaki muvofiqlik masalasi emas; bu barcha uchun yanada inklyuziv va adolatli veb yaratish demakdir. Maxsus imkoniyatlarga ega forma dizayniga sarmoya kiritib, siz inklyuzivlikka sodiqligingizni namoyish etasiz va barcha uchun yaxshiroq foydalanuvchi tajribasini yaratasiz.