Chapter 28 — Accessibility (A11y)

Yaxshi UI — faqat ko'rinishi chiroyli emas, balki har qanday foydalanuvchi (jumladan ekran o'quvchi yoki klaviatura orqali foydalanuvchilar) uchun ham qulay bo'lishi kerak.

---

28.1 Semantic HTML va ARIA

Example

App.jsx
React JSXNusxalash
01// Yomon
02<div onClick={handleClick}>Yuborish</div>
03 
04// Yaxshi
05<button onClick={handleClick}>Yuborish</button>

Why Does It Exist?

Semantic elementlar (<button>, <nav>, <header>) brauzer va ekran o'quvchilarga elementning vazifasini avtomatik yetkazadi — <div> esa hech qanday ma'no bermaydi.

28.2 Focus Management va Klaviatura Navigatsiyasi

Example

App.jsx
React JSXNusxalash
01function Modal({ onClose }) {
02  const closeButtonRef = useRef(null);
03  useEffect(() => {
04    closeButtonRef.current.focus(); // modal ochilganda fokusni boshqarish
05  }, []);
06 
07  return (
08    <div role="dialog" aria-modal="true">
09      <button ref={closeButtonRef} onClick={onClose}>Yopish</button>
10    </div>
11  );
12}

28.3 Forma va Rasmlarda Accessibility

Example

App.jsx
React JSXNusxalash
01<label htmlFor="email">Email</label>
02<input id="email" type="email" />
03 
04<img src="logo.png" alt="Kompaniya logotipi" />

⚠️ Common Mistake
<img> uchun alt atributini bo'sh yoki umuman qo'ymaslik — ekran o'quvchi foydalanuvchilariga rasm haqida hech qanday ma'lumot bermaydi.

📝 Practice Exercises

🟡 Exercise 1 — Medium

Task: Faqat klaviatura yordamida to'liq to'ldirish mumkin bo'lgan forma yarating (barcha maydonlar to'g'ri label'langan).

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01<div className="button" onClick={handleSubmit}>Yuborish</div>

Your Task: Bu element klaviatura orqali ishlatib bo'lmaydi. Nega, va qanday tuzatish mumkin?

<details> <summary>Solution</summary> `<div>` — standart holatda fokus ololmaydi va klaviatura hodisalarini qo'llab-quvvatlamaydi. Eng to'g'ri yechim — semantik `<button>` ishlatish: ```jsx <button className="button" onClick={handleSubmit}>Yuborish</button> ``` </details>

📌 Chapter Summary

Semantic HTML — accessibility'ning asosi. Focus management — modal va dinamik UI'larda muhim. Forma elementlari to'g'ri label'langan, rasmlar mazmunli alt matniga ega bo'lishi kerak.

🎯 Key Takeaways

• Semantik elementlar (button, nav, label) — accessibility'ni "bepul" beradi
• Focus management — modal va dinamik interfeyslarda zarur
• Har bir input — o'z label'iga, har bir rasm — mazmunli alt matniga ega bo'lishi kerak

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01<button onClick={fn}>...</button>           // <div onClick> emas
02<label htmlFor="x">Matn</label><input id="x" />
03<img src="..." alt="Tavsif" />
04<div role="dialog" aria-modal="true">...</div>

---