M

MLOG

O'zbek

Frontend dasturchilar uchun veb-qulaylik (a11y) bo'yicha to'liq qo'llanma. Dunyo bo'ylab foydalanuvchilar uchun inklyuziv veb-tajribalar yaratish tamoyillari va usullari.

Veb-qulaylik (a11y): Frontend dasturchilar uchun amaliy qo'llanma

Veb-qulaylik (ko'pincha a11y deb qisqartiriladi, bu yerda 11 'a' va 'y' harflari orasidagi harflar sonini bildiradi) - bu nogironligi bo'lgan odamlar foydalana oladigan veb-saytlar va veb-ilovalarni loyihalash va ishlab chiqish amaliyotidir. Bunga ko'rish, eshitish, harakatlanish, aqliy va nutqiy nuqsonlari bo'lgan shaxslar kiradi. Qulay veb-saytlarni yaratish faqatgina talablarga rioya qilish emas; bu barcha uchun, ularning qobiliyatlari yoki internetdan foydalanish uchun ishlatadigan texnologiyalaridan qat'i nazar, inklyuziv va teng raqamli tajribalarni yaratishdir. Bu, shuningdek, kengroq auditoriyani qamrab olish uchun ham muhimdir. Masalan, yaxshi rang kontrasti yorqin quyosh nurida foydalanuvchilarga foyda keltiradi, aniq maketlar esa aqliy nuqsonlari bo'lgan yoki shunchaki bir vaqtning o'zida bir nechta vazifani bajarayotganlarga yordam beradi.

Nima uchun veb-qulaylik muhim?

Veb-qulaylikka ustuvor ahamiyat berish uchun bir nechta jiddiy sabablar mavjud:

Qulaylik standartlari va yo'riqnomalarini tushunish

Veb-qulaylik uchun asosiy standart Butunjahon Internet Konsortsiumi (W3C) tomonidan ishlab chiqilgan Veb-kontent qulayligi bo'yicha yo'riqnomalar (WCAG) hisoblanadi. WCAG veb-kontentning qulayligini baholash uchun ishlatilishi mumkin bo'lgan sinovdan o'tkaziladigan muvaffaqiyat mezonlari to'plamini taqdim etadi. WCAG xalqaro miqyosda tan olingan va ko'pincha butun dunyo bo'ylab qulaylik to'g'risidagi qonunlar va qoidalarda havola qilinadi.

WCAG to'rtta tamoyil atrofida tashkil etilgan bo'lib, ular ko'pincha POUR deb ataladi:

WCAG uch darajadagi muvofiqlikka ega: A, AA va AAA. A darajasi qulaylikning eng asosiy darajasi bo'lsa, AAA darajasi eng keng qamrovli hisoblanadi. Ko'pgina tashkilotlar AA darajasidagi muvofiqlikni maqsad qiladi, chunki u qulaylik va amaliylik o'rtasida yaxshi muvozanatni ta'minlaydi. Ko'pgina qonunlar va qoidalar AA darajasidagi muvofiqlikni talab qiladi.

Frontend dasturchilar uchun amaliy usullar

Quyida frontend dasturchilar o'z veb-saytlari va veb-ilovalari qulayligini yaxshilash uchun foydalanishi mumkin bo'lgan ba'zi amaliy usullar keltirilgan:

1. Semantik HTML

Semantik HTML elementlaridan foydalanish qulaylik uchun juda muhimdir. Semantik HTML kontentingizga ma'no va tuzilma beradi, bu esa yordamchi texnologiyalarning uni tushunishi va talqin qilishini osonlashtiradi. Hamma narsa uchun umumiy <div> va <span> elementlaridan foydalanish o'rniga, quyidagi kabi HTML5 semantik elementlaridan foydalaning:

Misol:

<header>
  <h1>Mening veb-saytim</h1>
  <nav>
    <ul>
      <li><a href="#">Bosh sahifa</a></li>
      <li><a href="#">Haqida</a></li>
      <li><a href="#">Aloqa</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Maqola sarlavhasi</h2>
    <p>Maqola matni shu yerda...</p>
  </article>
</main>

<footer>
  <p>© 2023 Mening veb-saytim</p>
</footer>

To'g'ri sarlavha darajalaridan (<h1> dan <h6> gacha) foydalanish ham mantiqiy hujjat tuzilmasini yaratish uchun zarur. Kontentingizni tartibga solish va foydalanuvchilar uchun navigatsiyani osonlashtirish uchun sarlavhalardan foydalaning. <h1> sahifaning asosiy sarlavhasi uchun ishlatilishi kerak, keyingi sarlavhalar esa ma'lumotlar ierarxiyasini yaratish uchun ishlatilishi kerak. Sarlavha darajalarini o'tkazib yuborishdan saqlaning (masalan, <h2> dan <h4> ga o'tish), chunki bu ekran o'quvchi foydalanuvchilarini chalg'itishi mumkin.

2. Rasmlar uchun alternativ matn

Barcha rasmlar rasmning mazmuni va vazifasini tavsiflovchi mazmunli alternativ matnga (alt text) ega bo'lishi kerak. Alt matn ekran o'quvchilari tomonidan rasmni ko'ra olmaydigan foydalanuvchilarga rasm ma'lumotlarini yetkazish uchun ishlatiladi. Agar rasm faqat dekorativ bo'lsa va hech qanday muhim ma'lumot bermasa, alt atributi bo'sh satrga (alt="") o'rnatilishi kerak.

Misol:

<img src="logo.png" alt="Kompaniya logotipi">
<img src="decorative-pattern.png" alt="">

Alt matn yozayotganda, tavsiflovchi va qisqa bo'ling. Rasm taqdim etadigan asosiy ma'lumotni yetkazishga e'tibor qarating. "... rasmi" yoki "... surati" kabi iboralarni ishlatishdan saqlaning, chunki ekran o'quvchilari odatda uning rasm ekanligini e'lon qiladi.

Jadvallar va grafiklar kabi murakkab tasvirlar uchun atrofdagi matnda batafsilroq tavsif berishni yoki <figure> va <figcaption> elementlaridan foydalanishni o'ylab ko'ring.

3. Klaviatura orqali qulaylik

Veb-saytingizdagi barcha interaktiv elementlar klaviatura yordamida kirish imkoniyatiga ega bo'lishi kerak. Bu sichqoncha yoki boshqa ko'rsatuvchi qurilmadan foydalana olmaydigan foydalanuvchilar uchun juda muhim. Foydalanuvchilar veb-saytingizda Tab tugmasi yordamida harakatlana olishini va Enter yoki Spacebar tugmalari yordamida elementlar bilan o'zaro aloqada bo'lishini ta'minlang.

Sahifangizdagi elementlarning fokus tartibiga e'tibor bering. Fokus tartibi kontent orqali mantiqiy va intuitiv yo'lni kuzatishi kerak. Fokus tartibini boshqarish uchun tabindex atributidan foydalanishingiz mumkin, lekin odatda HTML'dagi elementlarning tabiiy tartibiga tayanish yaxshiroqdir. tabindex-dan faqat standart fokus tartibidagi muammolarni tuzatish uchun foydalaning.

Foydalanuvchilarga qaysi element hozirda fokuslanganligini ko'rsatish uchun vizual fokus indikatorlarini taqdim eting. Brauzerning standart fokus indikatori yetarli bo'lmasligi mumkin, shuning uchun CSS yordamida o'zingizning uslubingizni qo'shishni o'ylab ko'ring. Fokus indikatorining fon bilan yetarli kontrastga ega ekanligiga ishonch hosil qiling.

Misol:

/* CSS */
a:focus, button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

4. ARIA atributlari

ARIA (Accessible Rich Internet Applications) - bu yordamchi texnologiyalarga qo'shimcha semantik ma'lumot berish uchun HTML elementlariga qo'shilishi mumkin bo'lgan atributlar to'plamidir. ARIA atributlari dinamik kontent, murakkab vidjetlar va boshqa interaktiv elementlarning qulayligini oshirish uchun ishlatilishi mumkin.

Ba'zi keng tarqalgan ARIA atributlariga quyidagilar kiradi:

Misol:

<button aria-label="Dialog oynasini yopish" onclick="closeDialog()">X</button>
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Mening dialog oynasi</h2>
  <p>Dialog kontenti shu yerda...</p>
</div>

ARIA atributlaridan foydalanganda, ARIA foydalanish qoidalariga rioya qilish muhim:

5. Rang kontrasti

Matn va uning foni o'rtasida yetarli rang kontrasti mavjudligiga ishonch hosil qiling. Yetarli bo'lmagan rang kontrasti ko'rish qobiliyati past bo'lgan yoki rang ajrata olmaydigan foydalanuvchilar uchun matnni o'qishni qiyinlashtirishi mumkin.

WCAG oddiy matn uchun kamida 4.5:1 va katta matn (18pt yoki 14pt qalin) uchun 3:1 kontrast nisbatini talab qiladi. Veb-saytingiz ushbu talablarga javob berishini tekshirish uchun rang kontrasti tekshiruvchilaridan foydalanishingiz mumkin. WebAIM Contrast Checker kabi ko'plab bepul onlayn vositalar mavjud.

Misol:

/* CSS */
body {
  color: #333; /* To'q kulrang matn */
  background-color: #fff; /* Oq fon */
}

(Ushbu misol 7:1 kontrast nisbatiga ega, bu WCAG talablariga javob beradi.)

Ma'lumotni yetkazishning yagona usuli sifatida rangdan foydalanishdan saqlaning. Rang ajrata olmaydigan foydalanuvchilar turli ranglarni farqlay olmasligi mumkin. Rangning ma'nosini kuchaytirish uchun matn yorliqlari yoki piktogrammalar kabi qo'shimcha belgilardan foydalaning.

6. Shakllar va yorliqlar

Shakl elementlarini to'g'ri yorliqlash qulaylik uchun juda muhim. Har bir shakl kiritish maydoni bilan matn yorlig'ini bog'lash uchun <label> elementidan foydalaning. <label> elementining for atributi mos keladigan kiritish elementining id atributiga mos kelishi kerak.

Misol:

<label for="name">Ism:</label>
<input type="text" id="name" name="name">

Murakkab shakllar uchun bog'liq shakl boshqaruvlarini guruhlash uchun <fieldset> va <legend> elementlaridan foydalanishni o'ylab ko'ring. Bu foydalanuvchilarga har bir boshqaruv guruhining maqsadini tushunishga yordam beradi.

Foydalanuvchilar shaklni to'ldirishda xatolikka yo'l qo'yganda, aniq va qisqa xato xabarlarini taqdim eting. Xato xabarlari mos keladigan shakl maydoni yaqinida ko'rsatilishi va xatoni qanday tuzatish bo'yicha ko'rsatma berishi kerak.

Qaysi shakl maydonlari majburiy ekanligini ko'rsatish uchun required atributidan foydalaning. Bu foydalanuvchilarga to'liq bo'lmagan shakllarni tasodifan yuborishdan saqlanishga yordam beradi.

7. Multimedia qulayligi

Videolar va audio yozuvlar kabi multimedia kontenti nogironligi bo'lgan foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling. Videolar uchun subtitrlar va audio yozuvlar uchun transkriptlar taqdim eting. Subtitrlar videoning og'zaki mazmunini, shu jumladan har qanday muhim ovoz effektlari yoki fon shovqinini to'g'ri transkripsiya qilishi kerak.

Jonli video uchun real vaqtda subtitrlar xizmatidan foydalanishni o'ylab ko'ring. Ushbu xizmatlar real vaqtda subtitrlarni taqdim etishi mumkin, bu esa eshitish nuqsonlari bo'lgan foydalanuvchilarga kontentni kuzatib borish imkonini beradi. Ko'pgina video konferentsiya platformalari o'rnatilgan jonli subtitrlar xususiyatlarini taklif qiladi.

Videolar uchun audio tavsiflarni taqdim eting. Audio tavsiflar videoning vizual mazmunini hikoya qilib beradi, ekranda nima sodir bo'layotganini tasvirlaydi. Audio tavsiflar ko'zi ojiz yoki ko'rish qobiliyati past bo'lgan foydalanuvchilar uchun zarurdir.

O'ynatish, pauza va ovoz balandligini boshqarish kabi multimedia boshqaruvlari klaviatura orqali qulay ekanligiga ishonch hosil qiling.

8. Dinamik kontent va yangilanishlar

Veb-saytingizdagi kontent dinamik ravishda yangilanganda, foydalanuvchilarni o'zgarishlar haqida xabardor qilish muhim. Bu, ayniqsa, ekran o'quvchilaridan foydalanadigan foydalanuvchilar uchun muhim, chunki ular kontent o'zgarganidan bexabar bo'lishlari mumkin.

Ekran o'quvchilariga dinamik yangilanishlarni e'lon qilish uchun ARIA live regions'dan foydalaning. ARIA live regions - bu yangilanishlarni qabul qilish uchun belgilangan sahifa sohalari. Live region kontenti o'zgarganda, ekran o'quvchisi o'zgarishlarni foydalanuvchiga e'lon qiladi. Live regionni aniqlash uchun aria-live atributidan foydalaning. aria-atomic va aria-relevant atributlari ekran o'quvchisining o'zgarishlarni qanday e'lon qilishini sozlash uchun ishlatilishi mumkin.

Misol:

<div aria-live="polite">
  <p id="status-message">Yuklanmoqda...</p>
</div>

<script>
  // Ma'lumotlar yuklanganda holat xabarini yangilang
  function updateStatus(message) {
    document.getElementById("status-message").textContent = message;
  }
</script>

Ushbu misolda aria-live="polite" atributi ekran o'quvchisi <div> elementining kontentidagi o'zgarishlarni e'lon qilishi kerakligini, lekin foydalanuvchining joriy vazifasini to'xtatmasligi kerakligini bildiradi. updateStatus() funksiyasi <p> elementining kontentini yangilaydi, bu esa ekran o'quvchisini yangi holat xabarini e'lon qilishga undaydi.

9. Qulaylikni testlash

Har qanday muammolarni aniqlash va tuzatish uchun veb-saytingizni qulaylik uchun muntazam ravishda sinab ko'ring. Qulaylikni sinash uchun foydalanishingiz mumkin bo'lgan turli xil vositalar va usullar mavjud.

Brauzerdan tashqaridagi qulaylik

Ushbu qo'llanma asosan brauzer kontekstidagi veb-qulaylikka qaratilgan bo'lsa-da, qulaylik vebdan tashqariga ham kengayishini yodda tutish muhimdir. Boshqa raqamli sohalarda ham qulaylikni hisobga oling, masalan:

Xulosa

Veb-qulaylik frontend dasturlashning muhim jihatidir. Ushbu qo'llanmada keltirilgan tamoyillar va usullarga rioya qilish orqali siz barcha foydalanuvchilar uchun, ularning qobiliyatlaridan qat'i nazar, inklyuziv va qulay veb-tajribalarni yaratishingiz mumkin. Yodda tutingki, qulaylik - bu doimiy jarayon. Veb-saytingizni muntazam ravishda sinab ko'ring va vaqt o'tishi bilan uning qulayligini ta'minlash uchun nogironligi bo'lgan foydalanuvchilardan fikr-mulohazalarni to'plang. Qulaylikka ustuvor ahamiyat berish orqali siz internetni hamma uchun yanada inklyuziv va adolatli joyga aylantirishingiz mumkin.

Qulaylikni qabul qilish orqali siz nafaqat qoidalarga rioya qilyapsiz; siz hamma uchun yaxshiroq veb qurmoqdasiz, o'z qamrovingizni kengaytirmoqdasiz va global miqyosda brendingiz obro'sini mustahkamlamoqdasiz.