Accessibility — a11y asoslari, ARIA

~15 daq · JavaScript · Amaliy va Professional mavzular

Muammodan boshlaylik

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

Sichqoncha bilan ishlaydi. Lekin:

• Tab bosganda bu "tugma"ga fokus tushmaydi — klaviaturadan foydalanuvchi uni bosa olmaydi
• Ekran o'quvchi (screen reader) uni oddiy matn deb o'qiydi — ko'zi ojiz foydalanuvchi bu tugma ekanini bilmaydi
• Enter va Space ishlamaydi

Accessibility (a11y — "a", 11 ta harf, "y") — saytni nogironligi bor odamlar ham ishlata olishi: ko'rish, eshitish, harakat, idrok bilan bog'liq cheklovlar. Bu dunyo aholisining taxminan 16% i — va har birimiz vaqtincha (singan qo'l, quyoshda telefon ekrani) shu holatga tushamiz.

1-qoida: to'g'ri HTML elementi

<!-- ❌ -->
<div class="tugma" onclick="saqla()">Saqlash</div>

<!-- ✅ -->
<button type="button" onclick="saqla()">Saqlash</button>

<button> bepul beradi: fokus, Enter/Space, ekran o'quvchiga "tugma" roli, disabled holati.

Semantik HTML haqida batafsil — HTML kursi, 9–14 va 20–22-darslar.

Klaviatura

Barcha harakatlar klaviaturadan bajarilishi kerak:

/* ❌ fokus belgisini o'chirish */
*:focus { outline: none; }

/* ✅ faqat klaviatura uchun ko'rinadigan, chiroyli fokus */
:focus-visible {
  outline: 3px solid #10b981;
  outline-offset: 2px;
}

Fokusni boshqarish JS da

function modalOch() {
  oxirgiFokus = document.activeElement;
  dialog.showModal();                    // <dialog> fokusni o'zi ichkariga oladi
}

function modalYop() {
  dialog.close();
  oxirgiFokus?.focus();                  // fokusni qaytarish
}

[!WARNING] tabindex ga musbat son (tabindex="5") bermang — u tabiiy tartibni buzadi. Faqat 0 (fokuslanadigan qilish) va -1 (faqat JS dan focus()) ishlating.

ARIA

ARIA (Accessible Rich Internet Applications) — HTML yetmaganda ekran o'quvchiga qo'shimcha ma'lumot beruvchi atributlar.

[!INFO] ARIA ning birinchi qoidasi: agar mos HTML elementi bo'lsa — ARIA ishlatmang. <div role="button" tabindex="0"> + klaviatura kodi o'rniga — <button>. Noto'g'ri ARIA ARIA yo'qligidan ham yomonroq.

Nom berish

<!-- faqat ikonkali tugma -->
<button aria-label="Savatni yopish">
  <svg aria-hidden="true">...</svg>
</button>

<!-- boshqa element nomi sifatida -->
<h2 id="savat-sarlavha">Savat</h2>
<ul aria-labelledby="savat-sarlavha">...</ul>

<!-- qo'shimcha tavsif -->
<input id="parol" type="password" aria-describedby="parol-qoida" />
<p id="parol-qoida">Kamida 8 ta belgi</p>

Holatlar

// ochiladigan menyu
menyuTugma.setAttribute('aria-expanded', ochiq);   // "true" / "false"

// tanlangan filtr (77-dars)
tugma.setAttribute('aria-pressed', faol);

// joriy sahifa (78-dars)
havola.setAttribute('aria-current', 'page');

// noto'g'ri maydon
input.setAttribute('aria-invalid', 'true');

Dinamik o'zgarishlarni e'lon qilish

JS bilan sahifa o'zgarganda ko'rmaydigan foydalanuvchi buni bilmaydi:

<div id="xabar" role="status" aria-live="polite"></div>

function xabarBer(matn) {
  document.querySelector('#xabar').textContent = matn;
}

xabarBer('Mahsulot savatga qo\'shildi');
xabarBer('5 ta natija topildi');

• polite — joriy o'qish tugagandan keyin e'lon qiladi
• assertive (yoki role="alert") — darhol, faqat muhim xatolar uchun
• Live region sahifada oldindan bo'lishi kerak; faqat matni o'zgaradi

Rasmlar, ranglar, formalar

<img src="televizor.jpg" alt="Samsung 55 dyuymli televizor, qora" />
<img src="bezak.svg" alt="" />   <!-- bezak — bo'sh alt -->

• Kontrast: oddiy matn uchun kamida 4.5:1 (WCAG AA)
• Faqat rang bilan ma'lumot bermang: xato maydon — qizil ramka va matnli xabar
• Har bir input ning <label> i bo'lsin; placeholder — label o'rnini bosmaydi
• Animatsiyalar uchun: @media (prefers-reduced-motion: reduce)

Tekshirish

1. Sichqonchasiz sahifadan o'ting: Tab, Enter, Esc — hammasi ishlaydimi, fokus ko'rinadimi?
2. Lighthouse → Accessibility
3. axe DevTools kengaytmasi — batafsil xatolar
4. Ekran o'quvchi: Windows da NVDA (bepul), macOS da VoiceOver (Cmd+F5)
5. Sahifani 200% ga kattalashtiring — hamma narsa o'qiladimi?

[!TIP] Avtomatik vositalar xatolarning faqat 30–40% ini topadi. Eng samarali tekshiruv — 5 daqiqa sichqonchasiz ishlash va bir marta ekran o'quvchi bilan sinash.

Nima uchun shunday?

Nima uchun accessibility — "qo'shimcha imkoniyat" emas, balki asosiy talab?

Chunki veb hamma uchun yaratilgan, va ko'pchilik cheklovlar ko'zga ko'rinmaydi: ko'rishi past keksa odam, qo'li titraydigan foydalanuvchi, rang ajrata olmaydigan har o'n ikkinchi erkak. Ko'p mamlakatlarda bu qonuniy talab ham. Qizig'i, accessibility uchun qilingan narsalar hammaga foyda beradi: klaviatura navigatsiyasi tajribali foydalanuvchilarni tezlashtiradi, yaxshi kontrast quyoshda o'qishni osonlashtiradi, semantik HTML qidiruv tizimlariga sahifani tushunishga yordam beradi. Eng muhimi — to'g'ri HTML elementlarini tanlash accessibility ning katta qismini bepul hal qiladi.

Xulosa

Eslab qoling:

• Avval to'g'ri HTML: <button>, <a href>, <label>, <dialog> — ko'p narsa bepul
• Hamma narsa klaviaturadan; :focus-visible ni o'chirmang; musbat tabindex yo'q
• ARIA — faqat HTML yetmaganda: aria-label, aria-expanded, aria-current, aria-hidden
• Dinamik o'zgarishlar — aria-live="polite" / role="status"
• alt matn, 4.5:1 kontrast, faqat rangga tayanmaslik, prefers-reduced-motion
• Tekshirish: sichqonchasiz, Lighthouse, axe, NVDA/VoiceOver

Kurs yakunlandi

Tabriklaymiz — JavaScript kursini tugatdingiz! Siz o'zgaruvchilar va funksiyalardan boshlab closure, prototiplar, asinxron dasturlash, DOM, modullar, funksional dasturlash, Vite bilan real SPA va professional mavzular — testlash, debugging, performance, xavfsizlik va accessibility gacha bo'lgan yo'lni bosib o'tdingiz.

Keyingi qadamlar:

• O'z loyihangizni yarating — vanilla JS + Vite bilan
• TypeScript kursi — JavaScript ga turlar qo'shish
• React kursi — komponentlarga asoslangan UI
• Node.js va Express kurslari — JavaScript serverda