aria-live va jonli hududlar: dinamik xabarni ekran o'quvchiga aytish

Qisqacha: Ekran o'quvchi odatda faqat fokusdagi elementni o'qiydi. Sahifaning boshqa joyida paydo bo'lgan xabarni ("Savatga qo'shildi") u sezmaydi. Buni jonli hudud hal qiladi: aria-live="polite" yoki role="status" li element ichidagi matn o'zgarsa, ekran o'quvchi uni o'zi o'qib beradi. Shoshilinch xato uchun — role="alert". Hudud sahifada oldindan, bo'sh holda turishi kerak.

Bu darsda

• Nega dinamik xabarlar ekran o'quvchiga yetib bormasligini tushuntira olasiz.
• aria-live ning polite va assertive qiymatlarini to'g'ri tanlaysiz.
• role="status", role="alert" va output ni jonli hudud sifatida ishlatasiz.
• aria-atomic va aria-busy nima qilishini bilasiz.
• Qachon jonli hudud, qachon fokusni ko'chirish kerakligini ajrata olasiz.

Oldin bilishingiz kerak: ARIA asoslari, Klaviatura va fokus boshqaruvi, Guruhlash va natija elementlari (output), Qulay va accessible forma.

1. Nega bu kerak?

«Bahor» saytining menyu sahifasi. Ko'radigan mehmon osh yonidagi "Savatga" tugmasini bosadi. Ikki narsa bo'ladi: tepadagi "Savat: 2" yozuvi "Savat: 3" ga o'zgaradi va pastda uch soniyaga "Osh savatga qo'shildi" degan yashil xabar chiqadi.

Endi Malika shu tugmani Enter bilan bosdi. U nima eshitadi? Hech narsa. Fokus tugmada qoldi, ekran o'quvchi esa faqat fokusdagi narsani o'qiydi. Tepadagi raqam va pastdagi xabar uning "ko'z o'ngidan" tashqarida o'zgardi.

Malika o'ylaydi: "Ishladimi? Yo'qmi?". Yana bosadi. Savatda endi ikkita osh. Keyin yana bir marta — uchta.

Muammo tugmada emas, xabarda. Xabar ekranda bor, lekin ekran o'quvchiga yetkazilmagan. WCAG'da buning uchun alohida mezon bor — 4.1.3 Status Messages (AA): holat xabari fokus o'zgarmasdan ham ekran o'quvchiga yetib borishi kerak. Bu darsda xabarni yetkazishni o'rganamiz.

2. Jonli hudud nima

2.1 Vokzaldagi e'lon

Toshkent vokzalini tasavvur qiling. Tablo'da poyezdlar ro'yxati bor. Ko'radigan yo'lovchi uni o'qiydi. Lekin yo'lovchi tablo'ga qaramay turgan bo'lsa-chi? Buning uchun karnay bor: "Toshkent — Samarqand poyezdi 2-yo'lga keldi". Siz qayerga qarab turganingizdan qat'i nazar, e'lon sizga yetib boradi.

Jonli hudud (live region) — sahifaning shunday "karnayli" qismi. Uning ichidagi matn o'zgarsa, ekran o'quvchi fokus qayerda bo'lishidan qat'i nazar uni o'qib beradi.

Vokzalda ikki xil e'lon bor:

• Oddiy e'lon — diktor boshqa gapni tugatishini kutadi, keyin aytadi: "Poyezd 2-yo'lga keldi".
• Shoshilinch e'lon — hamma narsani to'xtatib, darhol aytiladi: "Diqqat! Binodan chiqing".

Jonli hududlarda ham aynan shu ikki daraja bor.

2.2 aria-live

Jonli hudud aria-live atributi bilan belgilanadi. U uchta qiymat oladi:

polite ("xushmuomala") — deyarli har doim to'g'ri tanlov. Ekran o'quvchi hozir o'qiyotgan narsani tugatadi, keyin xabarni aytadi. Malikaning ishi buzilmaydi.

assertive ("qat'iy") — ekran o'quvchini to'xtatadi. Uni faqat haqiqatan shoshilinch holatda ishlating: ma'lumot yo'qolishi mumkin bo'lsa, harakat muvaffaqiyatsiz tugagan bo'lsa. Hamma xabar assertive bo'lsa, Malika hech bir gapni oxirigacha eshita olmaydi.

Bo'sh joyni to'ldiring: "Osh savatga qo'shildi" degan xabar uchun aria-live ning qiymati bo'ladi.

3. Asosiy qoida: hudud oldindan turadi

3.1 Ekran o'quvchi nimani kuzatadi

Ekran o'quvchi sahifa ochilganda undagi jonli hududlarni "eslab qoladi". Keyin faqat ularning ichidagi o'zgarishni kuzatadi. Yangi paydo bo'lgan hududni esa ko'pincha sezmay qoladi.

Shuning uchun eng muhim qoida: jonli hudud sahifa ochilganda allaqachon bor va bo'sh bo'ladi. Keyin JavaScript faqat uning ichiga matn yozadi.

3.2 Qadamma-qadam: savat xabari

HTML qismini yozamiz. Sahifa ochilgandagi holat:

<button type="button">Savatga</button>

<p id="savat-xabar" aria-live="polite"></p>

p bo'sh — ekranda hech narsa yo'q, ekran o'quvchi ham jim. Lekin hudud mavjud va kuzatilyapti.

Endi vaziyatni vaqt bo'yicha kuzatamiz:

JavaScript ishini qilgandan keyin HTML shunday bo'ladi:

<button type="button">Savatga</button>

<p id="savat-xabar" aria-live="polite">
  Osh savatga qo'shildi. Savatda 3 ta taom.
</p>

E'tibor bering: p o'sha-o'sha element. Faqat ichidagi matn o'zgardi. Aynan shu o'zgarish ekran o'quvchiga "e'lon qil" degan signal.

Matnni qanday yozish — JavaScript ishi. Uni Kontentni o'zgartirish va Dinamik UI'da qulaylik darslarida qilamiz. Bugun HTML qismi va qoidalarni o'rganamiz — ular JavaScript'da ham o'zgarmaydi.

3.3 Nega "tayyor xabar bilan birga qo'shish" ishlamaydi

Keling, xato variantni ko'ramiz. Sahifa ochilganda hudud yo'q. Tugma bosilgach, JavaScript sahifaga butunlay yangi element qo'shadi:

<!-- ❌ element matni bilan birga, keyin qo'shildi -->
<p aria-live="polite">Osh savatga qo'shildi.</p>

Ekran o'quvchi uchun bu "yangi hudud paydo bo'ldi", "hududda o'zgarish bo'ldi" emas. Ko'p ekran o'quvchilar bunday xabarni o'qimaydi. Ba'zilari o'qiydi — va aynan shu chalg'itadi: bitta kompyuterda tekshirgan dasturchi "ishlayapti" deb o'ylaydi.

Tekshirib ko'ring: Nega jonli hudud sahifa ochilganda bo'sh turishi kerak, nega unga boshidanoq matn yozib qo'ymaymiz?

4. Tayyor rollar: status va alert

4.1 Ikki qisqa yo'l

ARIA'da jonli hudud uchun tayyor rollar bor. Ular aria-live ni o'zi qo'yadi. Chrome'da tekshirdik — accessibility daraxtida ularning xususiyatlari shunday:

Ya'ni role="status" = aria-live="polite" + aria-atomic="true". Rol esa qo'shimcha ma'no ham beradi: "bu — holat xabari".

<!-- holat xabari -->
<p role="status"></p>

<!-- shoshilinch xato -->
<p role="alert"></p>

aria-atomic ni 5-bo'limda ko'ramiz.

Maslahat: Ba'zi jamoalar role="status" bilan birga aria-live="polite" ni ham yozadi. Bu eski ekran o'quvchilar uchun sug'urta. Ortiqcha, lekin zararsiz — bitta ma'noni ikki marta aytadi.

4.2 alert — faqat haqiqiy shoshilinch holat uchun

role="alert" ekran o'quvchini to'xtatadi. Uni faqat quyidagi holatlarda ishlating:

• Harakat muvaffaqiyatsiz tugadi: "Internet uzildi. Buyurtma yuborilmadi".
• Ma'lumot yo'qolishi mumkin: "Sessiya 1 daqiqadan keyin tugaydi".

"Buyurtma qabul qilindi" — alert emas, status. Yaxshi xabar kutib turishi mumkin.

Diqqat: role="alert" ni shoshilinch oyna bilan adashtirmang. Foydalanuvchi javob berishi kerak bo'lsa ("Buyurtmani bekor qilasizmi? Ha / Yo'q"), bu — dialog. alert faqat matn aytadi, fokusni o'zgartirmaydi.

4.3 output — tayyor jonli hudud

Guruhlash va natija elementlari darsida output elementi o'zgarganda ko'p brauzerlarda ekran o'quvchi yangi qiymatni o'qishini aytgan edik. Endi sababini bilamiz. Chrome'da tekshirdik: output ning yashirin roli — status, u bilan birga live: polite va atomic: true.

<label for="kishi">Necha kishi?</label>
<input id="kishi" name="kishi" type="number"
       min="1" max="20" value="2">
<p>
  Jami: <output name="jami" for="kishi">70000</output> so'm
</p>

Mehmonlar soni o'zgarsa va JavaScript yangi summani output ga yozsa, ekran o'quvchi uni o'qiydi. Qo'shimcha atribut kerak emas — yana birinchi qoida: native element.

Tekshirib ko'ring: Qaysi rolni tanlaysiz: (a) "Izohingiz saqlandi"; (b) "To'lov amalga oshmadi, karta rad etildi"; (c) choyxona menejeri bilan chat oynasi.

5. Nozik sozlamalar: aria-atomic va aria-busy

5.1 aria-atomic: butunmi yoki faqat o'zgargani?

Savat hisoblagichi:

<p aria-live="polite">
  Savatda <span>3</span> ta taom
</p>

JavaScript faqat span ichidagi raqamni 3 dan 4 ga o'zgartirdi. Ekran o'quvchi nima deydi?

• aria-atomic="false" (sukut bo'yicha) — faqat o'zgargan qismni: "4". Malika "4 nima?" deb qoladi.
• aria-atomic="true" — butun hududni: "Savatda 4 ta taom".

"Atomic" — "bo'linmas" degani. Hudud bitta butun gap sifatida o'qiladi. Qisqa holat xabarlarida deyarli har doim true kerak:

<p aria-live="polite" aria-atomic="true">
  Savatda <span>3</span> ta taom
</p>

role="status" va role="alert" da aria-atomic="true" allaqachon bor. Chat (log) da esa false to'g'ri: har gal faqat yangi xabarni eshitish kerak, butun suhbatni emas.

Maslahat: Yana bitta atribut bor — aria-relevant. U qaysi turdagi o'zgarishlar e'lon qilinishini belgilaydi: qo'shilgan element, o'zgargan matn yoki o'chirilgan element. Sukut qiymati (qo'shilgan va o'zgargan) deyarli har doim to'g'ri, uni o'zgartirish kam kerak bo'ladi.

5.2 aria-busy: "hozir yangilanyapman"

Menyuda qidiruv: mehmon "sho'rva" deb yozdi, natijalar ro'yxati yangilanyapti. Ro'yxat bo'lakma-bo'lak o'zgaradi: avval eski taomlar o'chadi, keyin yangilari birma-bir qo'shiladi. Jonli hudud har bir bo'lakni alohida e'lon qilsa — tartibsiz shovqin.

aria-busy="true" — "bu hudud hozir yangilanyapti, kutib turing" degan holat. Yangilanish tugagach, u "false" qilinadi va ekran o'quvchi natijani bir marta o'qiydi.

Vaziyat HTML'da uch bosqichda:

<!-- 1. Sahifa ochilganda -->
<p role="status" aria-busy="false"></p>

<!-- 2. Qidiruv boshlandi -->
<p role="status" aria-busy="true">Qidirilmoqda...</p>

<!-- 3. Natija tayyor -->
<p role="status" aria-busy="false">4 ta taom topildi.</p>

Chrome daraxtda busy holatini ko'rsatadi. Lekin ekran o'quvchilar aria-busy ni har xil qo'llaydi. Shuning uchun asosiy yechim baribir oddiy: bir marta, tayyor matnni yozish.

6. Jonli hudud yoki fokusni ko'chirish?

Dinamik o'zgarishni yetkazishning ikkinchi yo'li — fokusni o'zi o'zgargan joyga olib borish. O'tgan darslarda dialog fokusni ichiga olib kirishini ko'rgandik. Qaysi birini qachon tanlash kerak?

Qoida: odamdan harakat kutilsa — fokusni ko'chiring. Faqat xabar berilsa — jonli hudud. Fokusni sababsiz ko'chirish ham xato: odam yozib turgan maydonidan uloqtirib yuboriladi.

Qulay forma darsidagi server qaytargan xatoli sahifani eslang. U yerda jonli hudud kerak emas edi. Sahifa to'liq qayta yuklanadi, ekran o'quvchi yangi title ni ("Xato: ...") o'zi o'qiydi. Jonli hudud — sahifa qayta yuklanmasdan, JavaScript bilan o'zgaradigan joylar uchun.

7. SPA'da sahifa almashuvi (eslatma)

Oddiy saytda havolani bossangiz, brauzer yangi sahifani yuklaydi. Ekran o'quvchi yangi title ni o'qiydi va sahifa boshidan boshlaydi. Hammasi o'z-o'zidan.

SPA (Single Page Application — bitta sahifali ilova) da esa boshqacha. Bu — sahifani qayta yuklamay, JavaScript bilan kontentni almashtiradigan sayt. React bilan yasalgan ko'p saytlar shunday (React'ni kursda alohida o'rganamiz). Havolani bosasiz, kontent o'zgaradi, manzil qatori ham o'zgaradi. Lekin brauzer nuqtayi nazaridan sahifa o'sha-o'sha. Ekran o'quvchi jim qoladi — Malika yangi sahifaga o'tganini bilmaydi.

Yechimlar ikki xil:

• Yangi sahifa ochilganda fokusni uning h1 sarlavhasiga ko'chirish.
• Yashirin jonli hudud orqali "Menyu sahifasi yuklandi" deb e'lon qilish.

Zamonaviy freymvorklar (sayt qurish uchun tayyor asos) buni tayyor beradi. Masalan, Next.js'da (kursda alohida o'rganamiz) sahifa almashganda yangi sahifa nomini ekranda ko'rinmaydigan jonli hudud orqali aytadigan maxsus qism bor. Hozir buni faqat bilib qo'ying. Amalda SPA routing darsida uchratasiz.

8. Ko'p uchraydigan xatolar

8.1 Hudud xabar bilan birga paydo bo'ladi

3-bo'limdagi xato. Tuzatish: bo'sh hudud sahifada oldindan turadi, JavaScript faqat ichini to'ldiradi.

8.2 Butun sahifa jonli

<!-- ❌ har bir o'zgarish e'lon qilinadi -->
<main aria-live="polite">...</main>

Sahifadagi har kichik o'zgarish — soat, reklama, animatsiya — ekran o'quvchini gapirtiradi. Tuzatish: jonli hudud — faqat xabar uchun ajratilgan kichik element.

8.3 Hamma narsa assertive

Har xabar ekran o'quvchini to'xtatadi, odam hech narsani oxirigacha eshita olmaydi. Tuzatish: sukut bo'yicha polite yoki status; alert — faqat xato va xavf uchun.

8.4 Xabar hidden hudud ichida

<!-- ❌ hidden element daraxtda yo'q — e'lon ham yo'q -->
<p aria-live="polite" hidden>Osh savatga qo'shildi.</p>

ARIA asoslari darsidagi jadvalni eslang: hidden hamma uchun yashiradi. Ekran o'quvchi o'qiy olmaydigan narsani e'lon ham qila olmaydi. Tuzatish: xabar faqat ekran o'quvchi uchun bo'lsa — korinmas klass, hidden emas.

8.5 Xabar uch soniyada yo'qoladi

Toast — ekran chetida qisqa vaqt chiqib, o'zi yo'qoladigan kichik xabar. Nomi tosterdan sakrab chiqadigan non bo'lagidan olingan. Bizning yashil "Osh savatga qo'shildi" xabarimiz — toast, u 3 soniyada o'chadi. Ekran o'quvchi uni e'lon qilib ulgurgan bo'lishi mumkin, lekin sekin o'qiydigan yoki chalg'igan odam ulgurmaydi. Toast ichida "Bekor qilish" tugmasi bo'lsa, klaviaturadagi odam unga yetib ham bormaydi. Tuzatish: muhim ma'lumot ko'rinib turadigan joyda ham bo'lsin (savat hisoblagichi), toast ichiga yagona muhim tugmani qo'ymang.

8.6 Har harf e'lon qilinadi

Qidiruvda har harf yozilganda "12 ta topildi", "8 ta topildi", "3 ta topildi" deb aytiladi. Odam yozayotgan harflarini ham eshita olmay qoladi. Tuzatish: natijani odam yozishdan to'xtagach, bir marta e'lon qilish. Bu JavaScript'ning ishi — Dinamik UI'da qulaylik darsida qilamiz.

9. Mashqlar

1-mashq (oson): polite, assertive yoki fokus?

Har vaziyat uchun tanlang: status, alert yoki fokusni ko'chirish.

1. Sevimli taomlarga qo'shildi.
2. Serverga ulanib bo'lmadi, bron yuborilmadi.
3. "Chiqish" bosilganda "Rostdan chiqasizmi?" oynasi.
4. Filtr bosildi: "Sho'rvalar: 5 ta taom".
5. To'lov sahifasida sessiya tugashiga 60 soniya qoldi.

2-mashq (o'rta): Savat hisoblagichi

«Bahor» sahifasining tepasida "Savatda 0 ta taom" degan yozuv bor. Taom qo'shilganda JavaScript faqat raqamni o'zgartiradi. Ekran o'quvchi butun gapni o'qishi uchun HTML'ni yozing. Bo'sh joylarni to'ldiring:

<p role="____">
  Savatda <span>0</span> ta taom
</p>

Rol: [:status]. Bu rol aria-atomic ni qaysi qiymatga qo'yadi? [:true]

<p role="status">
  Savatda <span>0</span> ta taom
</p>

3-mashq (qiyin): Bron formasining uch holati

«Bahor» bron formasi endi sahifani qayta yuklamay yuboriladi (JavaScript bilan — keyinroq). "Stolni band qilish" tugmasi ostiga xabar joyini qo'ying va uning to'rt holatini HTML'da yozing:

1. Sahifa ochildi — xabar yo'q.
2. Yuborish boshlandi — "Yuborilmoqda...".
3. Muvaffaqiyat — "Rahmat, Malika! 12-oktabr, 18:00 ga 4 kishilik stol band qilindi."
4. Xato — "Internet uzildi. Bron yuborilmadi, qayta urinib ko'ring."

Qaysi holatda qaysi rol kerak? Nechta hudud kerak — bitta yoki ikkita?

Eslatma: bo'sh hudud sahifada oldindan bo'ladi (3-bo'lim); shoshilinch va oddiy xabarning rollari har xil (4-bo'lim).

<button type="submit">Stolni band qilish</button>
<p id="bron-holat" role="status"></p>
<p id="bron-xato" role="alert"></p>

<p id="bron-holat" role="status">Yuborilmoqda...</p>
<p id="bron-xato" role="alert"></p>

<p id="bron-holat" role="status">
  Rahmat, Malika! 12-oktabr, 18:00 ga 4 kishilik
  stol band qilindi.
</p>
<p id="bron-xato" role="alert"></p>

<p id="bron-holat" role="status"></p>
<p id="bron-xato" role="alert">
  Internet uzildi. Bron yuborilmadi, qayta urinib ko'ring.
</p>

10. Real ishda

• Toast kutubxonalari. React loyihalarida Sonner, react-hot-toast kabi kutubxonalar (kursda alohida o'rganamiz) bildirishnomalarni ko'rsatadi. Ularning ichida aynan role="status" va aria-live turadi. Toast'ni CSS bilan qurishni Tooltip, dropdown va toast darsida ko'ramiz.
• Onlayn do'konlar va banklar. Savatga qo'shish, to'lov holati, "SMS kod yuborildi" — hammasi jonli hudud orqali e'lon qilinishi kerak. Accessibility auditida birinchi tekshiriladigan narsalardan biri shu.
• Chat va qo'llab-quvvatlash vidjetlari — role="log" ning klassik joyi.
• Intervyuda so'raladi: "aria-live="polite" va assertive farqi?", "Nega jonli hudud sahifada oldindan bo'lishi kerak?", "SPA'da sahifa almashganda ekran o'quvchiga qanday xabar berasiz?".

Xulosa

• Ekran o'quvchi fokusdagi narsani o'qiydi; fokusdan tashqaridagi o'zgarish uchun jonli hudud kerak.
• aria-live="polite" — gap tugagach aytadi (deyarli har doim); assertive — darhol, faqat shoshilinch holatda.
• role="status" = polite + atomic; role="alert" = assertive + atomic; role="log" — chat; output — tayyor status.
• Hudud sahifa ochilganda allaqachon bor va bo'sh; JavaScript faqat ichidagi matnni o'zgartiradi.
• aria-atomic="true" butun gapni o'qitadi; aria-busy yangilanish tugaguncha kuttiradi.
• Harakat kerak bo'lsa — fokusni ko'chiring; faqat xabar bo'lsa — jonli hudud.

Keyingi dars: ARIA Authoring Practices: tayyor patternlar — tabs, menyu va combobox kabi murakkab vidjetlar uchun rollar va klaviatura qoidalari qayerda tayyor yozilganini ko'ramiz.

Manbalar

• MDN: "ARIA live regions", "aria-live", "status role", "alert role", "aria-busy" — developer.mozilla.org
• W3C: "WAI-ARIA 1.2" (Live Region Attributes) va "HTML Accessibility API Mappings" (output) — w3.org
• W3C WAI: WCAG 2.2 — 4.1.3 Status Messages va 2.2.1 Timing Adjustable — w3.org/WAI