Interfeyslarni sinovdan oʻtkazish

1) Nima uchun va nimani «tayyor» deb hisoblaymiz

• WCAG 2 mezonlari bajarildi. 1/2. maqsadli platformalar uchun 2 darajali AA;
• interfeys tugmachadan to’liq o’tadi;
• skrinridyerlar bilan to’g "ri ishlash;
• kontrastlar normalarga muvofiq bo’lsa;
• barcha holatlar/xatolar/holatlar ko’zdan tashqarida va sichqonchasiz mavjud bo’lsa;
• mahalliylashtirish, RTL, reduce motion va mobil xususiyatlar hisobga olingan.

2) Test strategiyasi (piramidka A11y)

1. Avtotestlar/linterlar (muammolar sinflarining 40-60% gacha tez qoplash).
2. Patternlarni qoʻlda tekshirish (klaviatura, fokus, kontent, mantiq).
3. Assistive Tech (AT) sessiyalari: skriniderlar, kattalashtirish, rangli filtrlar.
4. Foydalanuvchilar bilan dala sinovlari (iloji boricha).

Maqsad: fichlarda ko’paymaslik uchun tizim nuqsonlarini komponentlar/namunalar darajasida ushlash.

3) Bazaviy tekshirishlar chek-varaqasi (tezkor haydash)

• Klaviatura: hamma narsaga tab/strelkalar bilan erishish mumkin; fokus tartibi mantiqiy; modalkalarda fokus tuzog’i mavjud; ESC/Enter/Space ishlamoqda.
• Fokus-indikatorni har qanday mavzuda/har qanday fonda ko’ramiz.
• Kontrast: matn ≥ 4. 5:1 (oddiy), ≥ 3:1 (yirik), piktogrammalar/nazoratlarni oʻqish mumkin.
• Semantika: to’g’ri teglar (’button’,’a’,’label’,’ul/li’,’th/td’), rollar va’aria-’faqat kerak bo’lganda.
• Skrinrider: ierarxiya sarlavhalari, tugmalar/havolalarning semantik nomlari, ikonkalar/tasvirlar uchun muqobillar.
• Shakllar: aniq’label’, maslahatlar/xatolar bog’liq (’aria-describedby’), xato matnlari aniq.
• Dinamika: tostlar/bannerlar/xatolar’aria-live’(’polite ’/’ assertive’) orqali e’lon qilinadi.
• Animatsiyalar’prefers-reduced-motion’ga hurmat qilinadi; interfeysni silkitmasdan.
• Lokalizatsiya/RTL: asosiy ekranlar tekislangan, raqamlar/sanalar/valyutalar utilitlar bilan formatlanadi.
• Harakatchanlik: teginish maqsadlari ≥ 44 × 44 px, zoom taqiqlanmagan, ekranni burish kontentni buzmaydi.

4) Rollar, javobgarlik va artefaktlar

Dizayn tizimi: Har bir komponent tavsifidagi A11y-talablar.
Ishlab chiquvchilar: avtoproverlar, A11y-assertli unit/interaction-testlar.
QA: qo’l stsenariylari + AT-sessiyalar; jiddiy/chastotali hisobot.
UX/Content: xato/status microcopy, ovozli o’qish qobiliyati.
Artefaktlar: chek-varaqlar, ssenariylar, AT skrinkastlari, WCAG-referenslar bilan nuqsonlar ro’yxati, tavsiyalar.

5) Avtomatlashtirilgan tekshirishlar

Linterlar/analizatorlar: axe, eslint-plugin-jsx-a11y, pa11y, Lighthouse.
Payplaynda: tanqidiy buzilishlarda (role/label/kontrast/tab-tuzoqlar) PR blokirovka qilamiz.
Kontrast snapshotlar: mavzu/holatlarning vizual testlari.

6) Qo’lda sinovdan o’tkazish: stsenariylar

6. 1 Klaviatura

Sahifani faqat klaviatura bilan bosib oʻting (Tab/Shift + Tab/Enter/Space/oʻqlar).
Fokusning koʻrinishi, navbati, barcha harakatlarning mavjudligi, «tuzoq» va «oʻlik» elementlarning yoʻqligini tekshiring.
Modalkada: fokus ichkarida, yopilganda tashabbuskorga qaytariladi.

6. 2 Skrinridyerlar (minimal to’plam)

Desktop: NVDA/JAWS (Windows), VoiceOver (macOS).
Mobile: VoiceOver (iOS), TalkBack (Android).
Tekshiramiz: to’g’ri sarlavhalar (H-ierarxiya), tugmalar/havolalar nomi, jadvallarni o’qish (’th ’/’ scope’), maqom e’lon qilish, shakllarning tushunarli xatolari.

6. 3 Kontent va microcopy

Tanqidiy matnlarni baland ovozda - noaniqliklarsiz, «xato 400» bo’lmasdan o’qiymiz.
Xato = «nima notoʻgʻri + qanday tuzatish mumkin + cheklov/format».

6. 4 Dinamika va tirik hududlar

Muvaffaqiyat tosti -’aria-live = «polite»’, xato -’assertive’.
Progress/yuklash matn bilan izohlangan; skeleton spinnerdan afzalroqdir.

7) Shakllar va xatolar (chuqur)

Har bir maydonda bogʻlangan label (placeholder emas) mavjud.
Xatolar quyidagi maydon bilan bogʻliq:’aria-invalid =» true»’,’aria-describedby =» [id xato]»’.
Formatlar formulalari (sana, telefon) oldindan ko’rsatiladi; niqoblar kirish/qoʻyishni buzmaydi.
Submit + avto-skroll xatolarining umumiy banneri va birinchi xatoga eʼtibor.
Xato matnlari: aniq, texnik jargonsiz.

8) Jadvallar, ro’yxatlar, grafiklar

Jadvallar:’th’so’scope =’col/row’, imzolar, rezyume sarlavhalari.
Ro’yxatlar haqiqiy’ul/ol/li’, divalar emas.
Grafiklar - muqobil jadvallar/tavsiflar; afsonalar mavjud; ranglar ≠ yagona signal.

9) Multimedia va animatsiyalar

Video: subtitrlar/dekodlash; klaviatura bilan boshqarish; avtopleysiz (yoki jimgina).
GIF/mikro animatsiyalar:’prefers-reduced-motion’da oʻchiramiz; chaqnashlardan qochamiz.
Tebranishlar/tovushlar - ixtiyoriy va vizual/matn bilan takrorlanadi.

10) Mobil foydalanish

Interaktivlar ≥ 44 × 44 px, yetarli oraliqlar.
Kattalashtirishni taqiqlamang (meta viewport’user-scalable = no’).
Shakl/klaviatura: toʻgʻri turlari (’tel’,’email’,’number’), tizim imkoniyatlarini yashirmaymiz.
Qorong’i mavzu va tizim shriftlari bilan tekshirish.

11) Mahalliylashtirish, raqamlar va RTL

Kontekstli i18n-kalitlar orqali satrlar; uzun tillar (DE/TR) maketni buzmaydi.
Sana/valyuta formatlari - satrlarda emas, balki utilitlarda.
RTL rejimi: navigatsiya ikonalarini ko’zgu, fokus va karetka tartibini tekshirish, ikki yo’nalishli kirish.

12) Tanqidiy flolarning o’ziga xosligi (iGaming)

To’lovlar/xulosalar

Aniq yo’riqnomalar, limitlar/muddatlar/komissiyalar - matnda.
Provayderning xatolari aniq, kodlarsiz e’lon qilinadi; harakat qilishning muqobili bor.
Amalni tasdiqlash: mantiqiy CTAga eʼtibor qaratish, bekor qilish imkoniyati.

MSK/verifikatsiya

Foto/hujjatlarga bosqichma-bosqich maslahatlar; progress va ETA.
Xatolar «noaniq/yorqin/kesilgan» - tuzatish misollari bilan.
Neytral ohang, hazil yo’q.

13) Nuqsonlarning jiddiyligini baholash

Blocker: asosiy vazifani (klaviatura/skrining) bajarib boʻlmaydi.
Critical: tanqidiy funktsional, ammo jiddiy to’siqlar bilan ishlaydi.
Major: to’sqinlik qiladi, aylanma yo’l bor.
Minor: kosmetika/vazifaga ta’sir qilmasdan g’aydalarga nomuvofiqlik.

Har bir nuqson - WCAG mezoni va takrorlanadigan stsenariyga havola.

14) Qabul qilish mezonlari (Definition of Done, A11y)

Klaviatura skripti sichqonchasiz 100% oʻtadi.
axe/Lighthouse: hech qanday muhim/yuqori buzilishlar yo’q.
Barcha mavzularda AA kontrasti.
Asosiy yo’llar (navbar, shakllar, modallar, tostlar) ning skrining-progoni.
Hujjatlar yangi komponentlar uchun A11y/fich (rol modeli, aria, fokus, misollar).
A11y-testlarning regressiyasi CI da yashil rangda.

15) Jarayonlar va avtomatlashtirish

Ishlab chiqishdan oldin: vazifalarda A11y-mezonlar, fokus/xato holatlariga ega maketlar.
Ishlab chiqishda: lokal yig’ishda linterlar/axe; kontrast/fokusning vizual snapshotlari.
CI: pa11y/axe-skanerda tanqidiy sahifalar bo’yicha; Blocker/Critical davrida bildning qulashi.
Chiqarilgandan so’ng: choraklik auditlar, A11y-tag bo’yicha foydalanuvchi shikoyatlari monitoringi.

16) Anti-patternlar

Label oʻrniga pleysholder.
’button ’/’ a’ oʻrniga’div’.
«Go’zallik uchun» o’chirilgan fokus halqalar.
Rang yagona maqom tashuvchisi sifatida.
Fokus-trapsiz modallar/ESC.
Mobilda kattalashtirishni taqiqlash.
Insonning tushuntirishisiz «xato 400/500».

17) Test stsenariylarining shablonlari

Skript 1 - Klaviatura navigatsiyasi (shakli yozilgan sahifa)

1. Birinchi maydongacha tab, maʼlumotlarni kiriting.
2. Shift + Tab orqaga - toʻgʻri tartibda tekshiring.
3. Validatsiyani chaqiring - fokus birinchi xatoga koʻchiriladi.
4. ESC tugmasi modalini yoping, fokus tashabbuskorga qaytdi.

Stsenariy 2 - Skrining (to’lov sahifasi)

1. Sahifaning sarlavhasiga (h1) oʻting, boʻlimlarni tinglang.
2. Usulni tanlang - rollarni/holatlarni eʼlon qilish eshitiladi.
3. Xabarni oʻqib, maydon bilan bogʻliq boʻlgan miqdorda xatoga yoʻl qoʻying.
4. To’lov to’g "risida muvaffaqiyatli tost’polite’deb e’lon qilindi.

Stsenariy 3 - Dinamika

1. Amalni> 3 s kutish bilan ishga tushiring - jarayon/ETA haqida matn mavjud.
2. Agar tarmoq xato qilsa,’assertive’banneri klaviatura orqali mavjud boʻlsa, «takrorlash/yordam berish» yoʻli mavjud.

18) Foydali mikro-shablonlar

Rollar/aria tostlar uchun

html
<div role = "status" aria-live = "polite"> Payment accepted. Balance updated. </div>
<div role = "alert" aria-live = "assertive"> The payment was denied. Try another method. </div>

Xatoning maydon bilan aloqasi

html
<label for = "amount "> Amount </label>
<input id="amount" aria-invalid="true" aria-describedby="amount-error">
<div id = "amount-error "> Minimum 100 UAH. Please enter a larger amount. </div>

Modalka (semantik atributlar)

html
<div role="dialog" aria-modal="true" aria-labelledby="m-title">
<h2 id =" m-title "> Confirm Payment </h2>
<! -- content -->
<button> Confirm </button>
<button> Cancel </button>
</div>

19) A11y-amaliyotni joriy etishning tezkor rejasi

1. Joriy komponentlar/pattern auditi (kontrast/fokus/rol semantikasi).
2. Dizayn tizimini tahrirlash: har bir komponentga A11y bo’limini qo’shing.
3. Asboblar :/axe/pa11y/Lighthouse linterlarini lokal va CI sifatida moslash.
4. O’qitish: dizaynerlar/ishlab chiquvchilar/nusxa ko’chiruvchilar uchun qisqa gaydlar.
5. Uchuvchi: 3-5 ta eng tez-tez uchraydigan nuqsonlarni (modalkalar, shakllar, tostlar) tuzatish.
6. Reglament: A11y-mezonlarga ega DoD; choraklik audit.

Yakuniy shpargalka

Klaviatura, fokus, kontrast, skrining, dinamikani tekshiring.
Statuslarni aria-live orqali e’lon qilish; xatolar - maydonlar bilan bog’liq.
Reduce motionni hurmat qiling, kattalashtirishni taqiqlamang.
«Qanday ko’rinishga» emas, balki semantika bilan o’ylang.
Tekshiruvlarni avtomatlashtiring, lekin doimo qo’l bilan to’ldiring.
Nuqsonlarni WCAG, jiddiylik va takrorlash stsenariysiga havola qilish.