Alt matn va Label'lar

Alt matn va labellar

Ikkita kichik odat accessibility uchun juda katta farq qiladi: rasmlar uchun yaxshi alt matn yozish va forma inputlarini to'g'ri labellash. Ikkalasi ham screen reader (sahifani ovoz chiqarib o'qiydigan dastur) foydalanadigan odamlarga yordam beradi, labellar esa hammaga yordam beradi.

Rasmlar uchun alt matn

<img> dagi alt atributi rasmning matnli tavsifini beradi. Agar rasm yuklanmasa, brauzer ushbu matnni ko'rsatadi; agar screen reader rasmga duch kelsa, u ushbu matnni ovoz chiqarib o'qiydi. Usiz screen reader shunchaki fayl nomini e'lon qilishi mumkin, bu esa foydasiz.

Asosiy ko'nikma — nima yozish kerakligini bilish — va qachon hech narsa yozmaslikni.

Rasm ma'noga ega bo'lganda uni tavsiflang. U nimani ko'rsatishini qisqa, foydali jumlada ayting:

<img src="chart.png" alt="Bar chart showing sales doubling from 2023 to 2024" />

Bezakli rasmlar uchun bo'sh alt dan foydalaning. Agar rasm sof bezakli bo'lsa — fon bezagi, ajratuvchi chiziq — ovoz chiqarib o'qilsa shovqin qo'shadi. Screen readerlar uni butunlay o'tkazib yuborishi uchun unga bo'sh alt bering:

<img src="swirl-divider.png" alt="" />

E'tibor bering: alt="" (bo'sh) bezak uchun ataylab va to'g'ri. alt ni butunlay qoldirib ketish boshqacha va yomonroq — atributni kiriting, shunchaki bo'sh.

Yana bir necha maslahat: "Rasm..." bilan boshlamang (screen reader allaqachon bu rasm ekanligini aytadi) va har bir pikselni emas, maqsadni tavsiflang.

Forma inputlarini labellash

Matn qutisi kabi input foydalanuvchilar nima yozishni bilishlari uchun label ni talab qiladi. Ko'rinadigan label shuningdek screen readerlarga e'lon qilish uchun nimadir beradi va bosiladigan nishonni kattaroq qiladi — labelni bosish inputni focus qiladi.

Labelni uning inputiga bog'lashning ishonchli usuli — for / id juftligi: labelning for atributi inputning id siga mos keladi.

<label for="email">Email address</label>
<input type="email" id="email" name="email" />

Endi label va input rasman bog'langan. "Email address" ni bosish kursorni qutiga qo'yadi va foydalanuvchi unga yetganda screen reader "Email address, edit text" ni e'lon qiladi.

Qochish kerak bo'lgan keng tarqalgan xatolar:

• Placeholder matnini yagona label sifatida ishlatish — placeholderlar yozishni boshlashingiz bilanoq yo'qoladi va ko'pincha o'qish uchun juda xira.
• for/id mosligini unutish, bu esa yaxshi ko'rinsa ham bog'lanishni jimgina buzadi.

Agar siz haqiqatan ham ko'rinadigan label ko'rsata olmasangiz, inputdagi aria-label="Email address" maqbul zaxira variant — lekin iloji boricha haqiqiy <label> yaxshiroq.

Suhbat maslahatlari

• Alt matn uchun ikkita holatni tushuntiring: ma'noli rasmlarni tavsiflang, bezakli rasmlar uchun alt="" dan foydalaning va atributni hech qachon tashlab ketmang.
• Labellar uchun for/id naqshini yoddan biling va bog'lanish nega ham bosish, ham screen readerlar uchun muhimligini.
• Placeholderlar labellarning o'rnini bosa olmasligini eslatib o'ting.