# Web accessibility asoslari

> Accessibility nima va nega har bir web dasturchiga kerak? Semantik HTML, klaviatura, fokus, alt matn, rang kontrasti va screen reader asoslari.

Manba: https://learncode.uz/web-dasturlash/web-accessibility/
Sana: 2026-05-11

![Web sahifadan klaviatura, screen reader, mobil qurilma va turli foydalanuvchilar foydalanishi](https://learncode.uz/images/web-dasturlash/web-accessibility-hero.webp)

*Accessible web sayt ko'rish, eshitish, harakat yoki idrok imkoniyati turlicha bo'lgan odamlarga bir xil vazifani bajarishga yordam beradi.*

**Web accessibility** yoki qisqacha **a11y** — sayt va ilovani imkoniyati,
qurilmasi yoki foydalanish usuli turlicha bo'lgan odamlar ishlata oladigan
qilib qurishdir. Bu faqat screen reader foydalanuvchilari uchun qo'shimcha
funksiya emas. To'g'ri sarlavha, klaviatura boshqaruvi, tushunarli xato va
yaxshi kontrast deyarli hammaga yordam beradi.

## Accessibility kimga yordam beradi

Foydalanuvchida doimiy, vaqtinchalik yoki vaziyatga bog'liq cheklov bo'lishi
mumkin. Masalan:

- ko'rish qobiliyati past odam screen reader yoki kattalashtirish ishlatadi;
- qo'li jarohatlangan foydalanuvchi faqat klaviaturadan foydalanadi;
- quyoshli joydagi telefon ekranida past kontrastli matn o'qilmaydi;
- video ovozsiz ko'rilayotgan joyda subtitr zarur bo'ladi;
- sekin internetda sodda, semantik sahifa yaxshiroq ishlaydi.

Shuning uchun accessibility alohida "maxsus rejim" emas; u mustahkam web
mahsulotning odatiy sifat talabidir.

## Semantik HTML — birinchi himoya

Brauzer `<button>`, `<a>`, `<nav>`, `<main>` va sarlavha teglarining ma'nosini
biladi. Bu ma'no accessibility tree orqali yordamchi texnologiyalarga
yetkaziladi. Oddiy `<div>`ni bosiladigan qilib qo'yish esa tugmaning klaviatura,
fokus va rol xususiyatlarini avtomatik bermaydi.

```html
<!-- To'g'ri: ma'nosi va klaviatura xatti-harakati tayyor -->
<button type="button">Savatga qo'shish</button>

<!-- Noto'g'ri boshlanish: div tugma vazifasini bilmaydi -->
<div onclick="addToCart()">Savatga qo'shish</div>
```

> **ARIA birinchi tanlov emas**
>
> Kerakli semantik HTML elementi mavjud bo'lsa, avval shuni ishlating. ARIA
> HTMLda yo'q murakkab holatni tushuntirish uchun foydali, lekin noto'g'ri ARIA
> yaxshi semantikani buzishi ham mumkin.

## Klaviatura va fokus

Interaktiv elementlarga `Tab` bilan yetib borish, `Enter` yoki `Space` bilan
faollashtirish mumkin bo'lishi kerak. Fokus indikatori ko'rinishi shart; umumiy
`outline: none` foydalanuvchini sahifada qayerda turganidan mahrum qiladi.

Modal oynani ochganda fokus uning ichiga o'tishi, yopilganda avvalgi tugmaga
qaytishi kerak. Fokus tartibi odatda DOM tartibiga mos bo'ladi; vizual CSS
joylashuvini mutlaqo boshqa tartibga ko'chirish chalkashlik tug'dirishi mumkin.

## Matn, rang va media

- Muhim matn fon bilan yetarli kontrastga ega bo'lsin.
- Holat faqat rang bilan berilmasin: qizil chegara bilan birga xato matni ham
  yozilsin.
- Mazmunli rasmga maqsadini tushuntiradigan `alt` matn bering.
- Faqat bezak bo'lgan rasmda `alt=""` ishlating.
- Video uchun subtitr, audio mazmun uchun matnli alternativa bering.
- Havola matni "bu yerga bosing" emas, qayerga olib borishini bildirsin.

![Semantik HTML, klaviatura fokusi, rang kontrasti va rasm alt matnidan iborat accessibility asoslari](https://learncode.uz/images/web-dasturlash/accessibility-asoslari.webp)

*Semantika, klaviatura, ko'rinadigan fokus, kontrast va matnli alternativalar accessible interfeysning tayanchlaridir.*

## Formadagi xatolar

Har input aniq `<label>` bilan bog'lanadi. Xato bo'lsa, qaysi maydon va nima
sabab noto'g'ri ekanini matnda ayting. Faqat placeholder label o'rnini bosa
olmaydi: foydalanuvchi yozishni boshlaganda u yo'qoladi.

```html
<label for="email">Email manzil</label>
<input id="email" name="email" type="email" aria-describedby="email-xato" />
<p id="email-xato">Email manzil to'liq yozilmagan.</p>
```

## Qanday tekshiriladi

Avtomatik audit foydali, ammo hamma muammoni topmaydi. Kamida quyidagilarni
qo'lda tekshiring:

1. Sichqonchasiz, faqat klaviatura bilan asosiy vazifani bajaring.
2. Fokus har doim ko'rinishini tekshiring.
3. Sahifani kattalashtirib va kichik ekranda ko'ring.
4. Rasmlarni o'chirib, alt matn ma'noni yetkazishini tekshiring.
5. Screen reader bilan sarlavha va forma tuzilishini eshiting.

![Klaviatura, screen reader, zoom, kontrast va avtomatik audit bilan accessibility tekshiruvi](https://learncode.uz/images/web-dasturlash/accessibility-tekshiruv.webp)

*Avtomatik auditni klaviatura, zoom va screen reader bilan qo'lda tekshirish to'ldiradi.*

> **Bir daqiqalik test**
>
> Sahifada sichqonchaga tegmasdan `Tab` tugmasini bosing. Logo, navigatsiya,
> tugmalar va formaga mantiqiy tartibda o'ta olyapsizmi? Fokus qayerdaligi aniqmi?
> Menyuni ochib-yopish va formani yuborish mumkinmi? Bu qisqa test ko'p jiddiy
> muammoni darhol ko'rsatadi.

## Qisqacha xulosa

- Accessibility barcha foydalanuvchi va vaziyatlar uchun mahsulot sifatidir.
- Semantik HTML ko'p accessibility xatti-harakatini bepul beradi.
- Klaviatura boshqaruvi va ko'rinadigan fokus majburiy.
- Rang yagona signal bo'lmasin; rasm va media uchun alternativa bering.
- Avtomatik vosita yetmaydi — qo'lda va real foydalanuvchi bilan test kerak.

Keyingi darsda [Brauzer DevTools va debugging](https://learncode.uz/web-dasturlash/devtools-debugging)
— webdagi xatoni taxmin bilan emas, dalil bilan topishni o'rganamiz.