ARIA asoslari: role, aria-label va aria-expanded'ni to'g'ri ishlatish

Qisqacha: ARIA — HTML elementlariga accessibility daraxti uchun qo'shimcha rol, holat va xususiyat beradigan role va aria-* atributlari. U faqat ekran o'quvchiga aytiladigan ma'lumotni o'zgartiradi: elementning ko'rinishi ham, klaviatura bilan ishlashi ham o'zgarmaydi. Shuning uchun birinchi qoida: mos HTML element bo'lsa, ARIA emas, o'sha elementni ishlating. Noto'g'ri ARIA uning yo'qligidan yomonroq.

Bu darsda

• ARIA nima ekanini va u nimani o'zgartirib, nimani o'zgartirmasligini tushuntira olasiz.
• ARIA'ning 5 qoidasini bilasiz va birinchisini har kuni qo'llaysiz.
• aria-label, aria-labelledby va aria-describedby dan to'g'risini tanlaysiz.
• aria-expanded, aria-controls, aria-current va aria-pressed bilan holatni bildira olasiz.
• aria-hidden ning uchta tuzog'ini taniysiz va hidden, inert bilan farqini bilasiz.

Oldin bilishingiz kerak: Accessibility daraxti, Klaviatura va fokus boshqaruvi, Popover API, Fokus va tahrir atributlari.

1. Nega bu kerak?

O'tgan ikki darsda ikki narsani ko'rdik. Ekran o'quvchi accessibility daraxtini o'qiydi. Klaviaturadagi odam esa Tab bilan yuradi. Oddiy HTML teglari ikkalasini ham o'zi beradi: button — daraxtda tugma, Tab bilan yetib boriladi, Enter bilan bosiladi.

Lekin ba'zan HTML'da kerakli teg yo'q. Masalan, "yoqilgan/o'chirilgan" holatli tugma yoki yorliqli panel (tabs). Yoki teg bor, lekin ekran o'quvchiga qo'shimcha ma'lumot kerak: "bu menyu hozir ochiq", "siz hozir shu sahifadasiz".

Shu bo'shliqni ARIA to'ldiradi. Siz uni allaqachon ishlatgansiz: aria-label (Sahifa landmarklari), aria-hidden (SVG), aria-current (Ko'p sahifali sayt), aria-describedby va aria-invalid (Qulay forma). Bu darsda ularni bitta tizimga yig'amiz va eng muhimini o'rganamiz: ARIA'ni qachon ishlatmaslik kerak.

2. ARIA nima

2.1 Ta'rif

ARIA — Accessible Rich Internet Applications ("boy internet ilovalarini foydalanish mumkin qilish"). W3C standarti, hozirgi versiyasi — WAI-ARIA 1.2. U HTML'ga ikki turdagi atribut qo'shadi:

• role="..." — element nima ekanini aytadi;
• aria-...="..." — uning holati va xususiyatlarini aytadi.

Ikkalasi ham faqat accessibility daraxtiga ta'sir qiladi.

2.2 Bejik o'xshatishi — davomi

Accessibility daraxti darsidagi ofitsiant bejigini eslang. ARIA — bejikka yangi yozuv yopishtirish. Siz oddiy odamning ko'kragiga "Oshpaz" deb yozib qo'yishingiz mumkin. Mehmonlar uni oshpaz deb o'ylaydi. Lekin u osh pishirishni bilmaydi.

ARIA ham aynan shunday. <div role="button"> daraxtda "tugma" bo'ladi. Ekran o'quvchi "Savatga, tugma" deydi. Lekin div baribir tugmadek ishlamaydi.

2.3 ARIA nimani o'zgartiradi, nimani yo'q

Chrome'da <div role="button">Savatga</div> ni tekshirdik:

Malika "tugma" deb eshitadi, Enter bosadi — hech narsa bo'lmaydi. Bu ARIA'siz holatdan ham yomonroq: endi unga yolg'on va'da berildi.

Buni tuzatish uchun div ga tabindex="0" qo'shish va Enter hamda Space ni JavaScript bilan qo'lda ushlash kerak. <button> esa bularning hammasini bepul beradi.

Bo'sh joyni to'ldiring: ARIA faqat daraxtini o'zgartiradi, elementning xatti-harakatini emas.

3. ARIA'ning 5 qoidasi

W3C'ning "Using ARIA" hujjatida beshta qoida bor. Ular ARIA'ning butun falsafasi.

3.1 Birinchi qoida: native element ishlating

Kerakli ma'no va xatti-harakati bor HTML element mavjud bo'lsa — ARIA emas, o'sha elementni ishlating.

Native element uchta narsani bepul beradi: rol, klaviatura va holatni kuzatish. ARIA faqat birinchisini beradi.

Hatto html-validate ham shu qoidani biladi:

Prefer to use the native <button> element

Tarjimasi: "Native <button> elementini ishlatgan ma'qul." Bu xabar role="button" li div da chiqadi.

3.2 Qolgan to'rt qoida

2. Native ma'noni keraksiz o'zgartirmang. <h2 role="tab"> qilsangiz, sarlavha yo'qoladi — tekshirdik, Chrome uni faqat "tab" deb ko'rsatdi. Ekran o'quvchi foydalanuvchisi sarlavhalar ro'yxatida uni topa olmaydi. To'g'risi: sarlavhani o'z holicha qoldirib, rolni ichki elementga berish.
3. ARIA bilan yasalgan har interaktiv element klaviaturada ishlasin. role="button" qo'ydingizmi — Tab, Enter va Space ham ishlashi shart.
4. Ko'rinadigan, fokus oladigan elementni ekran o'quvchidan yashirmang. Ya'ni aria-hidden="true" yoki role="presentation" ni tugma va havolaga qo'ymang. 7-bo'limda ko'ramiz.
5. Har interaktiv elementning nomi bo'lsin. Accessibility daraxti darsidagi accessible name.

3.3 "ARIA yo'q — ARIA noto'g'ridan yaxshi"

Dasturchilar orasida mashhur ibora bor: "No ARIA is better than bad ARIA" — "ARIA'siz sahifa noto'g'ri ARIA'li sahifadan yaxshi". WebAIM har yili million bosh sahifani tekshiradi (WebAIM Million). U yerda ARIA ishlatilgan sahifalarda aniqlangan xatolar ishlatilmaganlarga qaraganda o'rtacha taxminan ikki barobar ko'p chiqqan.

Bu ARIA yomon degani emas. Bu uni tushunmasdan qo'shish yomon degani. ARIA — o'tkir pichoq: oshpaz qo'lida foydali, bola qo'lida xavfli.

Tekshirib ko'ring: Hamkasbingiz <a href="menyu.html" role="button">Menyu</a> yozdi — "chiroyli tugmaga o'xshaydi-ku" deb. Nima deysiz?

4. Rol, holat, xususiyat

4.1 Rollar oilalari

ARIA'da 80 ga yaqin rol bor. Ularni to'rt oilaga bo'lish mumkin:

Ko'p rollarning HTML'da tayyor juftligi bor. Ularga ARIA kerak emas. ARIA rolining haqiqiy kerakli joyi — HTML'da juftligi yo'q vidjetlar: tab, tablist, switch, menu. Jonli hududlarni keyingi darsda ko'ramiz.

4.2 Ortiqcha rol

<!-- ❌ ortiqcha: nav allaqachon navigation -->
<nav role="navigation" aria-label="Asosiy menyu">...</nav>

Bu xato emas, lekin shovqin. html-validate buni ushlaydi:

Redundant role "navigation" on <nav>

Tarjimasi: "nav da ortiqcha navigation roli." Eski maqolalarda bunday kod ko'p uchraydi — bir paytlar eski brauzerlar uchun yozilgan. Bugun kerak emas.

4.3 Holat va xususiyat farqi

aria-* atributlari ikki turga bo'linadi:

• Holat (state) — tez-tez o'zgaradi: aria-expanded, aria-pressed, aria-checked, aria-invalid.
• Xususiyat (property) — odatda o'zgarmaydi: aria-label, aria-labelledby, aria-describedby, aria-controls.

Amalda farqi bitta: holat o'zgarganda atributni ham yangilash kerak. Native elementlarda buni brauzer qiladi. ARIA'da — siz, JavaScript bilan.

5. Nom va tavsif: uch atribut

5.1 Uchalasi yonma-yon

Bu atributlarning har birini alohida ko'rgansiz. Endi ularni solishtiramiz:

5.2 Qaysi birini tanlash

Tanlash tartibi — bitta savol: "Ekranda shu nom yozilganmi?"

1. Ha, elementning ichida — hech narsa kerak emas. Matn o'zi nom.
2. Ha, lekin boshqa joyda (sarlavhada) — aria-labelledby.
3. Yo'q, ekranda matn yo'q — aria-label.
4. Nom bor, lekin qo'shimcha yordam kerak — aria-describedby.

«Bahor» saytidan misollar:

<!-- 1: matn ichida — ARIA kerak emas -->
<button type="button">Savatga qo'shish</button>

<!-- 2: nom sarlavhada turibdi -->
<section aria-labelledby="aksiya-sarlavha">
  <h2 id="aksiya-sarlavha">Juma aksiyasi</h2>
  <p>Har juma osh 30 000 so'm.</p>
</section>

<!-- 3: faqat ikonka, matn yo'q -->
<button type="button" aria-label="Savatni ko'rish">
  <svg aria-hidden="true" width="20" height="20"></svg>
</button>

<!-- 4: nom + qo'shimcha yordam -->
<button type="button" aria-describedby="xona-izoh">
  Alohida xona
</button>
<p id="xona-izoh">8 kishidan boshlab.</p>

2-misolga qarang. article, section yoki div darsida nomli section daraxtda alohida hudud (region) bo'lishini aytib, usulini shu darsga qoldirgan edik. Mana u: aria-labelledby. Chrome'da tekshirdik: nomli section — "region" roli bilan "Juma aksiyasi". Nomsiz section esa oddiy "generic".

5.3 aria-labelledby ning ikki imkoniyati

Bir nechta id. Nomni bir necha bo'lakdan yig'ish mumkin. Masalan, menyuda har taom yonida "Savatga" tugmasi bor. Ekran o'quvchida o'nta bir xil "Savatga, tugma" chalkashtiradi:

<h3 id="taom-osh">Osh</h3>
<button type="button" id="savat-osh"
        aria-labelledby="savat-osh taom-osh">Savatga</button>

Nom: "Savatga Osh". Tugma o'z id sini ham ko'rsatdi — shunda uning matni ham nomga kirdi. Ekranda esa oddiy "Savatga" qoladi. Ko'rinadigan so'z nomning boshida — Accessibility daraxti darsidagi "Label in Name" qoidasi ham buzilmadi.

Yashirin elementni ko'rsatish. aria-labelledby hidden atributli elementning matnini ham oladi. Tekshirdik: hidden paragrafga ishora qilgan tugmaning nomi o'sha paragraf matni bo'ldi. Bu kam kerak bo'ladi, lekin bilib qo'ying.

5.4 aria-label ning cheklovlari

• Hamma elementda ishlamaydi. div va span kabi rolsiz elementlarga nom berish ARIA qoidalarida taqiqlangan. Chrome nomni hisoblasa ham, ko'p ekran o'quvchilar uni o'qimaydi. html-validate: "aria-label" cannot be used on this element. Nom faqat tugma, havola, maydon, landmark kabi rollarga beriladi.
• Ekranda ko'rinmaydi. Ko'radigan odam va ekran o'quvchi foydalanuvchisi har xil narsa olishi mumkin.
• Avtomatik tarjima ko'pincha o'tkazib yuboradi. Sahifani brauzer tarjimoni bilan rus tiliga o'girsangiz, ekrandagi matn tarjima bo'ladi, aria-label esa ko'pincha o'zbekcha qoladi.

Shuning uchun qoida: ko'rinadigan matn — eng yaxshi nom. aria-label — ekranda matn umuman bo'lmaganda.

Tekshirib ko'ring: Uch holatda qaysi atributni tanlaysiz?

(a) Qidiruv maydoni, yonida faqat lupa ikonkali tugma.

(b) "Mehmonlar soni" maydoni, ostida "20 dan ko'p bo'lsa, qo'ng'iroq qiling" yozuvi.

(c) nav, uning ustida "Taomlar bo'limlari" sarlavhasi turibdi.

6. Holat atributlari

6.1 aria-expanded va aria-controls

Telefonda «Bahor» saytining menyusi "Menyu" tugmasi ortida yashiringan. Tugma bosilsa, ro'yxat ochiladi. Ekran o'quvchi foydalanuvchisi ro'yxat ochiq yoki yopiqligini qanday biladi?

aria-expanded — "bu tugma boshqaradigan narsa hozir ochiqmi?" degan holat. Qiymati "true" yoki "false". Ekran o'quvchi "Menyu, tugma, yopiq" yoki "... ochiq" deydi.

aria-controls — tugma qaysi elementni boshqarishini id bilan ko'rsatadi.

Qo'lda yozilgan versiya:

<button type="button" aria-expanded="false"
        aria-controls="asosiy-menyu">Menyu</button>
<ul id="asosiy-menyu" hidden>
  <li><a href="menyu.html">Taomlar</a></li>
  <li><a href="aloqa.html">Aloqa</a></li>
</ul>

Muammo: tugma bosilganda hidden ni olib tashlash va aria-expanded ni "true" ga o'zgartirish kerak. Bu — JavaScript ishi. Unutilsa, ekran o'quvchi ochiq menyuni "yopiq" deb aytaveradi.

6.2 Native yo'l: popover o'zi qiladi

Endi Popover API darsidagi usul:

<button type="button" popovertarget="asosiy-menyu">
  Menyu
</button>
<ul id="asosiy-menyu" popover>
  <li><a href="menyu.html">Taomlar</a></li>
  <li><a href="aloqa.html">Aloqa</a></li>
</ul>

Chrome'da tekshirdik. Sahifa ochilganda tugma daraxtda expanded: false. Tugma bosilgach — expanded: true. Biz bironta aria- atributi yozmadik: brauzer holatni o'zi qo'ydi va o'zi yangiladi. details va summary da ham xuddi shunday — summary ochilganda "ochiq" deb e'lon qilinadi.

Bu — birinchi qoidaning jonli isboti. Native element holatni ham bepul kuzatadi.

Maslahat: aria-controls ni ekran o'quvchilarning ko'pi deyarli ishlatmaydi. Yozsangiz zarari yo'q, lekin uning ustiga hech narsa qurmang. Asosiy ish aria-expanded da.

6.3 aria-current: "siz shu yerdasiz"

Ko'p sahifali sayt darsida menyuda joriy sahifani belgilagan edik:

<a href="menyu.html" aria-current="page">Menyu</a>

Ekran o'quvchi "Menyu, havola, joriy sahifa" deydi. Qiymatlari:

Masalan, uch bosqichli buyurtmada: "1. Savat → 2. Manzil → 3. To'lov". Hozirgi qadamga aria-current="step" beriladi.

6.4 aria-pressed: bosilgan tugma

Buyurtma sahifasida "Achchiq qo'shilsin" tugmasi bor. U ikki holatli: bosilgan yoki bosilmagan. Bunday tugmaga toggle tugma (toggle button) deyiladi:

<button type="button" aria-pressed="false">
  Achchiq qo'shilsin
</button>

Ekran o'quvchi "Achchiq qo'shilsin, almashtirish tugmasi, bosilmagan" deydi. Bosilganda JavaScript "true" ga o'zgartiradi.

Muhim qoida: tugma matni holat bilan o'zgarmasin. "Achchiq qo'shilsin" bosilganda "Achchiq qo'shilmasin" ga aylansa, ekran o'quvchi "Achchiq qo'shilmasin, bosilgan" deydi — ikki inkor, hech kim tushunmaydi. Matn — nima, aria-pressed — holat.

6.5 switch, aria-disabled va boshqalar

• role="switch" + aria-checked — o'chirgich. Zamonaviy forma darsida switch atributi hozircha faqat Safari'da ekanini ko'rgan edik. Boshqa brauzerlarda o'chirgich shu rol bilan yasaladi. Uni Forma komponentlari darsida quramiz.
• aria-disabled="true" — disabled ga o'xshaydi, lekin element fokus olishda davom etadi. Tekshirdik: Chrome uni "disabled" deb ko'rsatdi, lekin "focusable" saqlandi. Klaviaturadagi odam tugmaga yetib boradi va "mavjud emas" eshitadi. Buning evaziga tugma bosilganda hech narsa qilmasligini JavaScript ta'minlaydi.
• aria-invalid va aria-required — Qulay forma darsidan. Native maydonda required yetarli; aria-required faqat ARIA bilan yasalgan maydonga.

Tekshirib ko'ring: Nega details/summary yoki popover bilan yasalgan menyu aria-expanded bilan qo'lda yasalgandan ishonchliroq?

7. aria-hidden tuzoqlari

7.1 Nima qiladi

aria-hidden="true" elementni va uning ichidagi hamma narsani accessibility daraxtidan olib tashlaydi. Ekranda esa u ko'rinib turadi. Bezak ikonkalar uchun bu ajoyib: ekran o'quvchi "yulduzcha", "strelka" kabi keraksiz narsalarni o'qimaydi.

7.2 1-tuzoq: ichida fokus oladigan element

<!-- ❌ tugma ekran o'quvchidan yashirin, Tab'dan emas -->
<div aria-hidden="true">
  <button type="button">Aksiyani yopish</button>
</div>

Chrome'da tekshirdik: tugma daraxtdan chiqib ketdi, lekin Tab unga baribir yetib bordi. Ekran o'quvchi foydalanuvchisi uchun fokus "hech narsa"ga tushdi — ekran o'quvchi jim qoladi yoki "bo'sh" deydi. Bunga arvoh fokus (ghost focus) deyishadi. Bu 4-qoidani buzadi.

html-validate buni ushlaydi:

aria-hidden cannot be used on focusable elements (hidden by ancestor element)

Tarjimasi: "aria-hidden ni fokus oladigan elementlarga ishlatib bo'lmaydi (ajdod element orqali yashirilgan)." Ya'ni atribut tugmaning o'zida emas, uning ota elementida — lekin baribir ta'sir qiladi.

7.3 2-tuzoq: aria-hidden="false" hech narsani ochmaydi

<!-- ❌ baribir yashirin -->
<p hidden aria-hidden="false">Bugun osh yo'q</p>

hidden element hamma uchun yashirin. aria-hidden="false" uni qaytarmaydi — tekshirdik, element daraxtda yo'q. Bu qiymat deyarli hech qachon kerak emas. Yashirmoqchi bo'lmasangiz — atributni butunlay olib tashlang.

7.4 3-tuzoq: modal ochilganda sahifani yashirish

Eski darsliklarda modal ochilganda butun sahifaga aria-hidden="true" qo'yish o'rgatiladi. Lekin bu faqat ekran o'quvchidan yashiradi — Tab orqadagi havolalarga baribir o'tadi. To'g'risi — inert (Global atributlar) yoki umuman dialog bilan showModal. O'tgan darsda ko'rdik: u orqa fonni o'zi inert qiladi.

7.5 To'rt usul — bitta jadval

korinmas klassni label darsida ko'rgan edik: faqat ko'zdan yashirib, ekran o'quvchiga qoldiradi. inert ni ham tekshirdik: ichidagi tugma daraxtdan chiqdi va fokus olmadi.

Qaysi birini tanlash — bitta savol: "Kimdan yashirmoqchiman?" Hammadan — hidden. Faqat ekran o'quvchidan, bezak bo'lgani uchun — aria-hidden. Hozircha ishlamaydigan qismni — inert. Faqat ko'zdan — korinmas klass.

8. Ko'p uchraydigan xatolar

8.1 Rol bor, klaviatura yo'q

<div role="button"> — daraxtda tugma, Tab va Enter da hech narsa. Tuzatish: button.

8.2 ARIA native holat bilan to'qnashadi

<!-- ❌ ikki xil holat: native — yo'q, ARIA — "belgilangan" -->
<input type="checkbox" id="sms" aria-checked="true">
<label for="sms">SMS eslatma</label>

Native elementning holatini brauzer biladi. Ustiga ARIA yozish ikki xil haqiqat yaratadi. Chrome'da tekshirdik: u aria-checked ni e'tiborsiz qoldirib, "belgilanmagan" dedi. Lekin boshqa brauzer yoki ekran o'quvchi boshqacha qaror qilishi mumkin — bunga tayanib bo'lmaydi. Tuzatish: native elementda checked, disabled, required ishlating — aria-checked, aria-disabled, aria-required emas.

8.3 aria-label rolsiz elementda

<span aria-label="Narx">35 000</span> — ko'p ekran o'quvchilar o'qimaydi. Tuzatish: matnni ko'rinadigan qiling: <span>Narx: 35 000 so'm</span>.

8.4 Holat yangilanmaydi

aria-expanded="false" yozilgan, menyu ochilganda ham "false" qoldi. Tuzatish: mumkin bo'lsa — popover yoki details. Bo'lmasa — holatni JavaScript'da albatta yangilash (Dinamik UI'da qulaylik).

8.5 id xato yozilgan

aria-labelledby="aksiya_sarlavha", sarlavhada esa id="aksiya-sarlavha". Nom bo'sh qoladi, brauzer xato bermaydi. Tuzatish: DevTools'da Name qatorini tekshiring; html-validate ham ko'p hollarda ushlaydi.

9. Mashqlar

1-mashq (oson): Qaysi ARIA ortiqcha?

Har qatorda ARIA kerakmi yoki ortiqchami? Ortiqcha bo'lsa — nega.

<!-- ❌ ba'zi qatorlarda ARIA ortiqcha -->
<button type="button" role="button">Band qilish</button>
<main role="main">...</main>
<a href="menyu.html" aria-current="page">Menyu</a>
<svg aria-hidden="true" width="16" height="16"></svg>
<input type="checkbox" id="rozi" aria-checked="false">

2-mashq (o'rta): To'g'ri atributni tanlang

Bo'sh joylarni to'ldiring:

<!-- a) sarlavhadan nom oladigan bo'lim -->
<section ____="bron-sarlavha">
  <h2 id="bron-sarlavha">Stol band qilish</h2>
</section>

<!-- b) faqat × belgili yopish tugmasi -->
<button type="button" ____="Yopish">×</button>

<!-- c) telefon maydoni va uning yo'riqnomasi -->
<input id="tel" type="tel" ____="tel-yordam">
<p id="tel-yordam">Masalan: +998 90 000 00 00</p>

a) [:aria-labelledby] b) [:aria-label] c)

3-mashq (qiyin): "Soxta" menyuni tuzating

Oldingi dasturchi «Bahor» saytiga shunday menyu yozib ketgan. Unda 5 ta muammo bor. Ularni toping va faqat HTML bilan (JavaScript'siz) to'g'ri versiyasini yozing.

<!-- ❌ 5 ta muammo -->
<div role="button" aria-expanded="true">Menyu</div>
<div id="menyu-royxat" aria-hidden="true">
  <a href="menyu.html">Taomlar</a>
  <a href="aloqa.html">Aloqa</a>
</div>
<span aria-label="Savatda 3 ta taom">🛒 3</span>

Eslatma: ochiladigan ro'yxat uchun popovertarget va popover (Popover API); havolalar ro'yxati — ul va li (Ro'yxatlar).

<button type="button" popovertarget="menyu-royxat">
  Menyu
</button>
<ul id="menyu-royxat" popover>
  <li><a href="menyu.html">Taomlar</a></li>
  <li><a href="aloqa.html">Aloqa</a></li>
</ul>
<a href="savat.html">
  <span aria-hidden="true">🛒</span> Savat: 3 ta taom
</a>

10. Real ishda

• Komponent kutubxonalari. React loyihalarida Radix UI, React Aria, Headless UI kabi kutubxonalar (kursda alohida o'rganamiz) murakkab vidjetlarning ARIA va klaviatura qismini tayyor beradi. Ular ichida aynan shu darsdagi aria-expanded, aria-controls, aria-pressed turadi. Kutubxonani to'g'ri ishlatish uchun ham ARIA'ni tushunish kerak.
• Kod review. Tajribali dasturchi pull request'da role="button" ko'rsa, birinchi savoli: "Nega button emas?". Bu savolga javobingiz tayyor bo'lsin.
• Avtomatik tekshiruv. html-validate, axe va Lighthouse ortiqcha rol, arvoh fokus va nomsiz elementlarni ushlaydi. Lekin "holat yangilanmaydi" kabi xatolarni faqat qo'lda tekshiruv topadi — Accessibility'ni tekshirish darsida.
• Intervyuda so'raladi: "ARIA'ning birinchi qoidasi nima?", "aria-hidden va hidden farqi?", "aria-label va aria-labelledby qachon ishlatiladi?". Uchalasiga ham bu dars javob beradi.

Xulosa

• ARIA (role va aria-*) faqat accessibility daraxtini o'zgartiradi: ko'rinish ham, klaviatura ham o'zgarmaydi.
• Birinchi qoida: native element bo'lsa — uni ishlating; ARIA — HTML'da juftligi yo'q narsalar uchun.
• Nom: ekranda matn bor — aria-labelledby, yo'q — aria-label; qo'shimcha yordam — aria-describedby.
• Holatlar: aria-expanded, aria-current, aria-pressed; native popover va details holatni o'zi yangilaydi.
• aria-hidden="true" faqat bezak uchun; ichida fokus oladigan element bo'lmasin; modal uchun inert yoki dialog.
• "No ARIA is better than bad ARIA" — tushunmay qo'shilgan ARIA foydalanuvchini aldaydi.

Keyingi dars: Jonli hududlar va dinamik kontent — sahifada fokus o'zgarmasdan paydo bo'lgan xabarni ekran o'quvchi qanday aytishi mumkin.

Manbalar

• W3C: "Using ARIA" (ARIA'ning 5 qoidasi), "WAI-ARIA 1.2", "ARIA in HTML" — w3.org
• MDN: "ARIA", "aria-expanded", "aria-hidden", "aria-current" — developer.mozilla.org
• WebAIM: "The WebAIM Million" (yillik hisobot) — webaim.org
• html-validate qoidalari: prefer-native-element, hidden-focusable, no-redundant-role, aria-label-misuse — html-validate.org