Chapter 19 — Barcha Uchun Qulay UI

---

19.1 Semantik HTML va focus-visible

Example

index.html
HTMLNusxalash
01<button onclick="submit()" class="bg-blue-500 text-white px-4 py-2 rounded focus-visible:ring-2 focus-visible:ring-blue-500">
02  Yuborish
03</button>

Why Does It Exist?

Tailwind faqat vizual qatlam — u HTML semantikasini o'zgartirmaydi. <div onclick> klaviatura orqali fokusga tushmaydi va screen reader uni "tugma" deb tanimaydi.

19.2 sr-only va Rang Kontrasti

Example

index.html
HTMLNusxalash
01<button class="p-2 rounded-full bg-gray-100">
02  <svg class="w-5 h-5"></svg>
03  <span class="sr-only">Sozlamalarni ochish</span>
04</button>

⚠️ Common Mistake
Faqat rangga tayangan holatda ma'lumot berish (masalan faqat qizil chegara bilan xato ko'rsatish) — rang ko'rmaydigan foydalanuvchilar buni sezmaydi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: <div onclick> o'rniga <button> ishlatib, focus-visible:ring-2 qo'shing.

🟡 Exercise 2 — Medium

Task: Accessible forma yarating — label+input bog'lash (for/id), xato xabari aria-describedby bilan.

🔴 Exercise 3 — Hard

Task: Faqat ikonkali tugma yarating, sr-only bilan matn qo'shib, screen reader uchun tushunarli qiling.

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<button class="focus:outline-none">Yuborish</button>

Your Task: Nega bu klaviatura foydalanuvchilari uchun muammoli?

<details> <summary>Solution</summary> `focus:outline-none` brauzerning default fokus halqasini olib tashlaydi, lekin o'rniga hech narsa bermaydi — klaviatura orqali navigatsiya qilayotgan foydalanuvchi qayerda ekanini bilolmaydi. Yechim: `focus-visible:ring-2` kabi muqobil vizual signal qo'shish. </details>

---

📌 Chapter Summary

Tailwind vizual qatlam — semantik HTML va ARIA atributlari alohida e'tibor talab qiladi. focus-visible klaviatura foydalanuvchilari uchun, sr-only screen reader uchun asosiy vositalar.

🎯 Key Takeaways

• Har doim to'g'ri semantik teg (button, label, nav) ishlating
• outline-none faqat muqobil fokus indikatori bilan birga ishlatilsin
• Rang kontrastini har doim tekshiring, faqat rangga tayanmang

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Semantika:  <button>, <label for>, <input id>
02Fokus:      focus-visible:ring-2 focus-visible:ring-offset-2
03Screen reader: sr-only

---