Yaxshi alt matn yozish: informativ, bezak va funksional rasmlar

Qisqacha: Alt matn rasmning tashqi ko'rinishini emas, uning sahifadagi vazifasini aytadi. Ma'lumot beruvchi rasmga — o'sha ma'lumot. Faqat bezak bo'lsa — bo'sh alt="". Havola yoki tugma ichidagi rasmga — u qayerga olib borishi yoki nima qilishi. Rasmdagi yozuv — alt'ning o'zi. Murakkab grafikka — qisqa alt va batafsil tavsif yonida.

Bu darsda

• Rasmning besh turini tanib, har biriga mos alt yozasiz.
• Qachon alt="" to'g'ri ekanini bilasiz.
• Havola va tugma ichidagi rasmlar uchun alt yozasiz.
• Grafik va diagrammani ko'rmaydigan foydalanuvchiga tushuntirasiz.
• alt, title va figcaption farqini ajratasiz.

Oldin bilishingiz kerak: Rasm qo'yish: img asoslari.

1. Nega bu kerak?

O'tgan darsda alt majburiy ekanini ko'rdik. Validator faqat alt borligini tekshiradi. Sifatini esa hech bir vosita tekshira olmaydi — bu sizning ishingiz.

Tasavvur qiling: Malika ko'zi ojiz, choyxona saytini telefonidagi ekran o'quvchi bilan "o'qiydi". Sahifada 10 ta rasm. Ekran o'quvchi har biriga yetganda alt matnini aytadi. Agar alt'lar "rasm", "IMG_4521.jpg", "osh" bo'lsa — Malika hech narsani tushunmaydi. Agar hamma bezak chiziqlarga ham "chiroyli naqsh" deb yozilgan bo'lsa — u zerikib, saytni yopadi.

Yaxshi alt — Malikaga ko'radigan odam bilan bir xil ma'lumotni qisqa va kerakli qilib berish.

2. Asosiy g'oya: rasm nima uchun turibdi?

Alt yozishdan oldin o'zingizga savol bering: "Agar bu rasmni olib tashlab, o'rniga matn qo'ysam — nima yozardim?"

Javob — alt matn. U rasmning tavsifi emas, uning o'rinbosari.

Bir xil rasm turli sahifalarda turli alt oladi. Masalan, oshxonadagi oshpaz surati:

Surat bitta, vazifa uchta — alt ham uchta.

3. Besh turdagi rasm

3.1 Informativ rasm — ma'lumot beradi

Rasm matnda yo'q ma'lumotni beradi. Alt o'sha ma'lumotni qisqa aytadi:

<img src="../assets/images/toshkent-oshi.jpg"
     alt="Toshkent oshi: guruch ustida go'sht va bedana tuxumi"
     width="1200" height="800">

Qoidalar:

• Qisqa. Odatda bitta gap. Ekran o'quvchi alt'ni to'xtatmasdan o'qiydi — uzun paragraf charchatadi.
• "Rasm" demang. "Rasmda osh" — ortiqcha. Ekran o'quvchi o'zi "rasm" yoki "grafika" deb e'lon qiladi.
• Muhimini oldinga qo'ying. "Toshkent oshi: ..." — asosiy so'z birinchi.
• Nuqta bilan tugating — ekran o'quvchi kichik pauza qiladi. Bu majburiy emas, lekin foydali.

3.2 Bezak rasm — alt=""

Rasm hech qanday ma'lumot bermaydi: naqshli chiziq, fon teksturasi, matn yonidagi shunchaki chiroyli surat. Unda alt bo'sh bo'ladi:

<img src="../assets/images/naqsh-chiziq.png" alt=""
     width="800" height="20">

alt="" ekran o'quvchiga aytadi: "bu rasmni o'tkazib yubor". Malika uni umuman eshitmaydi — bu yaxshi.

Diqqat: alt="" va alt'siz rasm — ikki xil narsa:

Bezak rasmlarning ko'pini umuman HTML'ga emas, CSS'ga qo'yish to'g'ri — buni figure va figcaption darsida gaplashamiz.

3.3 Funksional rasm — havola yoki tugma ichida

Rasm havola yoki tugmaning yagona mazmuni bo'lsa, u endi "rasm" emas — u boshqaruv elementi. Alt rasmni emas, harakatni aytadi:

<a href="../index.html">
  <img src="../assets/images/logo.svg"
       alt="Choyxona «Bahor» — bosh sahifa" width="160" height="40">
</a>

Logotip bosilsa bosh sahifa ochiladi. Shuning uchun alt — "logotip" emas, qayerga olib borishi.

Yana misollar:

• Telegram ikonkasi havolada → alt="Telegram kanalimiz", "ko'k qush" emas.
• Qidiruv tugmasidagi lupa → alt="Qidirish", "lupa" emas.
• Chop etish tugmasidagi printer → alt="Menyuni chop etish".

Tekshirib ko'ring: Sahifa pastida Instagram ikonkasi bor, u choyxonaning Instagram sahifasiga olib boradi. Qaysi alt to'g'ri: "Instagram logotipi" yoki "Instagram'dagi sahifamiz"?

3.4 Matnli rasm

Rasm ichida yozuv bor: aksiya banneri, e'lon, logotip nomi. Alt — rasmdagi yozuvning o'zi:

<img src="../assets/images/aksiya.png"
     alt="Juma kuni osh 30% arzon! Faqat 12:00 gacha."
     width="1200" height="400">

Ko'rmaydigan foydalanuvchi yozuvni "ko'ra" olmaydi — alt u uchun yagona manba.

Maslahat: Matnni rasmga "yopishtirishdan" iloji boricha qoching. Rasmdagi matnni Google o'qiy olmaydi, tarjimon tarjima qilmaydi, telefonda u mayda bo'lib qoladi. Aksiya yozuvini oddiy HTML matn qilib, uni CSS bilan bezash ancha yaxshi.

3.5 Murakkab rasm — grafik va diagramma

Choyxonaning oylik savdo grafigi. Bitta gapga butun grafikni sig'dirib bo'lmaydi. Yechim — ikki qism:

1. Qisqa alt — bu nima va asosiy xulosa.
2. Batafsil tavsif — yonida, sahifaning o'zida: matn, ro'yxat yoki jadval.

<img src="../assets/images/savdo-2026.png"
     alt="Savdo grafigi 2026: yozda eng yuqori. Batafsil — pastda."
     width="1200" height="600">
<p>Oylik savdo: yanvar — 120 porsiya, fevral — 130, ...,
iyul — 410 (eng yuqori), dekabr — 150.</p>

Bu usul hamma uchun foydali: ko'radigan foydalanuvchi ham aniq sonlarni matndan oladi. Grafik ma'lumotlari uchun eng yaxshi "tavsif" — HTML jadval. Uni Jadval asoslari darsida o'rganamiz.

4. Rasmlar guruhi

Ba'zan bir nechta rasm birgalikda bitta ma'noni beradi. Masalan, reyting yulduzchalari:

<p>
  <img src="yulduz.svg" alt="5 dan 4 yulduz" width="20" height="20">
  <img src="yulduz.svg" alt="" width="20" height="20">
  <img src="yulduz.svg" alt="" width="20" height="20">
  <img src="yulduz.svg" alt="" width="20" height="20">
  <img src="yulduz-bosh.svg" alt="" width="20" height="20">
</p>

Birinchi rasm butun guruh ma'nosini aytadi, qolganlari — alt="". Aks holda Malika "to'liq yulduz, to'liq yulduz, to'liq yulduz..." ni besh marta eshitardi.

5. Tanlash algoritmi

Har bir rasm uchun savollarni ketma-ket bering:

Bo'sh joyni to'ldiring: besh yulduzchali reyting guruhida nechta rasmning alt i to'ldiriladi?

Bu jadval xalqaro accessibility tashkiloti W3C WAI'ning "rasmlar uchun qaror daraxti"ga asoslangan.

6. alt, title va figcaption

Uchalasi ham rasmga matn qo'shadi, lekin vazifalari boshqa:

Alt o'rnida title ni ishlatmang — telefon foydalanuvchilari va klaviatura bilan ishlaydiganlar uni ko'rmaydi. Izoh (figcaption) esa alt'ni almashtirmaydi, uni to'ldiradi: alt — "nima tasvirlangan", figcaption — "bu haqda qo'shimcha nima deymiz". Keyingi darsda buni batafsil ko'ramiz.

7. Alt'ni tekshirish

Vositalar sifatni baholamaydi, lekin sizga "ko'rmaydigan foydalanuvchi ko'zi bilan" qarashga yordam beradi:

• DevTools → Elements → Accessibility. Rasmni tanlang va o'ng paneldagi Accessibility yorlig'ini oching. "Name" qatorida ekran o'quvchi aytadigan matn turadi.
• Rasmlarni o'chirish. Brauzer sozlamalarida rasmlarni yuklashni o'chirib qo'ying va sahifani o'qing. Alt'lar o'rnida qolgan matn bilan sahifa tushunarlimi?
• Haqiqiy ekran o'quvchi. Windows'da bepul NVDA, macOS va iPhone'da o'rnatilgan VoiceOver. Bir marta o'z sahifangizni ular bilan "tinglab" ko'ring — ko'p narsani birinchi marta tushunasiz. Ularni Accessibility'ni tekshirish darsida batafsil ishlatamiz.

8. Ko'p uchraydigan xatolar

8.1 Fayl nomi yoki "rasm"

alt="IMG_4521.jpg", alt="rasm", alt="foto" — hech qanday ma'lumot bermaydi. Ko'pincha kontent tizimlari fayl nomini avtomatik alt qiladi. Tuzatish: vazifaga qarab yangidan yozing.

8.2 SEO uchun kalit so'zlar

<img src="osh.jpg" alt="osh Toshkent osh arzon osh choyxona osh">

Bu — spam. Ekran o'quvchi foydalanuvchisini qiynaydi, Google esa bunday "kalit so'z to'ldirish"ni jazolaydi. Tuzatish: oddiy, halol tavsif. Yaxshi alt SEO uchun ham eng yaxshisi.

8.3 Bezakka uzun alt

Sahifadagi har bir naqsh va chiziqqa "chiroyli milliy naqsh" deb yozilgan. Malika uni o'n marta eshitadi. Tuzatish: bezak — alt="".

8.4 Havoladagi rasmga tavsif

<a href="/"><img src="logo.svg" alt="Logotip"></a> — ekran o'quvchi "havola, logotip" deydi. Qayerga olib boradi? Tuzatish: alt="Choyxona «Bahor» — bosh sahifa".

8.5 Yonidagi matnni takrorlash

<img src="manti.jpg" alt="Manti">
<p>Manti</p>

Ekran o'quvchi "Manti, rasm. Manti" deydi. Agar rasm yangi hech narsa bermasa va ostidagi matn allaqachon nomini aytsa, alt="" yetarli. Agar rasm qo'shimcha ma'lumot bersa (masalan, qovoqli ekani), alt'ga aynan o'shani yozing.

9. Mashqlar

1-mashq (oson): Turi va alt

Har bir rasm turini ayting va alt yozing:

1. Sahifa tepasidagi naqshli ajratgich chizig'i.
2. Telegram ikonkasi — t.me/sizning_kanal havolasida, yonida matn yo'q.
3. Banner: katta harflar bilan "Yangi filial Yunusobodda!".

2-mashq (o'rta): Alt'larni tuzating

<a href="../index.html"><img src="logo.svg" alt="logo.svg"></a>
<img src="naqsh.png" alt="chiroyli naqsh rasmi">
<img src="lagmon.jpg" alt="rasm">
<img src="aksiya.png">

Aksiya bannerida "Lag'mon + choy = 30 000 so'm" yozuvi bor. Lag'mon rasmi menyuda, yonida nomi yozilmagan.

<a href="../index.html">
  <img src="logo.svg" alt="Choyxona «Bahor» — bosh sahifa"
       width="160" height="40">
</a>
<img src="naqsh.png" alt="" width="800" height="20">
<img src="lagmon.jpg" alt="Qo'lda cho'zilgan lag'mon, go'shtli qayla"
     width="1200" height="800">
<img src="aksiya.png" alt="Lag'mon va choy — 30 000 so'm"
     width="1200" height="400">

3-mashq (qiyin): Choyxona saytidagi hamma rasmlar

Saytingizdagi har bir img ni ko'rib chiqing:

1. Har biri uchun 5-bo'limdagi jadval bo'yicha turini aniqlang va alt'ni qayta yozing.
2. Bitta grafik yoki sxema qo'shing (masalan, haftalik mehmonlar soni) — qisqa alt va sahifada batafsil matnli tavsif bilan.
3. DevTools'ning Accessibility yorlig'ida kamida uchta rasmning "Name" qatorini tekshiring.

<img src="../assets/images/mehmonlar-hafta.png"
     alt="Mehmonlar grafigi: eng ko'p — juma. Batafsil — pastda."
     width="1200" height="600">
<ul>
  <li>Dushanba — 80 mehmon</li>
  <li>Chorshanba — 95 mehmon</li>
  <li>Juma — 210 mehmon (eng ko'p)</li>
  <li>Yakshanba — 160 mehmon</li>
</ul>

10. Real ishda

• Qonun talabi. Ko'p davlatlarda davlat saytlari va yirik xizmatlar uchun accessibility majburiy. Yevropa Ittifoqida 2025-yildan boshlab ko'p onlayn xizmatlar uchun ham. Alt matnlar — tekshiriladigan birinchi narsalardan.
• Kontent muharrirlari. WordPress, Telegram, Instagram — ko'p platformalar rasm yuklaganda "alt matn" maydonini beradi. Dasturchi bu maydonni formaga qo'shishi va uni to'ldirishni eslatishi kerak.
• AI yordamchilar rasmga avtomatik alt taklif qilishi mumkin. Lekin ular rasmning vazifasini bilmaydi — faqat tashqi ko'rinishini. Avtomatik alt — boshlanish, yakuniy qaror — sizniki.
• Google Rasmlar qidiruvi alt matnlarga tayanadi. Yaxshi alt — qo'shimcha tashrif manbai.

Xulosa

• Alt — rasmning o'rinbosari: "rasm o'rniga qanday matn yozardim?" savoliga javob.
• Informativ — qisqa ma'lumot; bezak — alt=""; funksional — harakat yoki manzil.
• Matnli rasm — alt'da yozuvning o'zi; murakkab grafik — qisqa alt va yonida batafsil tavsif.
• Guruh rasmlarida ma'no bitta rasmda, qolganlari — alt="".
• title alt'ni almashtirmaydi; figcaption uni to'ldiradi.
• "rasm", fayl nomi, kalit so'zlar to'plami — yomon alt.

Keyingi dars: figure va figcaption — rasm, kod yoki iqtibosni uning izohi bilan bitta blokka bog'lash.

Manbalar

• W3C WAI: "Images Tutorial" va "An alt Decision Tree" — w3.org/WAI/tutorials/images
• WebAIM: "Alternative Text" — webaim.org
• MDN: <img> — alt atributi — developer.mozilla.org