DEV Community

Cover image for Accessibility (a11y)
Sarvar Yo'ldashov
Sarvar Yo'ldashov

Posted on

Accessibility (a11y)

#a11y #beginners #ux #webdev

🤔 Accessibility (a11y) nima?

Accessibility (qisqacha a11y — "a" va "y" orasida 11 ta harf bor) — veb-sayt, ilova yoki raqamli mahsulotni barcha odamlar foydalana olishi uchun moslashtirishdir. Bu, jumladan:

  • Ko'rish qobiliyati cheklangan foydalanuvchilar (ko'r yoki zaif ko'ruvchi)
  • Eshitish qobiliyati cheklangan foydalanuvchilar
  • Harakatlanish qiyinchiligi bor foydalanuvchilar (sichqonchadan foydalana olmaydigan)
  • Kognitiv yoki nevrologik farqlari bor foydalanuvchilar

Statistika:

  • Dunyo aholisining ~15% — ya'ni 1 milliarddan ortiq kishi — biron bir shakldagi nogironlikka ega.
  • AQShda ADA (Americans with Disabilities Act) qonuniga ko'ra, accessibility — qonuniy majburiyat.
  • Yaxshi accessibility = yaxshi UX = ko'proq foydalanuvchi = ko'proq daromad.

📏 WCAG — Asosiy Standart

WCAG (Web Content Accessibility Guidelines) — W3C tomonidan ishlab chiqilgan asosiy standart. Hozirgi eng ko'p ishlatiladigan versiya: WCAG 2.1 (WCAG 2.2 ham mavjud).

WCAG 4 ta asosiy tamoyilga asoslanadi — POUR:

Tamoyil Ma'nosi Misol
Perceivable (Idrok etish) Kontent barcha sezgilar orqali idrok etilishi kerak Rasmlar uchun alt matni
Operable (Boshqarish) Interfeys klaviatura va boshqa qurilmalar bilan boshqarilishi kerak Tab navigatsiya
Understandable (Tushunish) Kontent va interfeys tushunarli bo'lishi kerak Aniq xato xabarlari
Robust (Mustahkamlik) Kontent turli texnologiyalar bilan ishlab chiqilishi kerak Semantik HTML

WCAG Darajalari:

  • Level A — Minimal talablar (bo'lishi SHART)
  • Level AA — Standart muvofiqlik (ko'pchilik saytlar maqsad qiladi)
  • Level AAA — Maksimal muvofiqlik (ihtiyoriy, lekin ideal)

🏗️ Semantik HTML — Eng Muhim Asos

Accessibility ning 80% i to'g'ri semantik HTML yozishdan boshlanadi.

❌ Noto'g'ri: 

<div class="header">
  <div class="nav">
    <div class="nav-item" onclick="goHome()">Bosh sahifa</div>
  </div>
</div>
<div class="main-content">
  <div class="title">Maqola sarlavhasi</div>
  <div class="text">Kontent...</div>
</div>
Enter fullscreen mode Exit fullscreen mode

✅ To'g'ri: 

<header>
  <nav>
    <a href="/">Bosh sahifa</a>
  </nav>
</header>
<main>
  <article>
    <h1>Maqola sarlavhasi</h1>
    <p>Kontent...</p>
  </article>
</main>
Enter fullscreen mode Exit fullscreen mode

Nima uchun muhim? Screen reader (ekran o'quvchi) dasturlar semantik teglarni tushunadi va foydalanuvchilarga navigatsiya qilishda yordam beradi.

⌨️ Klaviatura Navigatsiyasi

Barcha funksionallik faqat klaviatura bilan ishlatilishi kerak. Sichqoncha ishlatmaydigan (yoki ishlatamolmaydigan) juda ko'p foydalanuvchilar bor.

Asosiy klaviatura tugmalari:

  • Tab — Keyingi fokuslanuvchi elementga o'tish
  • Shift + Tab — Oldingi elementga qaytish
  • Enter / Space — Elementni faollashtirish
  • Arrow keys — Menu, dropdown, slider ichida navigatsiya
  • Escape — Modal, popup yoki menuni yopish

Focus ko'rinishini o'chirmang! 

/* ❌ HECH QACHON buni qilmang */
* {
  outline: none;
}

/* ✅ Custom stil bilan almashtiring */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  border-radius: 4px;
}
Enter fullscreen mode Exit fullscreen mode

Tab Order 

<!-- tabindex="0" — tabiiy tartibga qo'shish -->
<div tabindex="0" role="button">Bosiluvchi div</div>

<!-- tabindex="-1" — fokus oladi, lekin Tab bilan emas -->
<div tabindex="-1" id="modal-content">Modal</div>

<!-- tabindex="1+" — FOYDALANMANG! Tartibni buzadi -->
Enter fullscreen mode Exit fullscreen mode

🖼️ Rasmlar uchun Alt Matn

Har bir <img> tegida alt atributi bo'lishi shart.

<!-- ✅ Mazmunli rasm -->
<img src="team.jpg" alt="Kompaniya jamoasi ofisda kuzgi anjuman o'tkazmoqda">

<!-- ✅ Dekorativ rasm (bo'sh alt) -->
<img src="divider.png" alt="">

<!-- ✅ Funksional rasm (tugma ichidagi) -->
<img src="search-icon.svg" alt="Qidirish">

<!-- ❌ Yomon alt matn -->
<img src="photo.jpg" alt="rasm">
<img src="photo.jpg" alt="photo.jpg">
<img src="photo.jpg"> <!-- alt yo'q -->
Enter fullscreen mode Exit fullscreen mode

Yaxshi alt matn yozish qoidalari:

  1. Rasmning mazmunini tasvirlang, ko'rinishini emas
  2. "rasm", "surat", "icon" deb boshlamasl — screen reader buni o'zi aytadi
  3. 125 belgidan qisqaroq qiling
  4. Dekorativ rasmlarda alt="" ishlating

🎨 Rang va Kontrast

Matn va fon o'rtasidagi kontrast nisbati yetarli bo'lishi kerak:

Matn turi AA darajasi AAA darajasi
Oddiy matn (< 18pt) 4.5:1 7:1
Katta matn (≥ 18pt yoki 14pt bold) 3:1 4.5:1
UI komponentlar 3:1 — 
/* ❌ Past kontrast */
.bad-text {
  color: #aaaaaa;
  background: #ffffff;
  /* Kontrast: 2.32:1 — YETARLI EMAS */
}

/* ✅ Yaxshi kontrast */
.good-text {
  color: #595959;
  background: #ffffff;
  /* Kontrast: 7.0:1 — AAA darajasi */
}
Enter fullscreen mode Exit fullscreen mode

Rang yagona ko'rsatkich bo'lmasin!

<!-- ❌ Faqat rang bilan farqlash -->
<span style="color: red">Xato</span>
<span style="color: green">Muvaffaqiyat</span>

<!-- ✅ Rang + Matn + Icon -->
<span class="error">
  <svg aria-hidden="true"><!-- × icon --></svg>
  Xato: Maydon to'ldirilishi shart
</span>
Enter fullscreen mode Exit fullscreen mode

🏷️ ARIA — Accessible Rich Internet Applications

ARIA atributlari semantik HTML ni kuchaytiradi, lekin uni almashtirmaydi.

ARIA ning asosiy qoidasi:

"No ARIA is better than bad ARIA" — Noto'g'ri ARIA ishlatish, umuman ishlatmaslikdan yomonroq.

Asosiy ARIA atributlari: 

<!-- role — elementning rolini belgilash -->
<div role="alert">Xato yuz berdi!</div>
<div role="dialog" aria-modal="true">Modal oyna</div>
<nav role="navigation" aria-label="Asosiy menyu">...</nav>

<!-- aria-label — ko'rinmas nom berish -->
<button aria-label="Qidirish oynasini yoping">×</button>

<!-- aria-labelledby — boshqa element nomini ishlatish -->
<h2 id="section-title">Sozlamalar</h2>
<section aria-labelledby="section-title">...</section>

<!-- aria-describedby — qo'shimcha tavsif -->
<input aria-describedby="password-hint" type="password">
<p id="password-hint">Kamida 8 ta belgi bo'lishi kerak</p>

<!-- aria-expanded — ochiq/yopiq holat -->
<button aria-expanded="false" aria-controls="dropdown">
  Menyu ▼
</button>

<!-- aria-hidden — screen reader dan yashirish -->
<svg aria-hidden="true" focusable="false">...</svg>

<!-- aria-live — dinamik o'zgarishlarni e'lon qilish -->
<div aria-live="polite" aria-atomic="true">
  3 ta natija topildi
</div>
Enter fullscreen mode Exit fullscreen mode

📋 Formalar

Formalar accessibility da eng ko'p muammo kelib chiqadigan joy.

<!-- ✅ To'g'ri forma -->
<form>
  <div class="form-group">
    <!-- Label har doim input bilan bog'langan bo'lishi kerak -->
    <label for="user-email">
      Email manzil
      <span aria-label="majburiy maydon">*</span>
    </label>
    <input
      type="email"
      id="user-email"
      name="email"
      required
      aria-required="true"
      aria-describedby="email-error"
      autocomplete="email"
    >
    <span id="email-error" role="alert" aria-live="polite">
      <!-- Xato xabari bu yerga dinamik kiritiladi -->
    </span>
  </div>

  <!-- Checkbox guruhlari -->
  <fieldset>
    <legend>Qiziqishlaringiz</legend>
    <label>
      <input type="checkbox" name="interest" value="tech"> Texnologiya
    </label>
    <label>
      <input type="checkbox" name="interest" value="design"> Dizayn
    </label>
  </fieldset>

  <button type="submit">Yuborish</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Forma validatsiyasi:

// ❌ Alert bilan xato ko'rsatish
alert("Iltimos, emailingizni kiriting");

// ✅ Inline xato + focus + aria
function showError(inputId, message) {
  const input = document.getElementById(inputId);
  const errorEl = document.getElementById(`${inputId}-error`);

  input.setAttribute('aria-invalid', 'true');
  errorEl.textContent = message;
  input.focus(); // Foydalanuvchini xatoga yo'naltirish
}
Enter fullscreen mode Exit fullscreen mode

🎬 Media: Video va Audio 

<!-- Video uchun captions (subtitrlar) -->
<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track
    kind="captions"
    src="captions-uz.vtt"
    srclang="uz"
    label="O'zbek"
    default
  >
  <track
    kind="captions"
    src="captions-en.vtt"
    srclang="en"
    label="English"
  >
</video>

<!-- Audio uchun transcript -->
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
</audio>
<details>
  <summary>Podcast transkripti</summary>
  <p>Bu yerda to'liq matn...</p>
</details>
Enter fullscreen mode Exit fullscreen mode

📱 Responsive va Zoom 

/* ✅ Viewport meta — foydalanuvchi zoom qila olsin */
/* HTML da: -->
/* <meta name="viewport" content="width=device-width, initial-scale=1"> */
/* user-scalable=no — QILMANG! -->

/* ✅ px emas, rem/em ishlating */
body {
  font-size: 1rem; /* 16px bazaviy */
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1rem;
  line-height: 1.6; /* Satr oralig'i */
}

/* ✅ 200% zoom da ham ishlasin */
@media (max-width: 320px) {
  /* Kichik ekranlar uchun moslash */
}
Enter fullscreen mode Exit fullscreen mode

🔗 Linklar va Tugmalar 

<!-- ❌ Yomon link matnlari -->
<a href="/about">Bu yerni bosing</a>
<a href="/docs">Ko'proq o'qing</a>
<a href="/download">Yuklab olish</a>

<!-- ✅ Mazmunli link matnlari -->
<a href="/about">Kompaniya haqida</a>
<a href="/docs">Accessibility hujjatlarini o'qing</a>
<a href="/report.pdf">
  Yillik hisobot (PDF, 2.4 MB)
</a>

<!-- Yangi tabda ochiluvchi linklar -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Tashqi sayt
  <span class="visually-hidden">(yangi oynada ochiladi)</span>
  <svg aria-hidden="true"><!-- external icon --></svg>
</a>

<!-- Link vs Button farqi -->
<!-- Link: sahifa yoki URL ga o'tish -->
<a href="/products">Mahsulotlar</a>

<!-- Button: harakat bajarish -->
<button type="button" onclick="openModal()">Modal ochish</button>
Enter fullscreen mode Exit fullscreen mode

🎭 Motion va Animatsiyalar

Ba'zi foydalanuvchilar uchun animatsiyalar bosh aylanishi yoki epilepsiya hujumlarini qo'zg'atishi mumkin.

/* Foydalanuvchi preferences ni hurmat qiling */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* JavaScript da ham */
Enter fullscreen mode Exit fullscreen mode 
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

if (!prefersReducedMotion) {
  // Animatsiyani ishga tushir
  element.classList.add('animate');
}
Enter fullscreen mode Exit fullscreen mode

🌙 Dark Mode va Color Scheme 

/* Foydalanuvchi system sozlamalarini hurmat qiling */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a2e;
    --text-color: #e0e0e0;
    --link-color: #7eb8f7;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --link-color: #0055cc;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
Enter fullscreen mode Exit fullscreen mode

Agar bu maqola foydali bo'lsa, ♥️ bosishni va ulashishni unutmang! Accessibility bo'yicha savollaringiz bo'lsa, kommentlarda yozing — javob beraman.

#Accessibility #a11y #WebDev #Frontend #UX

Top comments (0)