Mazmunli rasmlar

---

Nega

Ekran o‘quvchi dasturlar dekorativ rasmlarni e’tiborsiz qoldiradi. Mazmunli rasmning ma’nosini esa ekran o‘quvchi dasturlar ovoz chiqarib aytishga harakat qiladi.

---

Nima

Ba’zi rasmlar mazmunli, ba’zilari esa dekorativ (bezak uchun) bo‘ladi. Bu qulaylik nuqtai nazaridan muhim farq. Har bir rasm mazmunli yoki dekorativ sifatida kodlanishi kerak.

---

Qanday

Mazmunli rasmlarni dekorativ rasmlardan qanday ajratishni o‘rganasiz.

---

Dekorativ rasmlar

Agar rasm foydalanuvchi uchun veb-sahifa yoki ilovaning funksionalligini yoki kontentini tushunishda muhim bo‘lmasa, u dekorativ hisoblanadi. Uni hech qanday ta’sirsiz olib tashlay olasizmi? Unda bu dekorativ rasm.

Bo‘sh alt atributi

Rasmni dekorativ deb belgilashning asosiy usuli — bo‘sh alt atributidan foydalanish.

Alibaba’ning bosh sahifasida to‘rtta tezkor havola bor – All Categories, Request for Quotation, Online Trade Show va Personal Protective Equipment. Har birida tasviriy ikonka bor. All Categories tezkor havolasida uchta to‘q ko‘k kvadrat va to‘q sariq doira tasvirlangan rasm bor. Bu dekorativ rasm. Buni bo‘sh alt atributini qo‘shish orqali belgilaymiz:

<img src="Ha50044a3568449409f3396e5b36be8c3h.png_80x80q80.jpg" alt="">

Shunda ekran o‘quvchi dastur kabi yordamchi texnologiyalar rasmni e’tiborsiz qoldiradi. Bo‘sh alt atributi bo‘lmasa, ekran o‘quvchi dastur fayl nomini o‘qib berishi mumkin. Bu hech qanday ma’noga ega bo‘lmaydi va foydalanuvchini chalg‘itadi.

Fon rasmlari

Dekorativ rasmlar uchun yana bir usul — ularni CSS background-image xossasi yordamida qo‘shish. Bu hero rasmlar yaratishda keng tarqalgan.

Shrift ikonkalari

Alibaba mobil versiyasining pastki qismida ikonka va matn birikmasidan iborat beshta havola bor – Home, Feeds, Messenger, Cart va My Alibaba. Ikonkalarni olib tashlasak ham sayt tushunarli bo‘lib qolgani uchun ular dekorativ hisoblanadi. Ikonkalar shrift ikonkalari yordamida yaratilgan. <img> elementi ham, fon rasmi ham yo‘q. role="img" va aria-hidden="true" qo‘shing:

<i class="navbarIcon" role="img" aria-hidden="true"></i>

Bu kod yordamida <i> elementiga rasm (img) roli orqali biroz semantika qo‘shamiz. Endi user agentlar (brauzerlar) bu rasm ekanini tushunadi. Ekran o‘quvchi dasturlar ham rasmni e’tiborsiz qoldirish kerakligini tushunadi.

Inline SVG rasmlar

Agar dekorativ SVG rasmni <img> elementi bilan qo‘shsangiz, yuqorida tavsiflanganidek bo‘sh alt atributini qo‘shishingiz kerak. SVG rasmlar ko‘pincha <svg> elementi yordamida inline tarzda joylashtiriladi. Bu holatda aria-hidden="true" rasmingizni dekorativ qiladi.

<svg aria-hidden="true" …></svg>

---

---

Mazmunli rasmlar

Rasmlarimizning aksariyati mazmunli. Alibaba’dan olingan ushbu misolda oltita rasm bor:

• Logotip
• Qidiruv ikonkasi
• Qahva
• Kurtka
• 1 yillik nishon
• Oltin nishon

Bu yerdagi yagona dekorativ rasm — qidiruv ikonkasi. U Search Products matni tufayli dekorativ hisoblanadi. Agar qidiruvni ochish ikonkasi alohida (matnsiz) turganida, u mazmunli rasm bo‘lardi.

Dekorativ rasmlardagi kabi, mazmunli rasmlarni kodlashning ham bir nechta usuli bor.

---

Tavsifiy alt atributi

alt atributi foydalanuvchi biror sababga ko‘ra rasmni ko‘ra olmasa, uning uchun muqobil matnni taqdim etadi. Sabab sekin internet aloqasi, rasm faylidagi xato yoki foydalanuvchining ekran o‘quvchi dasturdan foydalanishi bo‘lishi mumkin. alt atributining qiymati rasmni, yoki undan ham yaxshisi — rasmning maqsadini tasvirlashi kerak. Nima yozish kerakligini Rasmlar uchun tavsifiy matn sahifasida o‘rganasiz.

Alibaba’dan olingan ushbu misolda logotip ikki sababga ko‘ra joylashtirilgan. Birinchidan, foydalanuvchilarga qaysi saytda ekanini bildirish uchun. Ikkinchidan, foydalanuvchilarga bosh sahifaga qaytish havolasini taqdim etish uchun.

Qulay emas:

Yaxshiroq, lekin baribir yomon:

Yaxshiroq:

Eng yaxshisi:

Fon rasmlari, shrift ikonkalari va <svg> rasmlar

Fon rasmlari, shrift ikonkalari va <svg> uchun usul bir xil:

• role="img" qo‘shing
• Tavsifiy aria-label yoki aria-labelledby atributini qo‘shing.

<div role="img" aria-label="Private house, modern architecture. Minimalistic with a big garage.">

Endi dekorativ va mazmunli rasmlarni qanday kodlashni bilasiz. Keyingi darsda mazmunli rasmlar uchun tavsifiy matn sifatida nima yozishni o‘rganasiz.

---