Veb-saytingizni Birinchi Kod Satridan Boshlab Hammaga Ochish: To‘liq Qo‘llanma

H1: Veb-saytingizni Birinchi Kod Satridan Boshlab Hammaga Ochish: To‘liq Qo‘llanma

Ushbu qo‘llanma oxiriga yetganingizda, siz web accessibility (veb-saytning hamma uchun ochiq bo‘lishi) tamoyillarini loyihangizning dastlabki bosqichlaridan boshlab qanday qo‘llashni, shuningdek, qayta ishlash narxini 80% ga kamaytirishni va O‘zbekiston hamda Markaziy Osiyo bozorida mijozlar bazangizni sezilarli darajada kengaytirishni o‘rganasiz.

1. Siz nimaga erishasiz?

Siz o‘rganasiz:

• Inclusive design (inklyuziv dizayn) tamoyillarini loyihalash jarayoniga qanday integratsiya qilish.
• HTML, CSS va JavaScriptda birinchi kod satridan boshlab qo‘llashingiz kerak bo‘lgan asosiy amaliy texnikalar.
• Digital accessibility (raqamli ochiqlik) standartlari (WCAG) haqida tushuncha.
• Avtomatlashtirilgan vositalar yordamida muammolarni qanday aniqlash va bartaraf etish.
• Natijada, barcha foydalanuvchilar, shu jumladan nogironlikka ega bo‘lganlar uchun ham qulay, qonuniy talablarga javob beradigan va SEO jihatidan yaxshi holatdagi accessible websites (ochiq veb-sayt) yaratasiz.

2. Boshlashdan oldin kerak bo‘ladigan narsalar

• Niyat: Barcha odamlar uchun ochiq bo‘lgan mahsulot yaratish istagi.
• Asosiy bilim: HTML va CSS asoslarini tushunish.
• Vositalar: Kod muharriri (VS Code, Sublime Text va h.k.) va brauzer.
• Sinov vositalari: Brauzerda o‘rnatilgan dasturchi vositalari (Chrome DevTools, Firefox Developer Tools).
• Vaqt: Loyihani bosqichma-bosqich amalga oshirish uchun 4-6 hafta.

---

3. 1-qadam: Semantik HTML – Binoning Poydevori (Vaqt: Loyiha davomida doimiy)

Nima bu? Semantik HTML - bu veb-sahifaning tarkibiy qismlarini (<header>, <nav>, <main>, <section>, <article>, <footer>, <button>) ularning ma’nosi va roli bo‘yicha belgilash. Oddiy <div> va <span> o‘rniga.

Nega bu muhim? Ekran o‘quvchi dasturlari (screen readers) va boshqa yordamchi texnologiyalar sahifaning tuzilishini va mazmunini aniq tushunishi uchun. Bu web accessibility ning eng muhim tamoyilidir. Shuningdek, bu SEO uchun juda yaxshi, chunki qidiruv tizimlari ham kontentni yaxshiroq tushunadi.

Keng tarqalgan xatolar:

• Har bir narsani <div> yoki <span> bilan qurish.
• Navigatsiya uchun <div> va JavaScript-dan foydalanish, <nav> va haqiqiy ro‘yxat (<ul>, <li>) o‘rniga.
• Tugmalar yoki havolalar o‘rniga stil berish uchun <div> lardan foydalanish.

4. 2-qadam: Ranglar va Kontrast – Har Bir Kishi Ko‘ra Olsin (Vaqt: Dizayn bosqichida 2-3 soat)

Nima bu? Matn va fon o‘rtasidagi etarli yorqinlik farqini (kontrastni) ta’minlash. Faqat rangga tayanib ma’lumot yetkazmaslik.

Nega bu muhim? Dunyoda 300 milliondan ortiq odam rang ko‘rishida muammoga ega. Yaqin 2025-yilgi ma’lumotlarga ko‘ra, veb-saytlarning 80% dan ko‘pi hali ham etarli kontrast talablariga javob bermaydi. Kam kontrastli matnni o‘qish ko‘pchilik uchun qiyin.

Keng tarqalgan xatolar:

• Och kulrang matnni ochroq kulrang fonda yozish.
• Muvaffaqiyat/xato xabarlarini faqat qizil yoki yashil ranglar orqali ko‘rsatish (rangdan tashqari belgi qo‘shing).
• Kontrastni hisoblamasdan, faqat estetikaga qarab ranglarni tanlash.

Kontrastni tekshirish: WCAG 2.1 standarti bo‘yicha oddiy matn uchun minimal kontrast nisbati 4.5:1, yirik matn uchun 3:1. Buni tekshirish uchun "WebAIM Contrast Checker" kabi onlayn vositalardan foydalaning.

---

5. 3-qadam: Tasvirlar (Images) – Har Bir Rasmingiz Izohsiz Qolmasin (Vaqt: Har bir rasm uchun 1-2 daqiqa)

Nima bu? Barcha mazmunli tasvirlarga alt atributi (alternativ matn) qo‘shish. Bu matn tasvirni ko‘ra olmaydigan foydalanuvchilar uchun uning mazmunini yetkazadi.

Nega bu muhim? Ekran o‘quvchi dasturlar alt matnini o‘qiydi. Shuningdek, tasvir yuklanmaganida bu matn ekranda ko‘rinadi. Bu ham SEO uchun foydalidir.

Keng tarqalgan xatolar:

• alt="" (bo‘sh qoldirish) mazmunli rasmlar uchun.
• "Rasm", "tasvir", "photo.jpg" kabi ma’nosiz alt matnlari yozish.
• Dekorativ rasmlarni alt bilan belgilash (ular uchun alt="" bo‘lishi kerak).

Qoida: O‘zingizga savol bering – "Agar bu rasm bo‘lmasa, uning o‘rniga qanday matn qo‘ygan bo‘lardim?" Javob sizning alt matningizdir.

6. 4-qadam: Klaviatura Navigatsiyasi – Sichqonchasiz Sayt (Vaqt: Dasturlash bosqichida 3-4 soat)

Nima bu? Foydalanuvchining faqat klaviatura (Tab, Shift+Tab, Enter, Space, arrow keys) yordamida saytning barcha interaktiv elementlari (havolalar, tugmalar, formlar) orasida harakatlanishi va ulardan foydalanishi mumkinligini ta’minlash.

Nega bu muhim? Sichqonchani ishlata olmaydigan (masalan, qo‘l harakati cheklangan) yoki faqat klaviatura ishlatishni afzal ko‘radigan millionlab odamlar bor. Bu digital accessibility ning asosiy sinovi hisoblanadi.

Keng tarqalgan xatolar:

• div yoki span ga onclick hodisasi qo‘yib, uni klaviatura orqali fokuslanmaydigan (non-focusable) qilish.
• CSS orqali outline: none; yozib, fokus ko‘rsatkichini (focus indicator) butunlay yo‘q qilish (uni faqat o‘zgartirish mumkin).
• Modal oynalar (dialog) yoki menyularni klaviatura yordamida yopib bo‘lmasligi.

7. 5-qadam: Formalar – Hammaga Oson To‘ldirish (Vaqt: Har bir forma uchun 1 soat)

Nima bu? Har bir forma maydoniga (<input>, <select>, <textarea>) aniq va bog‘langan label yaratish. Xatolik xabarlarini aniq va yechimli ko‘rsatish.

Nega bu muhim? Ekran o‘quvchi foydalanuvchi forma maydoniga kirishda label matnini o‘qiydi. label siz, foydalanuvchi nima kiritishi kerakligini bilmaydi. McKinsey ma’lumotlariga ko‘ra, soddalashtirilgan va ochiq forma jarayoni mijozlarning 70% ga yaqinini saqlab qolish imkoniyatini oshiradi.

Keng tarqalgan xatolar:

• placeholder ni label o‘rniga ishlatish.
• label ni vizual yashirish (CSS bilan ekrandan olib tashlash), lekin u DOMda qolishini ta’minlamaslik.
• Xato haqida faqat rang orqali (masalan, chegarani qizil qilish) xabar berish, matnli tavsif bermaslik.

8. 6-qadam: Media Kontent – Tinglash va Ko‘rish Imkoniyati (Vaqt: Video uchun 1-2 soat)

Nima bu? Videolar uchun subtitrlar (sarlavhalar), transkriptlar va audio tavsiflar taqdim etish. Audiolar uchun transkript yaratish.

Nega bu muhim? Kar yoki eshitish qiyinchiligi cheklangan foydalanuvchilar, shuningdek, ovozsiz muhitda (ofis, jamoat transporti) bo‘lganlar uchun subtitrlar zarur. Transkriptlar, shuningdek, SEO va kontentning qayta ishlatilishi uchun ajoyib imkoniyatdir.

Keng tarqalgan xatolar:

• Avtomatik yaratilgan subtitrlarni tekshirmasdan qoldirish (ular ko‘pincha xatolarga ega).
• Faqat videoni joylashtirib, unga alternativlarni taqdim etmaslik.
• Ovozli slayd-shoular yoki podkastlar uchun transkript yaratmaslik.

---

9. 7-qadam: ARIA – Semantikani To‘ldiruvchi Kuchli Vosita (Vaqt: Murakkab komponentlar uchun 2-3 soat)

Nima bu? ARIA (Accessible Rich Internet Applications) - bu standart HTML elementlari yetarli ma’lumot bermaganda, ularning roli, holati va xususiyatlarini yordamchi texnologiyalarga aniqroq yetkazish uchun ishlatiladigan atributlar to‘plami.

Nega bu muhim? JavaScript yordamida yaratilgan murakkab veb-ilovalar (masalan, yangilanishi kerak bo‘lgan kontent, tab panelar, drag-and-drop) uchun zarur.

Keng tarqalgan xatolar (VAHIM):

• "ARIA spreyi" ishlatish: Har bir narsaga keraksiz ARIA atributlarini qo‘shish. BIRINCHI QOID: Mavjud semantik HTML elementidan foydalanish mumkin bo‘lsa, ARIA ishlatmang.
• role ni berib, lekin klaviatura navigatsiyasi yoki holatlarini boshqarmaslik (masalan, role="button" berib, unga onKeyDown hodisasini qo‘shmaslik).
• Dinamik o‘zgaruvchi ARIA atributlarini (aria-live, aria-atomic) noto‘g‘ri ishlatish.

10. 8-qadam: Testlash – Foydalanuvchining Ko‘zidan Ko‘rish (Vaqt: Har bir iteratsiyada 1-2 soat)

Nima bu? Yaratilgan saytni avtomatlashtirilgan vositalar, qo‘lda tekshirish va haqiqiy foydalanuvchilar, shu jumladan nogironlikka ega bo‘lganlar yordamida sinab ko‘rish.

Nega bu muhim? Hech qanday vosita inson tushunchasini to‘liq almashtira olmaydi. Gartner 2025-yilgi hisobotida ta’kidlaganidek, inclusive design ni qo‘llagan kompaniyalar bozorda raqobatdosh ustunlikka ega bo‘lish ehtimoli 1,7 baravar yuqori.

Keng tarqalgan xatolar:

• Faqat avtomatlashtirilgan test natijalariga (masalan, Lighthouse balli) tayanib, ish yakunlangan deb hisoblash.
• Ekran o‘quvchi dasturidan foydalanib, qo‘lda tekshirishni o‘tkazib yuborish.
• Loyihaning oxirigacha testlarni kutish (bu eng katta xato).

Testlash usullari:

• Avtomatik: Lighthouse (Chrome DevTools da), axe DevTools.
• Qo‘lda: Faqat klaviatura yordamida saytni kezish. Ekran o‘quvchi dasturini (masalan, NVDA, VoiceOver) sinab ko‘rish.
• Foydalanuvchi testi: Turli imkoniyatlarga ega bo‘lgan odamlar bilan sinov o‘tkazish.

11. Vaqt Jadvali Kutilmalari

• Dizayn & Reja (1-hafta): Kontrast, ranglar, tipografiya, komponent kutubxonasini loyihalash.
• Front-end Dasturlash (2-4 hafta): Yuqoridagi 8 qadamni kodga aylantirish. Har bir komponentni yaratish vaqtida test qilish.
• Keng qamrovli Testlash (5-hafta): Avtomatik, qo‘lda va foydalanuvchi testlari.
• Chiqarish va Monitoring (6-hafta va undan keyin): Saytni chiqarish, fikr-mulohazalarni yig‘ish va doimiy yaxshilash.

Eslat