Web accessibility asoslari

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.

<!-- 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>

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.

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.

<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.

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 — webdagi xatoni taxmin bilan emas, dalil bilan topishni o’rganamiz.