Accessibility testi: axe, Lighthouse, WAVE, klaviatura va ekran o'quvchi bilan tekshirish

Qisqacha: Accessibility uch qatlamda tekshiriladi. Avtomat vositalar (Lighthouse, axe DevTools, WAVE, html-validate) muammolarning taxminan uchdan biridan yarmigacha qismini bir necha soniyada topadi. Qolganini odam topadi: sichqonchasiz, faqat klaviatura bilan yurish, sahifani 200% kattalashtirish va ekran o'quvchi (NVDA, VoiceOver, TalkBack) bilan real vazifani bajarish. Lighthouse'dagi 100 ball "sayt accessible" degani emas.

Bu darsda

• Avtomat vositalar nimani topishi va nimani topa olmasligini tushuntira olasiz.
• Lighthouse, axe DevTools, WAVE va html-validate bilan sahifani tekshira olasiz.
• Klaviatura va kattalashtirish testini ro'yxat bo'yicha o'tkaza olasiz.
• NVDA, VoiceOver va TalkBack'ning asosiy buyruqlari bilan sahifani sinay olasiz.
• Topilgan muammolarni tushunarli audit hisobotiga yoza olasiz.

Oldin bilishingiz kerak: Kontent accessibility'si, Chrome DevTools II: Network, Application va Lighthouse, HTML'ni formatlash va validatsiya qilish, Klaviatura va fokus boshqaruvi.

1. Nega bu kerak?

O'tgan darsda matn, rang va havolalarni tartibga keltirdik. «Bahor» sayti ishga tushishga tayyor. Jasur aka Lighthouse'ni ishga tushirdi va xursand bo'ldi: "Accessibility — 100! Tayyor!"

Biz bir tajriba qildik. Ataylab yomon sahifa yozdik: rasmning alt i — "rasm", ikki havola ham "bu yerni bosing", tugma — div, klaviatura bilan unga yetib bo'lmaydi. Lighthouse unga ham 100 ball berdi.

Nega? Chunki vosita alt borligini tekshiradi, uning ma'nosini emas. div ga aria-label berilgan — nomi bor, demak "joyida". Unga Tab bilan yetib bo'lmasligini esa dastur bilmaydi.

Shifokor ko'rigini eslang. Qon tahlili ko'p narsani ko'rsatadi, lekin shifokor bemorni o'zi ham ko'radi, eshitadi, savol beradi. Avtomat vosita — qon tahlili. Qo'lda test — shifokor ko'rigi. Ikkalasi ham kerak.

2. Uch qatlam

Turli tadqiqotlarga ko'ra, avtomat vositalar muammolarning taxminan uchdan biridan yarmigacha qismini topadi. Qolgani ma'no va tajriba masalasi: "bu alt rasmni to'g'ri tasvirlaydimi?", "bu tartib mantiqiymi?", "ekran o'quvchi xabarni o'z vaqtida aytdimi?". Bularni faqat odam baholaydi.

To'rtinchi, eng qimmatli qatlam ham bor: haqiqiy foydalanuvchilar — ekran o'quvchi bilan kundalik ishlaydigan odamlar sinovi. Katta loyihalarda shunday sinovlar ham o'tkaziladi.

Tekshirib ko'ring: Rasmning alt i "IMG_2045.jpg". Qaysi qatlam buni topadi?

3. Avtomat vositalar

3.1 html-validate — kod yozayotganda

HTML validatsiya darsida html-validate bilan tanishgan edik. Uning wcag/... qoidalari va bir nechta a11y (accessibility'ning qisqa yozilishi: "a", 11 ta harf, "y") qoidalari bor. Ba'zilari tavsiya etilgan to'plamga kirmaydi — ularni .htmlvalidate.json da yoqing:

{
  "extends": ["html-validate:recommended"],
  "rules": {
    "heading-level": "error",
    "input-missing-label": "error",
    "no-missing-references": "error"
  }
}

• heading-level — sarlavha darajasi sakramasin.
• input-missing-label — har maydonning label i bo'lsin.
• no-missing-references — for, aria-labelledby, aria-controls mavjud id ga ishora qilsin.

Afzalligi — u brauzersiz, VS Code terminalida bir soniyada ishlaydi. Kamchiligi — u faqat HTML'ni ko'radi. CSS'dan keladigan kontrastni, sahifaning haqiqiy ko'rinishini bilmaydi.

3.2 Lighthouse

Lighthouse'ni DevTools II darsida ko'rgansiz. Faqat accessibility uchun:

1. Sahifani oching (Live Server orqali, http://127.0.0.1:5500/...).
2. F12 → Lighthouse paneli.
3. Categories da faqat Accessibility ni qoldiring.
4. Analyze page load tugmasini bosing.

Natijada: 0–100 ball, xatolar ro'yxati, "Additional items to manually check" (qo'lda tekshiring) bo'limi va o'tgan tekshiruvlar. Har xato yonida — qaysi element va qanday tuzatish haqida havola.

Terminaldan ham ishlaydi (kompyuterda Chrome o'rnatilgan bo'lishi kerak):

npx lighthouse http://127.0.0.1:5500/bron.html \
  --only-categories=accessibility --view

--view — hisobotni brauzerda ochadi.

Ikki muhim fakt:

• Lighthouse ichida axe-core ishlaydi — Deque kompaniyasining ochiq kodli tekshiruv dvigateli. Lighthouse uning qoidalaridan bir qismini oladi.
• Ball — tekshiruvlarning og'irlikdagi o'rtachasi. U "muammo qanchalik jiddiy"ni emas, "avtomat tekshiruvlarning qanchasi o'tdi"ni ko'rsatadi. Shuning uchun 100 — boshlanish, tugash emas.

3.3 axe DevTools

axe DevTools — Deque'ning bepul brauzer kengaytmasi (Chrome, Edge, Firefox). O'rnatgach, DevTools'da yangi axe DevTools yorlig'i paydo bo'ladi. U yerda sahifani to'liq skanerlash tugmasini bosasiz.

Lighthouse'dan farqi:

• axe'ning to'liq qoidalar to'plami ishlaydi va natija batafsilroq.
• Har muammo jiddiylik darajasi bilan: critical (jiddiy to'siq), serious, moderate, minor.
• Highlight — muammoli elementni sahifada ko'rsatadi, Inspect — Elements panelida ochadi.
• Needs review — dastur ishonchi komil bo'lmagan joylar. axe'ning tamoyili: noto'g'ri signal bermaslik. Aniq bo'lmasa, xato demaydi, "odam tekshirsin" deydi.

Kengaytmaning pullik versiyasida bosqichma-bosqich qo'lda testlar ham bor. Bepul versiya boshlash uchun yetarli. axe-core'ni avtomatik testlarga ulashni Accessibility testlari darsida ko'ramiz.

3.4 WAVE

WAVE — WebAIM tashkilotining vositasi: wave.webaim.org saytida yoki kengaytma sifatida. U natijani sahifaning ustiga ikonkalar bilan chizadi:

Yashil ikonkalar ham foydali: ular sizga ekran o'quvchi nimani "ko'rishini" ko'rsatadi. Masalan, rasm ustidagi yashil belgi uning alt matnini ko'rsatadi — uni o'qib, mazmunini baholaysiz.

WAVE'da yana bir kuchli tugma — Styles: Off. U sahifani CSS'siz ko'rsatadi. Ekran o'quvchi sahifani aynan shu tartibda o'qiydi. Tartib chalkash bo'lsa — HTML tartibini tuzating.

Maslahat: Vositalar asosan ingliz tili uchun yaratilgan. WAVE "click here" ni shubhali havola deb biladi, lekin "bu yerni bosing" ni bilmasligi mumkin. O'zbekcha kontent sifatini baribir o'zingiz o'qib tekshirasiz.

3.5 Brauzerning o'zidagi vositalar

• Chrome → Elements → Accessibility — element roli, nomi va holati (Accessibility daraxti darsida ko'rgandik).
• Chrome → Rendering paneli (Ctrl + Shift + P → "Rendering") → Emulate vision deficiencies — sahifani xira ko'rish, past kontrast yoki rang ajratmaslik (protanopiya, deyteranopiya, tritanopiya, akromatopsiya) holatida ko'rsatadi. "Qizil — chegirma" kabi xatolar shu yerda darhol ko'rinadi.
• Firefox → Accessibility paneli — "Check for issues" (kontrast, klaviatura, matn yorlig'i) va Show Tabbing Order: sahifadagi hamma Tab to'xtashlarini raqamlab chizadi.
• Accessibility Insights for Web (Microsoft'ning bepul kengaytmasi) — FastPass rejimi: avtomat tekshiruv va Tab to'xtashlari xaritasi.

4. Avtomat vositalar amalda: «Bahor» bron sahifasi

Stajyor bron sahifasining birinchi versiyasini yozdi. Uni ikki vosita bilan tekshiramiz:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, maximum-scale=1">
  <title>Bahor</title>
</head>
<body>
  <h1>Stol band qilish</h1>
  <img src="assets/images/zal.jpg" alt="rasm">
  <h3>Ma'lumotlaringiz</h3>
  <form action="https://example.com/band-qilish" method="post">
    <input id="ism" name="ism" type="text" placeholder="Ism">
    <input id="tel" name="tel" type="tel" placeholder="Telefon">
    <p style="color: #bbb">Barcha maydonlar majburiy</p>
    <div role="button">Band qilish</div>
  </form>
  <a href="shartlar.html"><img src="assets/icons/info.svg"></a>
</body>
</html>

style="color: #bbb" — matnni och kulrang qiladigan CSS. CSS'ni keyingi qismda o'rganamiz, bu yerda faqat natijasi muhim: oq fonda xira matn.

4.1 html-validate natijasi

   2:2   error  <html> is missing required "lang" attribute                         element-required-attributes
  12:4   error  Heading level can only increase by one, expected <h2> but got <h3>  heading-level
  13:4   error  <form> element must have a submit button                            wcag/h32
  14:6   error  <input> element does not have a <label>                             input-missing-label
  15:6   error  <input> element does not have a <label>                             input-missing-label
  16:8   error  Inline style is not allowed                                         no-inline-style
  17:10  error  Prefer to use the native <button> element                           prefer-native-element
  19:4   error  Anchor link must have a text describing its purpose                 wcag/h30
  19:28  error  <img> is missing required "alt" attribute                           wcag/h37

Tarjimasi, yuqoridan pastga:

• html da lang yo'q;
• sarlavha h2 o'rniga h3 ga sakragan;
• formada yuborish tugmasi yo'q;
• ikki maydonda label yo'q;
• inline stil — bu a11y emas, uslub qoidasi;
• div o'rniga native button ishlating;
• havolada maqsadini aytadigan matn yo'q;
• img da alt yo'q.

4.2 Lighthouse natijasi

Ball — 57. Xatolar:

Background and foreground colors do not have a sufficient contrast ratio.
Heading elements are not in a sequentially-descending order
`<html>` element does not have a `[lang]` attribute
Image elements do not have `[alt]` attributes
Links do not have a discernible name
`[user-scalable="no"]` is used in the `<meta name="viewport">` element or the `[maximum-scale]` attribute is less than 5.

Tarjimasi: matn va fon kontrasti yetarli emas; sarlavhalar tartibi buzilgan; lang yo'q; rasmda alt yo'q; havolaning nomi yo'q; viewport kattalashtirishni taqiqlaydi (maximum-scale 5 dan kichik).

4.3 Kim nimani topdi

Xulosalar:

• Vositalar bir-birini to'ldiradi. html-validate kontrastni ko'rmaydi — u CSS'ni bilmaydi. Lighthouse esa placeholder ni "nom" deb qabul qildi. Qulay forma darsidan bilasiz: placeholder yozish boshlanishi bilan yo'qoladi va label o'rnini bosmaydi.
• Ikkalasi ham ma'noni ko'rmaydi. "rasm" alt'i va "Bahor" sarlavhasi ikkalasidan ham o'tib ketdi.
• Eng jiddiy muammoni Lighthouse ko'rmadi. div role="button" klaviatura bilan fokus olmaydi. Malika (NVDA bilan ishlaydigan doimiy mehmonimiz) bronni umuman yubora olmaydi. Buni birinchi Tab testi darhol ko'rsatadi.

Tuzatilgan versiya (label'lar, button, lang, mazmunli alt va title) ikkala vositadan xatosiz o'tadi: html-validate — 0 xato, Lighthouse — 100. Lekin bu hali oxiri emas — navbat qo'lda testga.

Tekshirib ko'ring: Nega Lighthouse kontrastni topdi, html-validate esa yo'q?

5. Qo'lda: klaviatura testi

Klaviatura va fokus darsida "Tab testi" ni o'tkazgan edik. Endi uni to'liq ro'yxatga aylantiramiz. Sichqonchani chetga suring va har bandni tekshiring:

1. Tab va Shift + Tab bilan hamma havola, tugma va maydonga yetib borasizmi?
2. Fokus doim ko'rinadimi? Qayerda turganini har lahzada bilasizmi?
3. Tartib mantiqiymi — sahifani o'qish tartibiga mosmi?
4. Sahifa boshidagi skip link ishlaydimi?
5. Enter havola va tugmalarni, Space tugma va checkbox'larni ishlatadimi?
6. Strelkalar radio, select, tabs va menyuda APG qoidalari bo'yicha ishlaydimi?
7. Esc dialog va popover'ni yopadimi? Fokus uni ochgan tugmaga qaytadimi?
8. Klaviatura tuzog'i yo'qmi — har joydan Tab bilan chiqib keta olasizmi?
9. Yopiq menyu yoki yashirin blok ichidagi havolalarga fokus tushmayaptimi?
10. Fokus yopishqoq sarlavha ostida yashirinib qolmayaptimi?

Bitta sahifa uchun 5–10 daqiqa. Eng ko'p xato aynan shu yerda chiqadi.

6. Qo'lda: kattalashtirish va ko'rish

• 200% kattalashtirish (Ctrl + +). Matn kesilmasin, bir-biriga chiqib ketmasin. WCAG: 1.4.4 Resize Text (AA).
• Tor ekran. DevTools device mode'da enini 320 pikselga qo'ying. Hamma narsa gorizontal aylantirishsiz o'qilsin. WCAG: 1.4.10 Reflow (AA). Bu 1280 pikselli ekranni 400% kattalashtirish bilan teng.
• Telefonni aylantirish — sayt ham tik, ham yotiq holatda ishlasin (1.3.4 Orientation, AA).
• Rasmlarsiz — alt matn darsidagi usul: rasmlarni o'chirib, sahifani alt'lar bilan o'qing.
• CSS'siz — WAVE'ning Styles: Off tugmasi: o'qish tartibi mantiqiymi?
• Rang ajratmaslik — Chrome Rendering panelidagi emulyatsiya.

Viewport'da maximum-scale=1 yoki user-scalable=no bo'lsa, telefonda kattalashtirib bo'lmaydi — yuqoridagi Lighthouse xatosi aynan shu. head anatomiyasi va viewport darsidagi qoida: zoom'ni o'chirmang.

7. Ekran o'quvchi bilan test

7.1 Qaysi ekran o'quvchi?

Windows'da o'rnatilgan Narrator ham bor, lekin veb-testda NVDA ko'proq ishlatiladi. WebAIM'ning so'rovlarida kompyuterda JAWS va NVDA eng mashhur, telefonda esa VoiceOver oldinda. O'zbekistonda telefonlarning ko'pchiligi Android — shuning uchun TalkBack'ni ham albatta sinang.

Har ekran o'quvchi o'z juft brauzeri bilan eng yaxshi ishlaydi. Shuning uchun NVDA'ni Safari'da emas, Chrome yoki Firefox'da; VoiceOver'ni esa Safari'da sinang.

7.2 NVDA: birinchi qadamlar

nvaccess.org saytidan yuklab o'rnating. O'rnatishda ish stoli yorlig'ini qoldirsangiz, Ctrl + Alt + N bilan ishga tushadi. NVDA'ning maxsus tugmasi — Insert (noutbukda sozlamada Caps Lock ni tanlash mumkin). Quyida u "NVDA" deb yozilgan.

Noutbuk tartibida "oxirigacha o'qish" — NVDA + A.

Maslahat: NVDA menyusida (NVDA + N) Tools → Speech Viewer bor. U NVDA aytayotgan hamma gapni oynada matn qilib yozib boradi. Boshida quloq bilan ilg'ash qiyin — shu oyna juda yordam beradi. Hisobotga iqtibos olish uchun ham qulay.

7.3 VoiceOver (Mac va iPhone)

Mac: Cmd + F5 — yoqish va o'chirish. Maxsus tugmalar — Control + Option ("VO"). VO + → — keyingi element, VO + Space — bosish, VO + U — rotor (sarlavhalar, havolalar ro'yxati), VO + Cmd + H — keyingi sarlavha.

iPhone: Sozlamalar → Accessibility (Universal kirish) → VoiceOver.

Diqqat: VoiceOver va TalkBack yoqilganda telefon boshqacha boshqariladi: bitta bosish — faqat tanlaydi, ikki marta bosish — ishga tushiradi. O'chirish yo'lini bilmasangiz, telefon "qulflanib" qolgandek tuyuladi. Yoqishdan oldin tezkor tugmani sozlang: iPhone'da Accessibility Shortcut (yon tugmani uch marta bosish), Android'da — ikkala ovoz tugmasini 3 soniya bosib turish.

iPhone imo-ishoralari: bir barmoq bilan o'ngga/chapga surish — keyingi/oldingi element; ikki marta bosish — ishga tushirish; ikki barmoqni aylantirish — rotor (sarlavha, havola bo'yicha yurish). Uch barmoq bilan uch marta bosish — "ekran pardasi": ekran qorayadi, siz faqat eshitasiz. Haqiqiy test shunday bo'ladi.

7.4 TalkBack (Android)

Sozlamalar → Maxsus imkoniyatlar (Accessibility) → TalkBack. Asosiy imo-ishoralar iPhone'ga o'xshash: o'ngga/chapga surish — keyingi/oldingi element, ikki marta bosish — ishga tushirish, sahifani aylantirish — ikki barmoq bilan. Sarlavha yoki havola bo'yicha yurish imo-ishorasi TalkBack versiyasiga qarab farq qiladi. TalkBack sozlamalaridagi o'rnatilgan qo'llanma (tutorial) — o'rganishning eng tez yo'li.

7.5 Ekran o'quvchi testi ro'yxati

Faqat "tinglab ko'rish" emas — vazifani bajaring: ko'zingizni yuming (yoki ekran pardasini yoqing) va stolni band qilib ko'ring. Yo'lda tekshiring:

1. Sahifa ochilganda title o'qildimi va u mazmunlimi?
2. Matn to'g'ri tilda (o'zbekcha ovozda) o'qilyaptimi? — lang.
3. Sarlavhalar ro'yxati (NVDA + F7) sahifaning mundarijasiga o'xshaydimi?
4. Landmarklar (D) bormi: header, nav, main, footer?
5. Havolalar ro'yxati kontekstsiz tushunarlimi ("Batafsil" x5 yo'qmi)?
6. Rasmlar alt'i ma'noli, bezak rasmlar esa jimmi?
7. Har maydon nomi, "majburiy"ligi va yo'riqnomasi o'qilyaptimi?
8. Xato chiqqanda u e'lon qilinyaptimi?
9. Tugmalar nomi va holati ("yoyilgan", "tanlangan") aytilyaptimi?
10. Dinamik xabar ("Bron qabul qilindi") jonli hudud orqali o'zi aytilyaptimi?
11. Dialog ochilganda fokus unga o'tib, sarlavhasi o'qilyaptimi?

Tekshirib ko'ring: NVDA bilan sahifada B tugmasini bosdingiz, lekin "Band qilish" tugmasiga o'tmadi, NVDA "tugma yo'q" dedi. Sabab nima bo'lishi mumkin?

8. Natijani yozish: audit hisoboti

Topilgan muammo yozilmasa — tuzatilmaydi. Yaxshi hisobotda har muammo uchun beshta narsa bor:

1. Nima va qayerda — sahifa va element.
2. Qanday takrorlash — qadamlar ("Tab bosing — 'Band qilish' ga fokus tushmaydi").
3. Kimga ta'sir qiladi — klaviatura, ekran o'quvchi, rang ajratmaydiganlar.
4. WCAG mezoni — masalan, 2.1.1 Keyboard.
5. Jiddiyligi va tuzatish taklifi.

«Bahor» bron sahifasi bo'yicha qisqa hisobot:

Jiddiylik darajalari: to'siq — vazifani umuman bajarib bo'lmaydi; jiddiy — juda qiyin; o'rta — noqulay; kichik — sezilarli, lekin ishlashga xalaqit bermaydi. Tuzatish shu tartibda boshlanadi. Tuzatgach — qayta tekshiring: xuddi shu qadamlar bilan.

Maslahat: Yevropa va boshqa mamlakatlarda saytlar accessibility bayonoti (accessibility statement) e'lon qiladi: qaysi WCAG darajasiga mos, qaysi ma'lum muammolar bor va ular haqida qanday xabar berish mumkin. Audit hisoboti — shu bayonotning asosi.

9. Qachon tekshirish kerak

Avtomat tekshiruvni har o'zgarishda o'zi ishga tushirish — Playwright va axe-core bilan, Accessibility testlari darsida.

10. Ko'p uchraydigan xatolar

10.1 "Lighthouse 100 — tayyor"

Ko'rdik: ma'nosiz alt, "bu yerni bosing" va fokus olmaydigan tugma bilan ham 100 bo'ladi. Tuzatish: 100 — qo'lda testni boshlash uchun ruxsat, xolos.

10.2 Bitta vosita bilan cheklanish

Har vosita boshqa narsani ko'radi. Tuzatish: kamida bitta "HTML" vosita (html-validate) va bitta "brauzer" vosita (axe yoki Lighthouse) va qo'lda test.

10.3 Ekran o'quvchini sichqoncha bilan sinash

Sichqoncha bilan bosib, NVDA nima deyishini eshitish — haqiqiy foydalanuvchi tajribasi emas. Tuzatish: faqat klaviatura yoki imo-ishoralar bilan, vazifani boshidan oxirigacha bajaring.

10.4 Noto'g'ri juftlik

VoiceOver'ni Chrome'da sinab "Safari'da ham shunday" deb o'ylash. Tuzatish: NVDA — Chrome/Firefox, VoiceOver — Safari, TalkBack — Chrome.

10.5 Tuzatgandan keyin qayta tekshirmaslik

Bitta muammoni tuzatish boshqasini keltirib chiqarishi mumkin. Tuzatish: har tuzatishdan keyin o'sha qadamlarni takrorlang.

11. Mashqlar

1-mashq (oson): Qaysi qatlam topadi?

Har muammo uchun uni topadigan eng arzon usulni yozing: avtomat vosita, klaviatura testi yoki ekran o'quvchi.

1. img da alt atributi umuman yo'q.
2. Modal oyna yopilgandan keyin fokus sahifa boshiga "uchib" ketadi.
3. "Bron qabul qilindi" xabari ekranda chiqadi, lekin ovozda aytilmaydi.
4. Matn rangi fonga juda yaqin.
5. alt="IMG_2045".

2-mashq (o'rta): html-validate'ni bashorat qiling

Quyidagi parcha uchun html-validate (darsdagi sozlama bilan) qaysi qoidalarni buzilgan deb aytishini oldindan yozing. Keyin o'zingiz ishga tushirib tekshiring.

<nav aria-label="Asosiy">
  <a href="/"><img src="assets/icons/uy.svg"></a>
</nav>
<label for="qidiruv">Taom qidirish</label>
<input id="qidir" type="search">
<div role="button" tabindex="0">Qidirish</div>

Eslatma: label ning for qiymatini va input ning id sini solishtiring. Bu no-missing-references qoidasi, uning to'liq nomi — .

  2:4   error  Anchor link must have a text describing its purpose  wcag/h30
  2:16  error  <img> is missing required "alt" attribute            wcag/h37
  4:13  error  Element references missing id "qidiruv"              no-missing-references
  5:2   error  <input> element does not have a <label>              input-missing-label
  6:6   error  Prefer to use the native <button> element            prefer-native-element

3-mashq (qiyin): Menyu sahifasi auditi

«Bahor» menyu sahifangizni (oldingi darslarda yozganingiz) to'liq tekshiring:

1. html-validate (darsdagi sozlama bilan) va Lighthouse (faqat Accessibility).
2. Klaviatura testi — darsdagi 10 bandli ro'yxat.
3. 200% zoom va 320 pikselli en.
4. NVDA (yoki telefoningizdagi TalkBack/VoiceOver) bilan: sarlavhalar ro'yxati, havolalar ro'yxati va bitta vazifa — "Ichimliklar bo'limida kompot narxini topish".

Natijani darsdagi jadval shaklida hisobot qilib yozing: kamida 5 ta qator.

12. Real ishda

• QA muhandisi va a11y mutaxassisi. Katta kompaniyalarda accessibility bo'yicha alohida mutaxassislar ishlaydi. Xalqaro sertifikatlar ham bor — IAAP tashkilotining CPACC va WAS sertifikatlari.
• Hisobot hujjatlari. Xalqaro buyurtmachilar ko'pincha VPAT/ACR (mahsulot accessibility talablariga qanchalik mosligi haqidagi rasmiy hisobot) so'raydi. Uning asosi — shu darsdagi audit.
• Kod review. Ko'p jamoalarda "PR'da yangi sahifa bo'lsa — klaviatura testidan o'tkazildimi?" degan band bor.
• Intervyu. "Saytni accessibility bo'yicha qanday tekshirasiz?" — yaxshi javob uchala qatlamni sanaydi va "Lighthouse 100 yetmaydi" deb biladi.

Xulosa

• Accessibility uch qatlamda tekshiriladi: avtomat vositalar, qo'lda (klaviatura, zoom), ekran o'quvchi.
• Avtomat vositalar muammolarning faqat bir qismini topadi va ma'noni baholay olmaydi; Lighthouse 100 — boshlanish.
• html-validate, Lighthouse, axe DevTools va WAVE bir-birini to'ldiradi.
• Klaviatura testi — eng arzon va eng foydali qo'lda test.
• Ekran o'quvchini o'z brauzeri bilan va real vazifada sinang: NVDA + Chrome, VoiceOver + Safari, TalkBack + Chrome.
• Topilgan muammo — hisobotga: nima, qanday takrorlash, kimga ta'sir, WCAG, jiddiylik.

Keyingi dars: template va slot — sahifada ko'rinmaydigan va ishlamaydigan HTML qolip: JavaScript uni klonlab, sahifaga qo'yadi.

Manbalar

• Google: "Lighthouse accessibility scoring" — developer.chrome.com/docs/lighthouse
• Deque: "axe DevTools" va "axe-core" — deque.com, github.com/dequelabs/axe-core
• WebAIM: "WAVE", "Using NVDA to Evaluate Web Accessibility", "Screen Reader User Survey" — webaim.org
• W3C WAI: "Easy Checks – A First Review of Web Accessibility" — w3.org/WAI/test-evaluate
• NV Access: "NVDA User Guide" — nvaccess.org