Accessibility daraxti: ekran o'quvchi ko'radigan rol, nom va holat

Qisqacha: Ekran o'quvchi sahifani piksellardan ham, DOM'dan ham emas, brauzer DOM'dan qurgan accessibility daraxtidan o'qiydi. Unda har element uchun to'rtta ma'lumot bor: rol (bu nima), nom (qaysi biri), holat (hozir qanday) va tavsif (qo'shimcha izoh). Nom qat'iy tartibda hisoblanadi: aria-labelledby > aria-label > label yoki alt > ichidagi matn > title. Buni Chrome DevTools'ning Accessibility panelida ko'rish mumkin.

Bu darsda

• Accessibility daraxti nima ekanini va u DOM'dan qanday farq qilishini tushuntira olasiz.
• Har elementning roli, nomi, holati va tavsifini aniqlay olasiz.
• Nom hisoblash tartibini bilib, ekran o'quvchi nima deyishini oldindan ayta olasiz.
• Chrome DevTools'da Accessibility panelini ochib, xatoli elementni topasiz.

Oldin bilishingiz kerak: Accessibility nima va u kim uchun, label: har maydonning nomi, Sahifa landmarklari, Chrome DevTools I: Elements va Console.

1. Nega bu kerak?

O'tgan darsda accessibility kim uchun kerakligini va ekran o'quvchi nima ekanini ko'rdik. Endi bitta savolga javob beramiz: ekran o'quvchi sahifani qanday "ko'radi"?

«Bahor» choyxonasining menyu sahifasida ikkita tugma bor. Ko'zi ko'radigan mehmon uchun ular bir xil: yashil fon, "Savatga" yozuvi. Lekin ko'zi ojiz doimiy mehmonimiz Malika (o'tgan darsdan tanishsiz) kompyuterda NVDA dasturi bilan ishlaydi. U birinchisida "Savatga, tugma" deb eshitadi. Ikkinchisida esa faqat "Savatga" — oddiy matn. Uni bosib ham bo'lmaydi.

Nega bunday bo'ldi? Chunki birinchisi <button>, ikkinchisi esa <div>. Ko'zga farq ko'rinmaydi, lekin brauzer ular haqida butunlay boshqa ma'lumot beradi. Bu ma'lumot saqlanadigan joy — accessibility daraxti. Uni tushunsangiz, "ekran o'quvchi bu yerda nima deydi?" degan savolga taxmin bilan emas, aniq javob berasiz.

2. Accessibility daraxti nima

2.1 Uchinchi daraxt

HTML'dan pikselgacha darsida brauzer HTML'dan DOM daraxtini qurishini ko'rgan edik. Undan keyin brauzer yana bitta daraxt quradi.

Accessibility daraxti (accessibility tree) — DOM'ning yordamchi texnologiyalar uchun soddalashtirilgan nusxasi. Unda faqat ma'noli narsalar qoladi: tugmalar, havolalar, sarlavhalar, maydonlar, matn.

Choyxonadagi ofitsiantlarni tasavvur qiling. Har birining ko'kragida bejik (nishon) bor: "Otabek — ofitsiant". Mehmon ofitsiantning kiyimiga yoki soch turmagiga qaramaydi, bejikni o'qiydi. Accessibility daraxti — sahifadagi har bir elementning bejiklari to'plami. Ekran o'quvchi aynan shu bejiklarni o'qiydi.

Yo'l shunday:

3-qadamdagi "eshik" — accessibility API deyiladi. Windows'da u UI Automation, macOS va iPhone'da NSAccessibility, Android'da esa o'zining accessibility xizmati. Bu nomlarni yodlash shart emas. Muhimi: ekran o'quvchi sahifaning HTML kodini o'qimaydi, u faqat brauzer bergan tayyor daraxtni oladi.

2.2 DOM bilan farqi

Accessibility daraxti DOM'dan kichikroq. Brauzer undan ko'p narsani olib tashlaydi:

Bo'sh joyni to'ldiring: ekran o'quvchi sahifani DOM'dan emas, brauzer qurgan daraxtidan o'qiydi.

Tekshirib ko'ring: Nega brauzer alt="" li rasmni daraxtdan butunlay olib tashlaydi?

3. Har elementning to'rt xususiyati

Daraxtdagi har bir tugunda (element) to'rtta asosiy ma'lumot bor. Ofitsiant bejigiga qaytamiz:

Ekran o'quvchi ularni birlashtirib gapiradi. Masalan: "Stolni band qilish, tugma, mavjud emas". Keling, har birini alohida ko'ramiz.

3.1 Rol: bu nima?

Rol (role) — elementning vazifasi: tugma, havola, sarlavha, maydon. Rol ikki narsani belgilaydi. Birinchisi — ekran o'quvchi nima deb e'lon qiladi. Ikkinchisi — foydalanuvchi qanday tugmalar bilan boshqarishini kutadi.

HTML teglarining ko'pida rol o'z-o'zidan bor. Bunga yashirin rol (implicit role) deyiladi. Chrome'da tekshirib ko'rdik:

href siz a ga e'tibor bering. Havola asoslari darsida href siz havola bosilmasligini ko'rgan edik. Daraxtda ham u havola emas — oddiy quti. Ekran o'quvchi uni "havola" demaydi.

Roli "generic" bo'lgan element ekran o'quvchi uchun deyarli ko'rinmas. Uning ichidagi matn o'qiladi, lekin elementning o'zi haqida hech narsa aytilmaydi. Malikaning "Savatga" deb eshitib, uni bosa olmagani shundan.

3.2 Nom: qaysi biri?

Sahifada o'nta tugma bo'lsa, hammasi "tugma". Ularni nom farqlaydi.

Accessible name (foydalanish uchun nom) — brauzer har bir element uchun hisoblaydigan qisqa nom. label darsida bu tushuncha bilan tanishgan edik. Ekran o'quvchi uni roldan oldin yoki keyin aytadi. Ovoz bilan boshqaradigan odam ham shu nomni aytadi: "Stolni band qilish'ni bos".

Nom har xil manbadan olinadi: tugma ichidagi matn, label, alt, aria-label. Manbalar bir nechta bo'lsa, qaysi biri g'olib chiqadi? Bu — 4-bo'limning mavzusi.

3.3 Holat: hozir qanday?

Holat (state) — vaqt o'tishi bilan o'zgarishi mumkin bo'lgan ma'lumot. Masalan:

Oddiy HTML elementlarida holatni brauzer o'zi kuzatadi. Mehmon checkbox'ni bossa, daraxtdagi checked ham o'zi o'zgaradi. details ni ochsa — expanded o'zgaradi. Sizdan hech narsa talab qilinmaydi.

Holatlardan tashqari o'zgarmas xususiyatlar (properties) ham bor. Masalan, sarlavhaning darajasi (h2 — 2-daraja) yoki havolaning manzili. Ekran o'quvchi "Menyu, sarlavha, 2-daraja" deganda o'sha daraja xususiyatini o'qiyapti.

3.4 Tavsif: yana nima bilish kerak?

Tavsif (description) — nomdan keyin, biroz pauza bilan o'qiladigan qo'shimcha matn. Qulay va accessible forma darsida uni aria-describedby bilan bergan edik:

<label for="telefon">Telefon raqamingiz</label>
<span id="telefon-yordam">Masalan: +998 90 000 00 00</span>
<input id="telefon" name="telefon" type="tel"
       aria-describedby="telefon-yordam">

Daraxtda bu maydon shunday ko'rinadi:

textbox  nom: "Telefon raqamingiz"
         tavsif: "Masalan: +998 90 000 00 00"

Nom — qisqa va aniq. Tavsif — uzunroq yordam. Ikkalasini aralashtirmang: nomi paragrafdek uzun tugma ekran o'quvchida charchatadi.

Tekshirib ko'ring: <h2>Bugungi menyu</h2> ning roli, nomi va xususiyati nima?

4. Nom qanday hisoblanadi

4.1 Tartib

Brauzer nomni topish uchun manbalarni qat'iy tartibda tekshiradi. Birinchi topilgani g'olib, qolganlari e'tiborga olinmaydi. Buni rasmiy hujjat belgilaydi — Accessible Name and Description Computation (qisqasi AccName).

Ya'ni aria- bilan boshlanadigan ikki atribut har doim eng kuchli. Ular HTML'dagi hamma narsani "ustidan yozib" yuboradi. Bu ham kuch, ham xavf — ARIA asoslari darsida qaytamiz.

Bo'sh joyni to'ldiring: tugmada aria-label ham, ichki matn ham bo'lsa, nom dan olinadi.

4.2 Chrome'da tekshirdik

Quyidagi tugmalarning har biri Chrome'da tekshirildi. O'ng ustun — brauzer hisoblagan nom:

<h2 id="bron-sarlavha">Stol band qilish</h2>

<!-- 1: faqat matn -->
<button type="button">Savatga qo'shish</button>

<!-- 2: aria-label matndan kuchli -->
<button type="button"
        aria-label="Oshni savatga qo'shish">Qo'shish</button>

<!-- 3: aria-labelledby hammasidan kuchli -->
<button type="button" aria-labelledby="bron-sarlavha"
        aria-label="X">Y</button>

3-tugmada "X" ham, "Y" ham yo'qoldi. DevTools ularni "superseded" (ustidan yozilgan) deb ko'rsatadi.

4.3 Maydonlarda nom

Maydonlarda (input, select, textarea) ichki matn bo'lmaydi. Shuning uchun 4-navbat o'tkazib yuboriladi:

<label for="ism">Ismingiz</label>
<input id="ism" name="ism" type="text">

<label for="tel">Telefon</label>
<input id="tel" name="tel" type="tel" aria-label="Mobil raqam">

<input name="izoh" type="text" title="Qo'shimcha istak">

<input name="q" type="text" placeholder="Qidirish">

Ikkinchi maydonga qarang: ekranda "Telefon" yozilgan, ekran o'quvchi esa "Mobil raqam" deydi. Ko'radigan va eshitadigan odam har xil narsani oladi. Bu — xato, 7-bo'limda qaytamiz.

Chrome placeholder ni ham nom qiladi, lekin faqat boshqa hech narsa yo'q bo'lganda. Ammo label darsidagi qoida o'zgarmaydi: placeholder yozish boshlanishi bilan yo'qoladi. U label o'rnini bosmaydi.

4.4 Kontentdan nom: ichidagi hamma narsa

Tugma yoki havola nomini ichidagi matndan olsa, ichki elementlarni ham hisobga oladi:

<a href="osh.html">
  <img src="osh.jpg" alt="Osh haqida batafsil">
</a>

Havolada matn yo'q, lekin nomi bor: "Osh haqida batafsil". Brauzer rasmning alt ini oldi. Shuning uchun Alt matn darsida havola ichidagi rasmning alt i "qayerga olib boradi"ni aytishi kerak degan edik.

Teskari holat ham bor. Ichidagi element daraxtdan yashirilgan bo'lsa, nomga ham qo'shilmaydi:

<!-- ❌ nomsiz tugma -->
<button type="button">
  <svg aria-hidden="true" width="20" height="20">
    <use href="#savat"></use>
  </svg>
</button>

Bu tugmaning nomi — bo'sh satr "". Ikonka aria-hidden, boshqa matn yo'q. Ekran o'quvchi faqat "tugma" deydi. SVG darsida bunday tugmaga aria-label qo'shgan edik — endi nima uchunligini aniq bilasiz.

4.5 Hamma rol ham kontentdan nom olmaydi

nav, main, div kabi elementlar ichidagi matndan nom olmaydi. Aks holda butun menyu matni navigatsiyaning nomi bo'lib qolardi. Tekshirdik: ichida matni bor nav ning nomi — bo'sh.

Shuning uchun Sahifa landmarklari darsida nav ga aria-label="Asosiy menyu" qo'shgan edik. Maydonlarda ham shunday: ularning nomi faqat label yoki ARIA atributidan keladi.

Tekshirib ko'ring: Bu havolaning nomi nima bo'ladi?

html

<a href="menyu.html" title="Menyu sahifasi">Menyu</a>

5. title — ishonchsiz manba

title jadvalda oxirgi o'rinda turibdi. Global atributlar darsida uning cheklovlarini ko'rgan edik. Accessibility nuqtayi nazaridan ular shunday:

• Telefonda title umuman ko'rinmaydi — sichqoncha yo'q, "ustiga olib borish" ham yo'q.
• Klaviatura bilan ishlaganda ham ko'rinmaydi.
• Ekran o'quvchilar uni har xil o'qiydi: biri nom deb, biri tavsif deb, biri umuman o'qimaydi.

Shuning uchun title ni yagona nom manbai qilmang. Ikonkali tugmaga title="Qidirish" emas, aria-label="Qidirish" qo'ying.

6. Chrome DevTools: Accessibility paneli

6.1 Panelni ochish

Nazariya yetarli — endi daraxtni o'z ko'zingiz bilan ko'ramiz. «Bahor» sahifangizni Chrome'da oching:

1. Tekshirmoqchi bo'lgan tugma ustida o'ng tugmani bosing → Inspect (Tekshirish).
2. Elements panelining o'ng tomonida Styles, Computed kabi yorliqlar bor. Ular orasidan Accessibility ni tanlang. Ko'rinmasa, » belgisini bosing.

Panelda uchta asosiy bo'lim bor:

Eng muhimi — Computed Properties. Unda Name yonida kichik uchburchak bor. Uni ochsangiz, brauzer tekshirgan hamma manbalar ro'yxati chiqadi: aria-labelledby, aria-label, From label, Contents, Title. G'olib manba ajralib turadi, qolganlari chizilgan yoki "Not specified" (ko'rsatilmagan) deb yoziladi.

Aynan shu ro'yxat 4-bo'limdagi jadvalning jonli ko'rinishi.

6.2 Tezkor usul: Inspect oynachasi

Yana bir tez yo'l bor. DevTools ochiq turganda Ctrl + Shift + C bosing (macOS'da Cmd + Shift + C) va sichqonchani element ustiga olib boring. Chiqqan oynachaning pastida ACCESSIBILITY bo'limi bor:

ACCESSIBILITY
Name              Savatga qo'shish
Role              button
Keyboard-focusable  ✓

"Keyboard-focusable" — element klaviatura bilan fokus oladimi. div dan yasalgan "tugma"da bu belgi bo'lmaydi. Buni keyingi darsda batafsil ko'ramiz.

6.3 Butun sahifa daraxti

Accessibility panelining tepasida Enable full-page accessibility tree (butun sahifa daraxtini yoqish) degan belgi bor. Uni yoqing va DevTools taklif qilganda qayta yuklang.

Endi Elements panelining yuqori o'ng burchagida odamcha belgili tugma paydo bo'ladi. Uni bossangiz, DOM o'rniga butun accessibility daraxti chiqadi:

RootWebArea "Menyu — Choyxona «Bahor»"
  banner
    navigation "Asosiy menyu"
      link "Bosh sahifa"
      link "Menyu"
  main
    heading "Bugungi menyu"
    button "Savatga qo'shish"
    StaticText "Savatga"

Oxirgi ikki qatorga qarang. Birinchisi — haqiqiy tugma. Ikkinchisi — div: daraxtda undan faqat matn qolgan. Malikaning muammosi shu yerda aniq ko'rinadi.

Shu tugmani yana bir marta bossangiz, oddiy DOM ko'rinishiga qaytasiz.

Maslahat: Daraxtni ekran o'quvchining "ko'zi" deb qabul qiling. Yangi sahifa yasaganingizda bir marta shu ko'rinishga o'ting va yuqoridan pastga o'qing. Nomi bo'sh tugma, "generic" bo'lib qolgan "havola" yoki nomsiz maydon darhol ko'zga tashlanadi.

Tekshirib ko'ring: DevTools'da tugmaning Name qatori bo'sh, manbalar ro'yxatida hammasi "Not specified". Bu nimani anglatadi va qanday tuzatiladi?

7. Ko'p uchraydigan xatolar

7.1 div dan yasalgan tugma

<!-- ❌ daraxtda: generic, nomsiz, fokus olmaydi -->
<div class="tugma">Savatga</div>

Ko'zga tugma, daraxtda esa "StaticText" — oddiy matn. Tuzatish: <button type="button">Savatga</button>. Tugma yoki havola darsidagi qoida shu: harakat bo'lsa — button.

7.2 Nomsiz ikonkali tugma

Tugma ichida faqat aria-hidden ikonka bo'lsa, nom bo'sh. Tuzatish: aria-label qo'shing yoki ikonka yoniga matn yozing.

7.3 Ko'rinadigan matn bilan nom mos emas

<!-- ❌ ekranda "Yuborish", nomi esa boshqa -->
<button type="submit"
        aria-label="Buyurtmani tasdiqlash">Yuborish</button>

Ovoz bilan boshqaradigan odam ekrandagi "Yuborish" so'zini aytadi. Dastur esa bunday nomli tugmani topolmaydi. WCAG'da buning uchun alohida mezon bor — 2.5.3 "Label in Name" (nomda ko'rinadigan matn bo'lsin). Tuzatish: aria-label ni olib tashlang yoki ko'rinadigan matn nomning boshida tursin.

7.4 "Nomni ko'ryapman — demak, bor"

Dasturchi ekranda "Telefon" yozuvini ko'radi va maydonning nomi bor deb o'ylaydi. Lekin label ning for i boshqa id ni ko'rsatsa, nom bo'sh. Ko'z aldaydi, DevTools esa aldamaydi. Tuzatish: har maydonni Accessibility panelida tekshiring.

7.5 Nomda rol takrorlanadi

<!-- ❌ ekran o'quvchi: "Savatga qo'shish tugmasi, tugma" -->
<button type="button">Savatga qo'shish tugmasi</button>

Rolni ekran o'quvchi o'zi aytadi. Nomga "tugma", "havola", "rasm" so'zlarini qo'shmang. Rasmning alt ida "Rasm: ..." yozish ham xuddi shu xato.

8. Mashqlar

1-mashq (oson): Rol va nom

Har bir element uchun rol va nomni yozing. Jadvaldagi tartibni eslang: aria-labelledby > aria-label > label/alt > kontent > title.

<button type="button">Menyuni ko'rish</button>
<a href="aloqa.html">Aloqa</a>
<img src="choy.jpg" alt="Ko'k choynakda choy">
<a>Tez orada</a>
<input type="checkbox" id="sms"><label for="sms">SMS</label>

2-mashq (o'rta): Qaysi manba g'olib?

Har bir element uchun nom nima bo'lishini yozing:

<h2 id="aksiya">Juma aksiyasi</h2>

<button type="button" aria-label="Yopish">×</button>

<button type="button" aria-labelledby="aksiya"
        aria-label="Batafsil">Ko'proq</button>

<label for="soni">Mehmonlar</label>
<input id="soni" type="number" title="Necha kishi?">

1-tugma nomi: [:Yopish]. 2-tugma nomi: [:Juma aksiyasi]. Maydon nomi:

3-mashq (qiyin): «Bahor» menyusini DevTools'da tekshiring

Quyidagi kodni menyu-test.html fayliga yozing va Chrome'da oching. Butun sahifa daraxtini yoqing. 4 ta muammoni toping va tuzating.

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <title>Menyu — Choyxona «Bahor»</title>
</head>
<body>
  <!-- ❌ bu sahifada 4 ta muammo bor -->
  <main>
    <h1>Bugungi menyu</h1>
    <img src="osh.jpg" alt="rasm">
    <p>Osh — 35 000 so'm</p>
    <div class="tugma">Savatga</div>
    <button type="button">
      <svg aria-hidden="true" width="20" height="20"></svg>
    </button>
    <label for="izoh">Izoh</label>
    <input id="istak" name="izoh" type="text">
  </main>
</body>
</html>

Eslatma: label ning for i va maydonning id si bir xil bo'lishi kerak (label darsi).

<h1>Bugungi menyu</h1>
<img src="osh.jpg"
     alt="Qozondagi palov, ustida sabzi va go'sht">
<p>Osh — 35 000 so'm</p>
<button type="button">Savatga</button>
<button type="button" aria-label="Savatni ko'rish">
  <svg aria-hidden="true" width="20" height="20"></svg>
</button>
<label for="izoh">Izoh</label>
<input id="izoh" name="izoh" type="text">

9. Real ishda

• Avtomatik testlar. Playwright va Testing Library (kursda alohida o'rganamiz) elementlarni aynan rol va nom bo'yicha qidiradi: "button rolli, nomi 'Stolni band qilish' bo'lgan elementni bos". Nomi bo'sh tugmani test ham topolmaydi. Ya'ni accessibility daraxti — faqat ekran o'quvchi uchun emas, testlar uchun ham asos.
• Frontend intervyusi. "Accessible name qanday hisoblanadi?" va "aria-label bilan aria-labelledby farqi nima?" — ko'p so'raladigan savollar. Tartibni ayta olsangiz, katta ustunlik.
• Audit vositalari. Lighthouse va axe (ularni Accessibility'ni tekshirish darsida ko'ramiz) "Buttons do not have an accessible name" kabi xabarlar beradi. Ularning hammasi shu daraxtga qarab yoziladi.
• Kundalik odat. Tajribali frontend dasturchi yangi komponentni yasagach, DevTools'da Name va Role qatoriga bir qarab oladi. Bu 10 soniya vaqt oladi.

Xulosa

• Ekran o'quvchi DOM'ni emas, brauzer qurgan accessibility daraxtini accessibility API orqali o'qiydi.
• Daraxtdagi har element — rol (nima), nom (qaysi), holat (hozir qanday) va tavsif (qo'shimcha).
• Ko'p teglarda rol o'z-o'zidan bor; div, span va href siz a — "generic".
• Nom tartibi: aria-labelledby > aria-label > label/alt > kontent > title; placeholder — eng oxirida.
• title ga tayanmang; ko'rinadigan matn nomning ichida bo'lsin.
• DevTools'dagi Accessibility paneli va butun sahifa daraxti — ekran o'quvchi ko'radigan manzara.

Keyingi dars: Klaviatura va fokus boshqaruvi — sichqonchasiz foydalanuvchi sahifada qanday yuradi, fokus qayerga tushadi va uni qanday boshqarish kerak.

Manbalar

• W3C: "Accessible Name and Description Computation 1.2" va "HTML Accessibility API Mappings" — w3.org
• MDN: "Accessibility tree" va "Accessible name" (Glossary) — developer.mozilla.org
• Chrome for Developers: "Accessibility features reference" (DevTools) — developer.chrome.com
• web.dev: "The Accessibility Tree" (Learn Accessibility kursi) — web.dev