Hamma uchun UX va interfeyslar

1) Nima uchun bu muhim?

Huquqiy va axloqiy jihatdan: interfeys ko’rish, eshitish, harakatlanish, kognitiv xususiyatlari buzilgan odamlarni istisno qilmasligi kerak.
Biznes samarasi: ko’proq foydalanuvchilar, yuqori konvertatsiya va ushlab turish, yaxshiroq SEO va kod sifati.
Operatsion: foydalanish - bu «tasodifiy fix» emas, balki jarayon.

2) Asoslar va tamoyillar (POUR)

Perceivable: kontrast, muqobil matnlar, subtitrlar.
Operable (Boshqariluvchanlik): hamma narsa klaviatura, ko’rinadigan fokus, pauza/to’xtash animatsiyasidan foydalanish mumkin.
Understandable: oldindan aytib boʻladigan navigatsiya, aniq xatolar, oddiy iboralar.
Robust (Ishonchlilik): HTML/ARIA ning to’g’ri semantikasi, assistiv texnologiyalar bilan moslashuvchanlik.

3) Semantika, sarlavhalar va ARIA

ARIA oldidagi semantik belgi:’<button>’,’<nav>’,’<form>’,’<table>’- vazifasi boʻyicha.
Sarlavhalar iyerarxiyasi: bir’<h1>’sahifaga, keyin mantiqiy tuzilma’<h2>’-’<h3>’.
Landmarks:’<header>’,’<main>’,’<aside>’,’<footer>’,’<nav>’- displeychilarga yordam beradi.
ARIA faqat zarur hollarda:’role’,’aria-label’,’aria-describedby’,’aria-expanded’,’aria-live’.
Holatlar/xatolar’aria-invalid’,’aria-errormessage’orqali.

4) Klaviatura va fokus-menejment

Klaviatura bilan toʻliq boshqarish:’Tab/Shift + Tab’- tartib,’Enter/Space’- faollashtirish,’Esc’- chiqish.
Har doim koʻrinadigan fokus; outline oʻchirilmasin.
Fokus tuzoqlari: modalkalarda - tsiklik fokus, fokusni yopilgandan keyin manbaga qaytarish.
Yashirin elementlar tab tartibiga tushmasligi kerak (’display: none’,’aria-hidden =» true»’).
Skip-havolalar: «Asosiy tarkibga oʻtish» - sahifaning boshida.

5) Rang, kontrast va bosmaxona

Matn kontrasti: kamida 4. Oddiy matn uchun 5:1 va katta matn uchun 3:1.
Faqat rangga tayanmang: ikonka/patter/imzo bilan takrorlang.
Tugmalar oʻlchami: kamida 40-48 px, atrofdagi yetarli maydonlar.
Shriftlar: oʻqiladigan garnituralar, satrlararo 1. 4–1. 6, satr uzunligi 45-90 belgi.

6) Harakat, animatsiyalar va epileptogen chaqnashlar

prefers-reduced-motion bayrog’ini hurmat qiling - soddalashtirilgan animatsiyalarni qo’shing/parallaksni o’chiring.
Miltillashdan qoching> 3 marta/sek.
Barcha avtoulovlarda Pause/Stop/Hide boʻlishi kerak.

7) Shakllar, xatolar va validatsiya

Belgilar va maydonlarni aniq bogʻlang:’<label for = «id»>’.
Pleysholder - belgi emas.
Maydon yonidagi xatolar va yuqoridagi xatolar haqida xabarlar; ’aria-describedby’ orqali bogʻlang.
Kirish formatini, namunani, niqobni tushuntiring; birliklar va valyutani ko’rsating.
Xato boʻlganda toʻldirilgan maydonlarni tashlamang; diqqatingizni muammoga qarating.

html
<label for="email">Эл. почта</label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id="email-hint" class="hint">Мы не рассылаем спам</div>
<div id="email-err" class="error" role="alert">Укажите адрес в формате name@example.com</div>

8) Komponentlar va interaktiv: patternlar

Tugmalar vs havolalar: amal =’<button>’, oʻtish =’<a>’.
Tablar/akkordeonlar: navigatsiya oʻqlari,’aria-controls’,’aria-selected’.
Modalkalar/dialoglar:’role = «dialog’,’aria-modal =» true’, fokus tuzogʻi,’Esc’yopadi.
Tooltip/Popover: klaviatura va taymautlar oʻqishga xalaqit bermaydi.
Drag & Drop: muqobil - «yuqoriga/pastga ko’chirish» tugmalari, klaviatura o’qlari; hodisalar faqat sichqoncha bilan emas.

9) Media: video/audio/grafiklar

Video: subtitrlar, transkript (transcript), audio tavsifning muqobil parchasi (AD).
Audio: matnni ochish.
Grafiklar/diagrammalar: matnli rezyume («nima muhim»), ma’lumotlar jadvali, o’qlarning tavsif imzolari.
Tirik joylar:’aria-live = «polite «/» assertive »- juda tez-tez« qichqirmaslik» uchun ehtiyot boʻling.

10) Jadvallar va ro’yxatlar

11) i18n, lokallar va RTL

HTML ildizidagi’lang’atributi; sonlar/sanalar/valyutalarning lokal formatlari.
RTL qoʻllab-quvvatlash (arab/ivrit): ikonkalarni oynalash, navigatsiya tartibi, kursorlar.
Piktogrammaga tikilgan soʻzlardan qoching (matn tarjima qilinishi kerak).
Oddiy formulalar, jargondan qochish; atamalar glossariysi.

12) Vaqt, sessiya, kapchi va muqobil

Taymautlar - ogohlantirish va uzaytirish imkoniyati bilan.
CAPTCHA: muqobil (savollar, ko’rinmas bot analizatorlari, pochta/telefon orqali tasdiqlash); agar ishlatsangiz - matnga muqobil va nafaqat vizual.
Autentifikatsiya: parol menejerlarini qoʻllab-quvvatlash, «parolni koʻrsatish», WebAuthn.

13) Sensorli va motorli buzilishlar uchun foydalanish imkoniyati

Imo-ishoralar klik/klaviatura ekvivalentlariga ega boʻlishi kerak.
Muqobilsiz uzoq vaqt ushlab turishni talab qilmang.
«Pointer cancellation»: bekor qilish uchun «bosish» emas, balki qoʻyish uchun bajarilishi kerak.

14) Holatlar, bildirishnomalar va alertlar

Dinamik xabarlar uchun’role = "status "/" alert’dan foydalaning.
Fokusni yopishqoq bannerlar bilan yopishtirmang.
Toast-bildirishnomalar - fokus/hover va klaviaturadan foydalanish uchun tanaffus bilan.

15) Test-reja (qo’lda va avto)

• Hamma asosiy stsenariylarni faqat klaviatura bilan oʻtish.
• Har bir elementda fokusning koʻrinishini tekshirish.
• 200% gacha kattalashtirish - interfeys gorizontal skrollsiz funksional boʻlib qoladi.
• «Harakatni kamaytirish» tizimini yoqish - animatsiyalarga xalaqit bermaydi.
• Skrinidan (NVDA/VoiceOver) oʻtish, toʻgʻri rollar/belgilar/tartibga ishonch hosil qilish.

• Komponentlar darajasidagi kirish lintlari.
• Kontrastni, muqobil matnlarni, sarlavhalar tartibini, ARIA validligini tekshirish.
• Kritik ekranlar uchun semantika snapshotlari (role tree).

16) Foydalanish sifati metrikasi

A11y Coverage: chek varaqlari oʻtgan komponentlar ulushi.
Keyboard-only Pass Rate: klaviatura orqali oʻtiladigan skriptlar foizi.
Contrast Violations/1k elementlari.
SR Flow Time: screenrider bilan skript oʻtish vaqti.
User-feedback: foydalanish imkoniyati, javob berish vaqti va tuzatish haqida shikoyatlar.

17) Komponentning chek-varaqasi

• Ortiqcha ARIAsiz to’g’ri semantika/rol
• Imzolangan yorliqlar,’aria- ’
• To’liq klaviatura boshqaruvi, ko’rinadigan fokus
• Matnning/ikonklarning/chegaralarning normadagi qarama-qarshiligi
• Xatolar va holatlar skrinrider tomonidan aytiladi
• Hurmat prefers-reduced-motion
• Bosiladigan maydon hajmi ≥ 40-48 px
• Lokalizatsiya va RTL sxemani buzmaydi

18) Anti-patternlar

Rolsiz/klaviaturasiz «Div- tugmalar».
’outline: none’ fokusini muqobilsiz yashirish.
Label oʻrniga pleysholder.
Xatolar faqat rangda.
Modalkalar fokussiz va’Esc’-siz.
Drag-only klaviaturasiz.
Uzoq avtoprukkalarni/parallaksni moslamasiz oʻchirish.

19) Rollar va jarayon

A11y - jamoaning egasi (Product/Design/Dev).
Definishn-of-dan (DoD) foydalanish imkoniyatini o’z ichiga oladi.
Dizayn-revyu: kontrast, fokus, yorliqlarni tekshirish.
Kod-revyu: semantika/ARIA, klaviatura testi.
Muntazam auditlar va yaxshilanishlar rejasi.

20) Iteratsiyalar bo’yicha joriy etish

• Semantika/sarlavhalar, kontrast, fokus va klaviatura, asosiy shakllar va xatolar.

• Modalkalar, tablar/akkordeonlar, matnli rezyume bilan jadvallar/grafiklar, video-subtitrlar, qisqartirilgan animatsiya.

• CI avtotestlari, RTL/i18n, metrika, muntazam audit, jamoani o’qitish.

21) Shablonlar va snippetlar

html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id="dlg-title">Подтвердите действие</h2>
<p id="dlg-desc">Эта операция необратима.</p>
<button>Отмена</button>
<button>Подтвердить</button>
</div>

html
<a class="skip-link" href="#main">Перейти к основному содержимому</a>
<main id="main">...</main>

css
@media (prefers-reduced-motion: reduce) {
{ animation-duration: 0.01ms!important; animation-iteration-count: 1!important; transition: none!important; }
}

22) Mini-FAQ

Koʻrish qobiliyati zaif kishilar uchun alohida «versiya» kerakmi?
Yo’q. Moslamalar bilan hamma uchun bitta moslashuvchan va qulay versiya.

Faqat kontrastni tekshirish kifoya qiladimi?
Yo’q. Kontrast faqat bir qismidir. Klaviatura, fokus, semantika, shakl xatolari, media va boshqalar kerak.

ARIA hamma narsani hal qiladimi?
ARIA notoʻgʻri semantikani tuzatmaydi. Avval to’g’ri teglar, so’ngra ARIA-aniqliklar.

Jami

Foydalanish - bu tizimli fan: semantika → klaviatura/fokus → kontrast/rang → shakllar/xatolar → media/grafiklar → i18n/RTL → test-reja va metrika. DoD va jamoa madaniyatining bir qismi sifatida foydalanish imkoniyatini yarating - mahsulotingiz haqiqatan ham universal, ishonchli va hamma uchun qulay bo’ladi.