Accessibility — mahsulot, axborot va xizmatlardan turli ko‘rish, eshitish, harakat, nutq yoki kognitiv imkoniyatga ega insonlar foydalana olishini ta’minlash xususiyatidir. Vebda accessibility faqat screen reader uchun matn qo‘shish emas. Semantik tuzilma, klaviatura, kontrast, media alternativasi, xato boshqaruvi va tushunarli kontent birgalikda ishlaydi.
Semantik HTML
Native HTML elementlari brauzer va yordamchi texnologiyaga rol hamda xatti-harakatni beradi. <button> klaviatura bilan fokuslanadi va Enter yoki Space orqali ishlaydi. divga click listener qo‘shish bu imkoniyatlarni avtomatik bermaydi.
Headinglar sahifa ierarxiyasini ko‘rsatadi. Ular faqat vizual o‘lcham uchun tanlanmaydi. Landmark elementlar — header, nav, main, aside, footer — screen reader foydalanuvchisiga sahifa bo‘limlari orasida tez yurishga yordam beradi.
Klaviatura va focus
Barcha interaktiv elementlar mouse’siz ishlashi kerak. Tab tartibi DOMdagi mantiqiy tartibga mos bo‘ladi. Focus indicatorni butunlay olib tashlash keyboard foydalanuvchiga joriy joyni yo‘qotadi. Custom style standart outline o‘rniga yetarli ko‘rinadigan fokus beradi.
Modal dialog ochilganda focus ichkariga o‘tadi, dialog ichida boshqariladi va yopilganda uni ochgan elementga qaytadi. Orqa kontent vaqtincha interaktiv bo‘lmaydi. Focus trap noto‘g‘ri ishlasa foydalanuvchi dialogdan chiqolmay qolishi mumkin.
Forma
Har input ko‘rinadigan labelga ega. Placeholder label emas, chunki qiymat kiritilganda yo‘qoladi va kontrasti past bo‘lishi mumkin. Required holat, format va xato matn bilan tushuntiriladi. aria-describedby yordamchi yoki xato matnini input bilan bog‘laydi.
Xato faqat rang bilan ko‘rsatilmaydi. Form submitdan so‘ng umumiy xato summary va maydon yonidagi aniq xabar berilishi mumkin. Server validation xavfsizlik uchun, client validation esa tez feedback uchun ishlaydi.
Rang va media
Matn va fon yetarli kontrastga ega bo‘ladi. Rang statusning yagona belgisi emas; ikon, pattern yoki matn qo‘shiladi. Meaningful rasmga maqsadini ifodalovchi alt text yoziladi, dekorativ rasm esa bo‘sh alt bilan assistive tree’dan chiqariladi.
Video uchun caption eshitmaydigan foydalanuvchiga dialog va muhim tovushni, transcript esa matnli alternativani beradi. Faqat avtomatik caption xatolari ism va texnik atamalarda tekshiriladi. Miltillovchi kontent tutqanoq xavfini keltirishi mumkin.
ARIA
ARIA native element yetishmaydigan custom widgetga role, state va property beradi. aria-expanded menyu ochiqligini, aria-live dinamik xabarni bildirishga xizmat qiladi. Noto‘g‘ri ARIA semantik HTMLdan yomonroq natija berishi mumkin. Role qo‘shish keyboard xatti-harakatini avtomatik yaratmaydi.
Standart va sinov
WCAG accessibility mezonlarini perceivable, operable, understandable va robust tamoyillarga ajratadi. Avtomatik audit ayrim label, kontrast va strukturaviy xatoni topadi, lekin butun vazifani tushunarli bajarishni isbotlamaydi. Keyboard, screen reader, zoom va real foydalanuvchi testi birgalikda qo‘llanadi.
Dinamik yangilanish
Single-page application sahifa URLini JavaScript orqali almashtirganda browser odatdagi full navigation kabi title va focusni avtomatik boshqarmasligi mumkin. Yangi view uchun document title yangilanadi, focus mantiqiy heading yoki main hududga o‘tkaziladi. Toast yoki validation natijasi aria-live orqali e’lon qilinishi mumkin, ammo juda ko‘p live xabar screen reader nutqini to‘xtatadi. Loading tugaganini faqat spinner yo‘qolishi bilan emas, status matni orqali bildirish mumkin. Skeleton animatsiyasi reduced-motion sozlamasini hurmat qiladi.
Accessibility regressiyasi yangi component va release bilan qayta tekshiriladi; bir martalik audit doimiy muvofiqlik kafolati emas.
Bog‘liq tushunchalar
WCAG, semantic HTML, screen reader, keyboard navigation, ARIA, color contrast, assistive technology