Veb-qulaylik (a11y) nima?

MiddleHTML #html #accessibility #a11y

Savol

Veb-sahifalarning qulayligi (accessibility, a11y) nima va uni qanday ta'minlash mumkin?

Qisqa javob

Qulaylik — bu saytdan imkoniyati cheklangan odam ham foydalana oladigan tarzda ishlab chiqish yondashuvi: skrinrider bilan ishlaydigan ko'r odam, sahifani faqat klaviatura orqali boshqaruvchi odam yoki ko'rish qobiliyati past foydalanuvchi.

Batafsil javob

Asosiy amaliyotlar:

  • Semantik belgilash asos sifatida — skrinriderlar va yordamchi texnologiyalar unga tayanadi.
  • Rasmlarda alt — ko'r foydalanuvchilar uchun rasm mazmunini tasvirlaydi; dekorativ rasmlar uchun alt="" ishlatiladi.
  • Fokusni boshqarish — barcha interaktiv elementlar Tab orqali ochiq bo'lishi kerak, va ko'rinadigan :focus-stilini almashtirmasdan olib tashlab bo'lmaydi.
  • ARIA-atributlar (aria-label, aria-hidden, role) nativ teglar yetarli bo'lmagan joylarda semantikani to'ldiradi, lekin uni almashtirmaydi — "yomon ARIA'dan ARIA yo'qligi yaxshiroq" qoidasi.
  • Matn kontrasti — WCAG AA bo'yicha oddiy matn uchun kamida 4.5:1.
  • Formalar: har bir <input>ning bog'langan <label>i bo'lishi kerak.

Misol

<!-- Yomon: tugma o'rniga div, klaviaturadan foydalanib bo'lmaydi -->
<div onclick="submit()">Yuborish</div>

<!-- Yaxshi -->
<button type="submit">Yuborish</button>

<img src="chart.png" alt="Choraklik daromadning 20% ga o'sishi" />
<img src="decor.png" alt="" />

Qo'shimcha savollar

  • WCAG nima va qanday moslik darajalari mavjud?
  • ARIA-atributlar haqiqatan ham qachon kerak bo'ladi?
  • Saytni qulaylik bo'yicha qanday sinab ko'rish mumkin?