Accessibility (a11y)

Sarvar Yo'ldashov — Thu, 26 Mar 2026 12:07:15 +0000

🤔 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>

✅ To'g'ri:

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

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;
}

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 -->

🖼️ 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 -->

Yaxshi alt matn yozish qoidalari:

Rasmning mazmunini tasvirlang, ko'rinishini emas
"rasm", "surat", "icon" deb boshlamasl — screen reader buni o'zi aytadi
125 belgidan qisqaroq qiling
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 */
}

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>

🏷️ 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>

📋 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>

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
}

🎬 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>

📱 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 */
}

🔗 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>

🎭 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 */

const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

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

🌙 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);
}

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

Imposter sindromi

Sarvar Yo'ldashov — Wed, 25 Mar 2026 11:36:41 +0000

Imposter sindromi nima ? - bu sindrom inson o'z muvaffaqiyatlariga qaramay, o'zini "soxta", "bilimsiz" yani o'zini past nazarda bilish imposter sindromi hisoblanadi.
Ya'ni: Siz yaxshi ish qilasiz, muvaffaqiyatlarga erishasiz balki erishgansiz, lekin ichingizda "men bunga loyiq emasman" yoki "men bunga loyiq emasdim" degan qo'rquv bo'ladi.

🧠 Asosiy belgilar (Symptoms)

O‘zini past baholash “Men shunchaki omadli bo‘ldim” “Bu mening qobiliyatim emas”
Muvaffaqiyatni inkor qilish Natijani omad, tasodif yoki boshqa odamlarga bog‘lash
Doimiy qo‘rquv “Bir kuni hamma mening aslida hech narsa bilmasligimni bilib qoladi”
Perfeksionizm Har narsani mukammal qilishga urinish Xatodan haddan tashqari qo‘rqish
Haddan tashqari ishlash (overworking) O‘zini isbotlash uchun ortiqcha ishlash

Imposter sindromi ko'pincha Talabalar, Junior yani yangi ish boshlagan dasturchilar, o'zini boshqalar bilan solishtiradiganlar, bazan yuqori natijaga erishgan odamlarda ham uchraydi.

Faktlarga qaraganda bu sindrom ko'pincha aynan aqilli va muvaffaqiyatli odamlarda uchraydi. Bu sindrom kelib chiqishining sabablari bolalikda tarbiyasiga bog'liq masalan juda qattiq talablar masalan eng zo'r bo'lishing kerak degan bosimlar, bolasini boshqalar bolasi bilan *solishtirishi *.

Hozirgi kunda bu sindromning kelib chiqishi esa keng tarqalmoqda bunga sabab Social media yani Instagram, yoki Telegram ijtimoiy tarmog'iga o'z erishgan natijalarini ommaga ko'rsatish yoki erishmagan narsasini ham erishdim deb ko'z ko'z uchun olib chiqishi ham boshqalarning Imposter sindromiga chalinishiga sabab bo'lib qolmoqda qisman.

Bu sindromdan qanday chiqib ketish mumkin?
Har bir erishgan yutuqingizni yozib boring, atrofingizdagi do'stlaringiz yaqinlaringiz va hamkasblaringiz bilan fikr almashing balkim ular sizdan kuchli yani siz ularni juda ham o'zingizdan kuchli ko'rayotgan bo'lsangiz unday emasdir, o'zingizni tanqid qilishni kamaytiring, birovlar bilan o'zingizni taqqoslashni to'xtating siz boshqalar bilan emas kechagi o'zingiz bilan raqobat qilyapsiz shuni unutmang!

Forem: Sarvar Yo'ldashov

Accessibility (a11y)