Chapter 9 — Accessibility va ARIA

Semantik HTML — accessibility'ning 80%ini "bepul" beradi. ARIA — qolgan holatlar uchun qo'shimcha ma'lumot beradi.

---

9.1 ARIA Roles

Example

index.html
HTMLNusxalash
01<div role="button" tabindex="0">Custom tugma</div>
02<div role="alert">Xato yuz berdi</div>
03<div role="navigation">...</div>

⚠️ Common Mistake
Semantik HTML element mavjud bo'lsa ham (<button>, <nav>), ularning o'rniga <div role="..."> ishlatish — bu ortiqcha ish va ko'proq xato ehtimolini keltirib chiqaradi.

9.2 aria-label, aria-labelledby, aria-describedby

Example

index.html
HTMLNusxalash
01<button aria-label="Modalni yopish">✕</button>
02 
03<div id="dialog-title">Tasdiqlash</div>
04<div role="dialog" aria-labelledby="dialog-title">...</div>
05 
06<input aria-describedby="password-hint">
07<p id="password-hint">Kamida 8 ta belgi bo'lishi kerak</p>

9.3 aria-live va Dinamik Kontent

Example

index.html
HTMLNusxalash
01<div aria-live="polite" id="cart-count">Savatda 3 ta mahsulot</div>

💡 Key Idea
aria-live="polite" — bu elementning kontenti JavaScript orqali o'zgarganda, ekran o'quvchi foydalanuvchini "bezovta qilmasdan" (joriy ishini to'xtatmasdan), keyingi qulay vaqtda o'zgarish haqida xabardor qiladi.

📝 Practice Exercises

🟡 Exercise 1 — Medium

Task: Faqat "✕" ikonkasiga ega, ekran o'quvchi uchun tushunarli yopish tugmasini yarating.

🔴 Exercise 2 — Hard

Task: Savat sonini real-vaqtda yangilaydigan, ekran o'quvchiga ham xabar beradigan komponent yarating (aria-live bilan).

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<div class="btn" onclick="submitForm()">Yuborish</div>

Your Task: Bu "tugma" nechta accessibility muammosiga ega?

<details> <summary>Solution</summary> Muammolar: (1) klaviatura orqali fokus ololmaydi va ishga tushmaydi; (2) ekran o'quvchi buni "tugma" deb e'lon qilmaydi. Eng yaxshi yechim — haqiqiy `<button>`: ```html <button onclick="submitForm()">Yuborish</button> ``` Agar `<div>` ishlatish shart bo'lsa (kamdan-kam holat): `role="button" tabindex="0"` va klaviatura event handler qo'shish kerak. </details>

📌 Chapter Summary

ARIA — semantik HTML yetarli bo'lmagan holatlar uchun qo'shimcha ma'lumot beradi, lekin "First Rule of ARIA" — imkon qadar semantik elementlarni afzal ko'rish. aria-label, aria-labelledby, aria-describedby, aria-live — eng ko'p ishlatiladigan ARIA atributlari.

🎯 Key Takeaways

• Avval semantik HTML, keyin (kerak bo'lsa) ARIA
• aria-label — ko'rinmas/matnsiz elementlarga tushunarli nom beradi
• aria-live — dinamik kontent haqida ekran o'quvchini xabardor qiladi
• ARIA — HTML'ning o'rnini bosmaydi, uni to'ldiradi

⚡ Quick Cheat Sheet

index.html
HTMLNusxalash
01<button aria-label="Yopish">✕</button>
02<div role="dialog" aria-labelledby="title-id">...</div>
03<div aria-live="polite">...</div>

---