Accessibility nima va nima uchun muhim

~10 daq · HTML · Accessibility

Muammodan boshlaylik

Tajriba qiling. O'zingiz yasagan saytni oching va:

  1. Sichqonchani chetga qo'ying. Faqat Tab, Enter, Space va strelkalar bilan menyuni oching, formani to'ldiring, tugmani bosing
  2. Ekranni 200% ga kattalashtiring (Ctrl +). Matn o'qiladimi, yoki hamma narsa bir-birining ustiga chiqdimi?
  3. Quyosh ostida telefonda oching. Och kulrang matnni oq fonda o'qiy olasizmi?

Ko'p saytlar bu sinovlardan o'tmaydi. Va bu sinovlar — millionlab odamlarning har kungi hayoti: ko'rish qobiliyati past, qo'li titraydigan, sichqoncha ishlata olmaydigan, yoki shunchaki singan qo'l bilan yurgan foydalanuvchilar.

Accessibility nima

Accessibility (qisqacha a11y — "a", 11 ta harf, "y") — sayt hamma odamlar uchun, ularning imkoniyatlaridan qat'i nazar, foydalanish mumkin bo'lishi.

Kimlar uchun:

Imkoniyat Qanday foydalanadi Saytdan nima kerak
Ko'zi ojiz Ekran o'quvchi (screen reader) — sahifani ovoz bilan o'qiydi Semantik HTML, alt, label lar
Ko'rish qobiliyati past Kattalashtirish, yuqori kontrast Yetarli kontrast, kattalashtirish buzmasin
Rang ajrata olmaslik (erkaklarning ~8%) Odatdagidek Ma'lumot faqat rangda bo'lmasin
Harakat cheklovlari Faqat klaviatura, ovoz bilan boshqarish, maxsus tugmalar Hamma narsa klaviatura bilan ishlasin
Eshitish qobiliyati past Subtitrlar Video uchun subtitr, audio uchun matn
Kognitiv Oddiy va aniq interfeys Tushunarli til, izchil tuzilma, vaqt cheklovlarisiz

Vaqtinchalik va vaziyatga bog'liq

Accessibility nafaqat doimiy nogironlik haqida:

  • Vaqtinchalik: singan qo'l, ko'z operatsiyasidan keyin
  • Vaziyatga bog'liq: quyosh ostidagi ekran, bir qo'lda bola bilan telefon, shovqinli joyda ovozsiz video, sekin internet

Har bir inson hayotida qachondir "cheklangan" holatda bo'ladi. Accessible sayt — hamma uchun yaxshi sayt.

Ekran o'quvchi qanday ishlaydi

Ekran o'quvchi sahifani ko'rmaydi — u HTML tuzilmasini o'qiydi va ovoz bilan aytadi:

<button>Saqlash</button>

🔊 "Saqlash, tugma"

<div class="btn" onclick="saqla()">Saqlash</div>

🔊 "Saqlash" — tugma ekani aytilmaydi, Tab bilan tanlanmaydi, Enter bilan bosilmaydi

<img src="grafik.png">

🔊 "grafik.png, rasm" — fayl nomi, hech narsa tushunarsiz

<img src="grafik.png" alt="2026 yilda foydalanuvchilar soni 3 baravar oshdi">

🔊 "2026 yilda foydalanuvchilar soni 3 baravar oshdi, rasm"

Mashhur ekran o'quvchilar: NVDA (Windows, bepul), VoiceOver (Mac va iPhone — o'rnatilgan), TalkBack (Android — o'rnatilgan), JAWS.

[!TIP] Bir marta sinab ko'ring: Mac da Cmd + F5, Windows da NVDA ni o'rnating, telefonda sozlamalardan TalkBack/VoiceOver ni yoqing. Ko'zingizni yumib o'z saytingizdan biror narsani qidirib ko'ring. 5 daqiqa — va accessibility ga qarashingiz butunlay o'zgaradi.

Asosiy tamoyillar — WCAG

Xalqaro standart — WCAG (Web Content Accessibility Guidelines). Uning to'rt tamoyili — POUR:

Tamoyil Ma'nosi Misollar
Perceivable — idrok etiladigan Ma'lumotni sezish mumkin alt, subtitrlar, kontrast
Operable — boshqariladigan Interfeysni ishlatish mumkin Klaviatura, yetarli vaqt, tugmalar katta
Understandable — tushunarli Kontent va interfeys tushunarli Aniq til, izchil menyu, xato xabarlari
Robust — mustahkam Turli vositalarda ishlaydi To'g'ri HTML, ARIA ning to'g'ri ishlatilishi

Darajalari: A (minimal), AA (ko'pchilik qonunlar talab qiladigan standart), AAA (eng yuqori).

Eng muhim qoidalar — 80% natija

Ko'p muammolar bir necha oddiy qoida bilan hal bo'ladi — va ularning ko'pchiligini oldingi darslarda o'rgandik:

1. Semantik HTML (9–10-darslar)

<button>, <a href>, <nav>, <main>, <h1>–<h6>, <label>, <ul>

To'g'ri teg — accessibility ning yarmi. Ekran o'quvchi, klaviatura va boshqa vositalar tayyor ishlaydi.

2. Rasmlar uchun alt (6-dars)

<img src="logo.svg" alt="DevDocs">            <!-- ma'noli rasm -->
<img src="naqsh.svg" alt="">                  <!-- bezak — bo'sh alt, o'qilmaydi -->

3. Har bir maydonga label (15-dars)

<label for="email">Email</label>
<input id="email" type="email">

4. Rang kontrasti

Matn va fon orasidagi kontrast: oddiy matn uchun kamida 4.5 : 1, katta matn uchun 3 : 1 (WCAG AA).

/* ❌ 2.3 : 1 — o'qish qiyin */
color: #aaaaaa; background: #ffffff;

/* ✅ 7 : 1 */
color: #555555; background: #ffffff;

Tekshirish: Chrome DevTools da elementni tanlang → rang yonida kontrast ko'rsatkichi.

5. Ma'lumot faqat rangda bo'lmasin

<!-- ❌ faqat qizil chegara — rang ajrata olmaydigan foydalanuvchi ko'rmaydi -->
<input class="xato">

<!-- ✅ rang + ikonka + matn -->
<input class="xato" aria-invalid="true" aria-describedby="email-xato">
<p id="email-xato">⚠ Email formati noto'g'ri</p>

6. Klaviatura (22-dars)

Har bir interaktiv element Tab bilan tanlanishi, fokus ko'rinishi va Enter/Space bilan ishlashi kerak.

/* ❌ hech qachon */
*:focus { outline: none; }

/* ✅ */
:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

7. Sahifa tili (2-dars)

<html lang="uz">

Busiz ekran o'quvchi o'zbekcha matnni ingliz talaffuzi bilan o'qiydi — tushunib bo'lmaydi.

8. Kattalashtirish va harakat

  • user-scalable=no yo'q (11-dars)
  • O'lchamlar rem da — foydalanuvchi shrift o'lchamini oshirsa, sayt moslashadi
  • Animatsiyalarni prefers-reduced-motion bilan hurmat qiling (CSS kursi, 29-dars)

Tekshirish vositalari

Vosita Nima qiladi
Lighthouse (Chrome DevTools) Accessibility balli va muammolar ro'yxati
axe DevTools (kengaytma) Batafsil tekshiruv, tuzatish bo'yicha maslahatlar
WAVE (kengaytma) Muammolarni sahifaning o'zida ko'rsatadi
Klaviatura Sichqonchasiz butun saytni o'tib chiqish
Ekran o'quvchi NVDA, VoiceOver bilan haqiqiy sinov

[!INFO] Avtomatik vositalar muammolarning faqat 30–40% ini topadi. Ular alt borligini tekshiradi, lekin alt="rasm" foydasiz ekanini bilmaydi; tugma borligini ko'radi, lekin klaviatura bilan unga yetib bo'lmasligini sezmaydi. Qo'lda sinov — klaviatura va ekran o'quvchi bilan — almashtirib bo'lmaydi.

Nima uchun muhim

  1. Odamlar — dunyo aholisining ~16% i (1,3 milliard) qandaydir nogironlik bilan yashaydi. Ular ham kurs o'qishi, xarid qilishi, xizmatdan foydalanishi kerak
  2. Qonun — Yevropa (European Accessibility Act, 2025), AQSh (ADA) va boshqa davlatlarda accessibility talab qilinadi; xalqaro loyihalarda ishlasangiz — bu majburiyat
  3. SEO — accessible sayt ko'pincha yaxshiroq indekslanadi: semantik HTML, alt, sarlavhalar (13-dars)
  4. Hamma uchun qulaylik — subtitrlar, klaviatura yorliqlari, katta tugmalar, aniq xatolar — barcha foydalanuvchilarga yoqadi
  5. Professionallik — yaxshi frontend dasturchi accessibility ni biladi; intervyularda tez-tez so'raladi

Nima uchun shunday?

Nima uchun accessibility ko'pincha "keyinroq qilamiz" ro'yxatiga tushadi — va nima uchun bu xato?

Chunki dasturchi o'zi uchun sinaydi: sichqoncha bilan, yaxshi ekranda, sog'lom ko'z bilan. Muammolar ko'rinmaydi — ular faqat boshqa foydalanuvchilarda paydo bo'ladi, va bu foydalanuvchilar odatda shikoyat qilmaydi — shunchaki ketib qoladi. "Keyinroq" esa qimmat: div lardan qurilgan saytni keyin tuzatish — deyarli qaytadan yozish. Boshidan to'g'ri HTML yozish esa qo'shimcha vaqt talab qilmaydi: <button> yozish <div onclick> yozishdan qiyin emas. Accessibility — alohida xususiyat emas, sifatli kod yozishning bir qismi.

Xulosa

Eslab qoling:

  • Accessibility (a11y) — sayt imkoniyatidan qat'i nazar hamma uchun ishlaydi
  • Doimiy, vaqtinchalik va vaziyatga bog'liq cheklovlar — hammamizga tegishli
  • Ekran o'quvchi HTML ni o'qiydi — semantika hal qiluvchi
  • WCAG: POUR — idrok, boshqaruv, tushunarlilik, mustahkamlik; maqsad — AA
  • Asosiy qoidalar: semantik HTML, alt, label, kontrast 4.5:1, faqat rang emas, klaviatura va fokus, lang
  • Avtomatik vositalar — 30–40%; klaviatura va ekran o'quvchi bilan qo'lda sinang

Keyingi dars

21-dars: ARIA — role, aria-label, aria-hidden, aria-expanded