CSS'da accessibility: kontrast, fokus va yashirin matn

Qisqacha: HTML sahifaning ma'nosini beradi, CSS esa ko'rinishini — shuning uchun ko'rish bilan bog'liq accessibility CSS'ning zimmasida. Oddiy matn fonga nisbatan kamida 4.5:1 kontrastda, katta matn va interfeys qismlari (maydon chegarasi, fokus halqasi, ikonka) — 3:1. Fokus halqasi hech qachon o'chirilmaydi, faqat :focus-visible bilan almashtiriladi. Ekranda ko'rinmasin, lekin ekran o'quvchi o'qisin degan matn uchun display: none emas, .korinmas class'i ishlatiladi. Majburiy ranglar, 320 piksellik ekran va kattalashtirilgan matn oralig'ida ham sahifa buzilmasligi kerak.

Bu darsda

• Ikki rangning kontrastini WCAG formulasi bilan qo'lda hisoblaysiz va vosita natijasini tushunasiz.
• Matn, interfeys qismi va fokus halqasi uchun qaysi talab (4.5, 3:1) qo'yilishini ajratasiz; APCA nima ekanini bilasiz.
• Har qanday fonda ko'rinadigan ikki rangli fokus halqasini yozasiz.
• Yashirishning olti usulini solishtirib, qaysi biri ekran o'quvchidan ham yashirishini aytasiz.
• Sahifani majburiy ranglar, 320 piksel eni va WCAG matn oralig'i bilan sinaysiz.

Oldin bilishingiz kerak: UI/UX asoslari, Holat pseudo-klasslari, position, Foydalanuvchi afzalliklari, Rang nazariyasi, Kontent accessibility'si.

1. Nega bu kerak?

HTML qismida accessibility'ni to'rt odam orqali o'rgangan edik. Malika ko'zi ojiz, NVDA ekran o'quvchisi bilan ishlaydi. Bobur faqat klaviaturadan foydalanadi. Foydalanuvchi afzalliklari darsida Dilnoza opa qo'shildi — u Windows'da kontrast mavzusini yoqqan. To'rtinchisi — har birimiz: quyosh tushib turgan ko'chada, telefon yorqinligi past holda «Bahor» menyusini o'qiyapmiz.

Endi savol: shu odamlarning muammosini kim hal qiladi — HTML'mi yoki CSS'mi? Accessibility nima darsidagi WebAIM jadvalini eslang. Eng ko'p uchraydigan xato — past kontrastli matn, sahifalarning 83.9 foizida. U yerda "CSS qismida" deb qoldirgan edik. Sabab oddiy: rangni CSS beradi. HTML qanchalik to'g'ri bo'lmasin, color: #bbb bitta qatori matnni o'qib bo'lmas qiladi.

CSS'ning accessibility'dagi to'rt vazifasi:

Bu dars — UI/UX asoslari davomi. U yerda "qulay" degan so'zni holatlar bilan ochgan edik. Bu yerda uni o'lchanadigan raqamlarga aylantiramiz.

2. Kontrastni hisoblash

2.1 Nisbat qayerdan chiqadi

Ranglar 1 darsida kontrastni DevTools'dan o'qigan edik. Endi uning ichiga qaraymiz — shunda vosita nimani o'lchayotganini tushunasiz va noto'g'ri natijani sezasiz.

Nisbiy yorqinlik (relative luminance) — rangning ko'zga qanchalik yorug' ko'rinishi, 0 (qora) dan 1 (oq) gacha son. U uch qadamda hisoblanadi. Formulalarni yodlash shart emas — ularni vosita hisoblaydi. Maqsad — vosita ichida nima bo'layotganini bir marta ko'rish:

1. Har kanal (R, G, B) 255 ga bo'linadi: 0 dan 1 gacha son chiqadi.
2. Har son "chiziqli" ko'rinishga o'tkaziladi: ((c + 0.055) ÷ 1.055)^2.4 (juda kichik qiymatlar uchun oddiyroq c ÷ 12.92). Ekran ranglari yorug'likni to'g'ri chiziq bo'yicha emas, egri bo'yicha kodlaydi — bu qadam uni to'g'rilaydi.
3. Kanallar og'irlik bilan qo'shiladi: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. Yashilning og'irligi eng katta — ko'z yashilga eng sezgir.

Kontrast esa ikki yorqinlikning nisbati:

kontrast = (L_och + 0.05) ÷ (L_toq + 0.05)

0.05 — atrofdagi yorug'likning taxminiy ulushi. U nolga bo'lishning oldini ham oladi. Natija 1:1 (bir xil rang) dan 21:1 (oq ustida qora) gacha.

2.2 «Bahor» yashili — qo'lda

#2f6b3a qaymoq fonda (#fffaf0). Formula bilan Node'da hisobladik, colorjs.io kutubxonasi bilan solishtirdik:

(0.9592 + 0.05) ÷ (0.1143 + 0.05) = 1.0092 ÷ 0.1643 ≈ 6.14

Demak 6.1:1 — CSS o'zgaruvchilari darsidagi palitra jadvalidagi raqamning o'zi. Diqqat qiling: qaymoq fon sof oq emas, uning L i 1 emas, 0.9592. Shu kichik farq ba'zi ranglarni talabdan pastga tushiradi.

Diqqat: WCAG 2 da nisbat yaxlitlanmaydi. 4.49:1 — o'tmaydi, garchi "4.5 ga yaqin" bo'lsa ham. Vosita "4.5" ko'rsatsa, to'liq sonini tekshiring.

2.3 Talablar jadvali

"Katta matn" — CSS piksellarida: 18pt = 24px, 14pt qalin = 18.66px. Non-text Contrast mezoni (1.4.11) — matn emas, lekin tushunish uchun kerak bo'lgan hamma narsa: maydon chegarasi, checkbox belgisi, fokus halqasi, ma'no beruvchi ikonka.

Endi «Bahor» ranglari va ikki "tanish" kulrangni qaymoq fonda ko'ramiz:

<style>
  body {
    margin: 0;
    padding: 1rem;
    background: #fffaf0;
    font-family: system-ui, sans-serif;
  }
  ul {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: 0.25rem;
    border-block-end: 1px dashed #5b6660;
  }
  b { font-variant-numeric: tabular-nums; }
</style>
<ul role="list">
  <li style="color:#1f2a24">Asosiy matn #1f2a24 <b>14.27 ✅</b></li>
  <li style="color:#2f6b3a">Asosiy yashil #2f6b3a <b>6.15 ✅</b></li>
  <li style="color:#5b6660">Ikkinchi matn #5b6660 <b>5.74 ✅</b></li>
  <li style="color:#b4461a">Narx #b4461a <b>5.27 ✅</b></li>
  <li style="color:#767676">Kulrang #767676 <b>4.37 ❌</b></li>
  <li style="color:#bbbbbb">Och kulrang #bbb <b>1.84 ❌</b></li>
</ul>

Nimaga qarang: pastki ikki qator ko'zga ham xiraroq. #767676 — internetda "oq fonda 4.5 dan o'tadigan eng och kulrang" deb tarqalgan. Oq fonda u haqiqatan 4.54. Lekin qaymoq fonda — 4.37, talabdan past. Kontrast — juftlikning xususiyati, rangning emas. Namoyishda style atributi faqat qisqalik uchun; «Bahor»da ranglar tokenlardan keladi.

Accessibility'ni tekshirish darsidagi style="color: #bbb" ning javobi ham shu yerda: oq fonda 1.92:1. Lighthouse unga shuning uchun xato bergan edi.

2.4 Kontrast qayerda "aldaydi"

• Rasm yoki gradient ustidagi matn. Fon bitta rang emas — kontrast eng yorug' nuqtada o'lchanadi. Yechim: matn ostiga to'q, yarim shaffof qatlam (Kontent accessibility'si darsidagi maslahat).
• Shaffof rang. rgb(31 42 36 / 60%) ning kontrasti ostidagi fonga bog'liq. Vosita avval ranglarni aralashtiradi, keyin o'lchaydi (Ranglar 1).
• Qorong'i rejim. Har juft ikkinchi marta tekshiriladi. «Bahor»ning #b4461a narxi qorong'i fonda (#16301b) atigi 2.60:1 bo'lardi — shuning uchun qorong'i rejimda u --gisht-300 ga almashadi (6.12:1, Qorong'i rejim).
• Placeholder. Chrome'da uning standart rangi — matn rangining shaffof varianti; o'z fon rangingizda o'lchang.

Tekshirib ko'ring: Dizayner narx uchun 20px qalin, #8a8f8c kulrang tanladi. Qaymoq fonda kontrasti 3.16:1. O'tadimi?

2.5 APCA — kelajakdagi usul

WCAG 2 formulasining ma'lum kamchiligi bor: u qorong'i ranglar juftida kontrastni oshirib ko'rsatadi, shrift o'lchami va qalinligini esa faqat "katta/kichik" deb ikkiga bo'ladi. APCA (Accessible Perceptual Contrast Algorithm) — Andrew Somers ishlab chiqqan yangi usul. U ko'z idrokiga yaqinroq hisoblaydi va natijani Lc (lightness contrast — yorqinlik kontrasti) bilan beradi: taxminan 0 dan 106 gacha. Qorong'i fonda och matn manfiy son bilan chiqadi.

«Bahor» juftlarini apca-w3 kutubxonasi bilan hisobladik:

APCA'ning "Bronze" darajasida asosiy matn uchun Lc 75 eng kami (90 — afzal), boshqa matn uchun Lc 60. Ko'ryapsizmi: narx WCAG'dan bemalol o'tadi, APCA'da esa asosiy matn uchun biroz kam. Narx — qisqa matn, unga Lc 60 yetadi. Qorong'i rejimdagi yashil ham shunday.

Bugungi holat muhim: APCA standart emas. WCAG 3 hali ishchi qoralama (Working Draft), va 2026-yil holatida unda kontrast algoritmi "hali aniqlanmagan" deb yozilgan. Qonun, tender va auditlar WCAG 2.2 ni talab qiladi. Kursdagi qaror: WCAG 2 — majburiy, APCA — qo'shimcha tekshiruv, ayniqsa qorong'i rejim va kichik shriftlar uchun. APCA raqamlarini yodlash shart emas — "shunday usul bor va u hali standart emas" deb bilsangiz yetadi.

3. Interfeys qismlari: 3:1

3.1 Maydon chegarasi

Bo'sh forma maydoni — faqat chegarasidan iborat. Chegara ko'rinmasa, maydon ham yo'q:

<style>
  body {
    padding: 1rem;
    background: #fffaf0;
    font-family: system-ui, sans-serif;
  }
  p { display: grid; gap: 0.25rem; max-width: 18rem; }
  input {
    padding: 0.5rem;
    border-radius: 0.25rem;
    font: inherit;
    background: #fffaf0;
  }
  .och { border: 1px solid #c9d6cf; }
  .yaxshi { border: 1px solid #767676; }
</style>
<p><label for="t1">Telefon (chegara 1.44:1 ❌)</label>
  <input id="t1" class="och" type="tel"></p>
<p><label for="t2">Telefon (chegara 4.37:1 ✅)</label>
  <input id="t2" class="yaxshi" type="tel"></p>

Nimaga qarang: yuqori maydon deyarli ko'rinmaydi — faqat yorliq qolgan. Pastkisi aniq to'rtburchak. #767676 matn uchun qaymoqda yetmasdi 4.37-bob, chegara uchun esa 3:1 kifoya — bu yerda u to'g'ri tanlov. Ko'rdingizmi, bitta rang bir joyda xato, boshqa joyda to'g'ri.

#c9d6cf — portfolio'dagi karta chegarasi (Ranglar 1 darsida "bezak chizig'i, talab yo'q" degan edik). Karta matni o'zi o'qiladi, chegara bezak. Maydon esa chegarasiz ko'rinmaydi — talab shu yerda paydo bo'ladi.

3.2 Faqat rangga tayanmaslik

Rang nazariyasi darsida 1.4.1 mezonini ko'rgan edik: rang ma'lumot berishning yagona yo'li bo'lmasin. CSS'dagi eng ko'p uchraydigan buzilishlar:

• Matn ichidagi havola faqat rangi bilan ajraladi. Agar havola va matn orasidagi kontrast 3:1 dan kam bo'lsa, tagidagi chiziq shart. Eng oddiy qoida: matn ichidagi havolaning chizig'ini olib tashlamang (Matn bezagi).
• Xato maydon faqat qizil chegara bilan — UI/UX asoslari portfolio qadamida belgi va so'z qo'shgan edik.
• Grafik faqat ranglar bilan — chiziq turlari (punktir) va yorliqlar qo'shiladi.

4. Fokus halqasi

4.1 Uch qoida

Holat pseudo-klasslari va Chegara va soyalar darslarida asos bor: outline: none o'rnini bosuvchisiz — taqiq, halqa outline bilan chiziladi, box-shadow bilan emas. Endi WCAG 2.2 talablarini to'liq yig'amiz:

2.4.13 — AAA, ya'ni majburiy emas. Lekin u yaxshi halqaning aniq retsepti: halqa maydoni elementni o'rab turgan 2 CSS piksellik chiziqdan (element perimetri, ya'ni atrofi bo'ylab) kichik bo'lmasin. Fokus holati esa fokussiz holatdan kamida 3:1 farq qilsin. Kursdagi outline: 3px solid; outline-offset: 2px shu retseptdan kattaroq.

4.2 Bitta rang har fonda ishlamaydi

«Bahor» halqasi — --rang-asosiy-toq (#1a5d1a). Qaymoq fonda 7.69:1. Endi faraz qiling: aksiya banneri to'q yashil fonda (#16301b, qorong'i rejim foni bilan bir xil). U yerda xuddi shu halqa atigi 1.78:1 — deyarli ko'rinmaydi. Yechim — ikki rangli halqa: tashqi to'q chiziq va ichki och chiziq. Qaysi fonda turmasin, ikkalasidan biri ko'rinadi.

<style>
  body { margin: 0; font-family: system-ui, sans-serif; }
  section {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.25rem;
  }
  .och { background: #fffaf0; }
  .toq { background: #16301b; }
  a { padding: 0.25rem; border-radius: 0.25rem; }
  .och a { color: #2f6b3a; }
  .toq a { color: #fffaf0; }
  .bir {
    outline: 3px solid #1a5d1a;
    outline-offset: 2px;
  }
  .ikki {
    outline: 3px solid #1a5d1a;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fffaf0;
  }
</style>
<section class="och">
  <a class="bir" href="menyu/">Bir rang</a>
  <a class="ikki" href="menyu/">Ikki rang</a>
</section>
<section class="toq">
  <a class="bir" href="menyu/">Bir rang ❌</a>
  <a class="ikki" href="menyu/">Ikki rang ✅</a>
</section>

Nimaga qarang: yuqorida ikkala havola bir xil — to'q yashil halqa aniq, ichki qaymoq chiziq esa fon bilan qo'shilib ketgan. Pastda, to'q fonda, "Bir rang" ning halqasi fonga singib ketgan. "Ikki rang" da esa halqa ichida qaymoq chiziq bor: u to'q fonda 13.7:1. .bir va .ikki — fokusni "muzlatib" ko'rsatish uchun namoyish class'lari; haqiqiy kodda bu :focus-visible.

Qanday ishlaydi: box-shadow: 0 0 0 2px — surilmagan, xiralashmagan, 2 piksel "yoyilgan" soya. U element atrofini to'liq qoplaydi va outline-offset qoldirgan 2 piksellik bo'shliqni qaymoq rang bilan to'ldiradi.

Diqqat: Ichki chiziq — box-shadow, u majburiy ranglarda yo'qoladi (Chegara va soyalar). Shuning uchun asosiy chiziq doim outline bo'lsin. Chrome'da majburiy ranglarni emulyatsiya qilib tekshirdik: outline + soya variantida halqa saqlandi (soya none bo'ldi), faqat soyadan yasalgan halqa esa butunlay yo'qoldi.

«Bahor» uchun asos.css dagi qoida:

/* Fokus: tashqi to'q halqa + ichki fon rangidagi chiziq */
:focus-visible {
  outline: 3px solid var(--rang-asosiy-toq);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--rang-fon);
}

Qorong'i rejimda --rang-asosiy-toq och yashilga, --rang-fon to'q yashilga almashadi (Dizayn tokenlari) — halqa o'zi teskari bo'ladi.

4.3 Yopishqoq header halqani yopmasin

2.4.11 mezoni yangi va CSS'ga to'g'ridan-to'g'ri tegadi. «Bahor» header'i position: sticky (position). Bobur Tab bilan pastga yuradi, brauzer fokusdagi havolani ekranga suradi — lekin uni aynan header ostiga, ya'ni ko'rinmas joyga qo'yishi mumkin. Yechim Skroll xulqi darsidagi xususiyat:

html {
  scroll-padding-block-start: 5rem; /* header balandligidan ko'p */
}

Endi brauzer fokusni ham, #havola bilan o'tishni ham header ostidan 5rem pastda to'xtatadi.

Tekshirib ko'ring: Stajyor shunday yozdi: button:focus { outline: none; } button:hover, button:focus { background: #1a5d1a; } va "fon o'zgaryapti, demak fokus ko'rinadi" dedi. To'g'rimi?

5. Yashirin matn

5.1 "Yashirish" oltita ma'noda

position darsida .korinmas class'ini yozgan edik va har qatorini tushuntirgan edik. Endi to'liq manzara: CSS va HTML'da narsani yashirishning oltita usuli bor, va ular kimdan yashirishi bilan farq qiladi. Chrome'da oltitasini bir sahifada sinadik: har havolaning matni "Batafsil", ichidagi span esa " (osh)" — har xil usulda yashirilgan. So'ng accessibility daraxtidan havola nomini o'qidik:

Xulosa uch guruhga bo'linadi:

1. Hammadan yashirish — display: none, hidden, visibility: hidden. Yopiq menyu, tanlanmagan tab.
2. Faqat ekran o'quvchidan — aria-hidden="true". Bezak ikonka, takrorlangan matn.
3. Faqat ko'zdan — .korinmas. Ekran o'quvchi uchun qo'shimcha so'z, yashirin yorliq.

opacity: 0 ham faqat ko'zdan yashiradi, lekin joy egallaydi va ichidagi havola sichqoncha bilan bosiladi. Uni yashirish uchun ishlatmang. Yana bir xavfli usul — font-size: 0: Chrome'da nom ichida qoldi, lekin ba'zi ekran o'quvchilar bo'sh o'lchamli matnni o'tkazib yuboradi.

5.2 .korinmas qachon, aria-label qachon

Kontent accessibility'si darsida "Batafsil" havolasi uchun ikki yo'l ko'rgan edik: aria-label="Batafsil: osh" yoki ko'rinmas qo'shimcha matn. Qaysi biri?

• .korinmas — matn sahifaning bir qismi. Brauzer tarjimoni (Google Translate) uni boshqa tilga tarjima qiladi, nusxalashda u ham olinadi. Ko'p tilli saytda xavfsizroq.
• aria-label — elementning butun nomini almashtiradi: ichidagi matn endi o'qilmaydi. Tugma faqat ikonkadan iborat bo'lsa (Tugmalar tizimi darsida), aynan shu kerak.

Ikkala holatda bitta qoida bor — WCAG 2.5.3 (Label in Name): ekrandagi so'z nomning boshida tursin. "Batafsil (osh)" — to'g'ri. "Osh haqida batafsil" — ovoz bilan boshqaradigan odam "Batafsil ni bos" desa, dastur uni topmasligi mumkin.

5.3 Fokusga chiqadigan yashirin element

.korinmas ichida havola yoki tugma bo'lsa, Bobur unga Tab bilan keladi-yu, hech narsa ko'rmaydi — 2.4.7 buziladi. Shuning uchun skip link'ning yozuvi boshqacha: u :focus bo'lganda "ochiladi". Klaviatura va fokus darsidagi va'da — mana to'liq qoida (portfolio'da Yakuniy loyiha dan beri bor):

.korinmas,
.otish:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

Nega bu yerda :focus, :focus-visible emas? Skip link'ni sichqoncha bilan bosadigan odam kam. Lekin ekran o'quvchi foydalanuvchisi uni o'z buyrug'i bilan faollashtirishi mumkin — shunda ham u ko'rinsin. :focus har qanday fokusda ochadi.

Ro'yxatlar stili darsidagi va'dani ham shu yerda yopamiz: Safari list-style: none berilgan ro'yxatni VoiceOver'da "ro'yxat emas" deb o'qiydi. Menyu ro'yxatiga role="list" qo'shish — yashirish emas, balki CSS "yashirib qo'ygan" ma'noni qaytarish.

Tekshirib ko'ring: "Qo'ng'iroq qilish" tugmasida telefon ikonkasi va yozuv bor. Ikonka faqat bezak. Uni ekran o'quvchidan yashirish uchun <svg> ga qaysi atribut ("true" qiymati bilan) qo'shiladi? Atribut nomi:

6. Moslashuvchan sahifa

6.1 Majburiy ranglar

Foydalanuvchi afzalliklari darsida rejimni emulyatsiya qilib ko'rgan edik. Endi CSS yozishdagi tekshiruv ro'yxati:

• Fon bilan yasalgan tugma — border: 2px solid transparent yoki @media (forced-colors: active) ichida border bilan.
• Fokus — outline, soyaga tayanmang.
• SVG ikonka — fill: currentColor: rejim matn rangini almashtiradi, ikonka ham u bilan almashadi (SVG'ni CSS bilan stillash).
• Rang yagona signal bo'lgan joy (narx, xato) — chiziq, belgi yoki so'z.
• forced-color-adjust: none — faqat rangning o'zi ma'lumot bo'lgan joyda (rang namunasi).

Baseline ma'lumotiga ko'ra forced-colors — Baseline, 2025-yil martdan keng tarqalgan.

6.2 320 piksel va 400% kattalashtirish

WCAG 1.4.10 (Reflow): sahifa 320 CSS piksel enida gorizontal skrollsiz o'qilsin. Bu 1280 piksellik ekranni 400% kattalashtirish bilan bir xil. Ko'zi zaif odam brauzerni kattalashtiradi — u uchun sizning sahifangiz telefonga aylanadi. Mobile-first yozilgan sahifa (Mobile-first) ko'pincha o'zi o'tadi. Tekshiruv: DevTools'da 320 piksel eni, yoki Ctrl + + bilan 400%.

Istisno bor: jadval, xarita, kod bloki kabi ikki o'lchamli kontent. «Bahor» narxlar jadvali .jadval-orami ichida o'zi aylanadi — bu ruxsat etilgan (Jadvallar).

1.4.4 (Resize Text) — matn 200% kattalashganda hech narsa yo'qolmasin. Shrift rem/em da bo'lsa (O'lcham birliklari), bu o'zi ishlaydi.

6.3 Matn oralig'i

WCAG 1.4.12 (Text Spacing): foydalanuvchi o'z stilida qator balandligini 1.5 ga, harf oralig'ini 0.12em ga, so'z oralig'ini 0.16em ga, paragraf ostidagi masofani 2em ga oshirsa, hech narsa kesilmasin. Disleksiyali odamlar shunday o'qiydi. Qat'iy height shu yerda sinadi:

<style>
  body {
    padding: 1rem;
    font-family: system-ui, sans-serif;
  }
  /* WCAG 1.4.12 dagi sinov qiymatlari */
  * {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
  }
  p { margin: 0 0 1.5rem; }
  a {
    display: inline-block;
    box-sizing: border-box;
    width: 9rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background: #2f6b3a;
    color: #fffaf0;
    text-decoration: none;
    vertical-align: top;
  }
  .qattiq { height: 2.75rem; }
  .moslashuvchan { min-height: 2.75rem; }
</style>
<p>❌ height:
  <a class="qattiq" href="bron/">Stolni band qilish</a></p>
<p>✅ min-height:
  <a class="moslashuvchan" href="bron/">Stolni band qilish</a></p>

Nimaga qarang: sinov qiymatlari bilan "Stolni band qilish" 9rem ga sig'madi va ikki qatorga tushdi. Birinchi tugma 44 pikselda qotib qoldi: "qilish" so'zi yashil fondan tashqariga, oq sahifaga chiqib ketdi — qaymoq rangli matn oq fonda deyarli ko'rinmaydi. Ikkinchisi min-height bilan pastga cho'zildi, matn to'liq fonda. Qoida: matnli elementga height emas, min-height (yoki min-block-size) bering. Bu sinov qiymatlarini o'z sahifangizga vaqtincha qo'shib tekshirasiz.

Tekshirib ko'ring: Sahifa 1280 piksellik ekranda chiroyli. Ko'zi zaif foydalanuvchi uni 400% kattalashtirdi. Nega mobile-first yozilgan sahifa bu sinovdan ko'pincha o'zi o'tadi?

6.4 Harakat — qisqa eslatma

prefers-reduced-motion — ham accessibility. To'liq qoidalar prefers-reduced-motion darsida: harakatni o'chirmang, almashtiring; ma'lumot beruvchi harakat (masalan, yuklanish) so'z bilan ham aytilsin; parallaks va avto-karusel — faqat ruxsat bo'lsa.

7. Audit tartibi

Accessibility'ni oxirida "qo'shib" bo'lmaydi, lekin tekshirishni tartibga solsa bo'ladi. Har sahifa uchun:

flowchart TD
  A["Lighthouse / axe"] --> B["Kontrast jadvali: yorug' va qorong'i"]
  B --> C["Tab bilan butun sahifa"]
  C --> D["Majburiy ranglar"]
  D --> E["320px va 200% matn"]
  E --> F["Matn oralig'i sinovi"]
  F --> G["Ekran o'quvchi bilan bitta yo'l"]

Nimaga qarang: avtomatik vosita — faqat birinchi qadam. Accessibility'ni tekshirish darsida aytganimizdek, u muammolarning bir qismini topadi. Klaviatura (Tab) bilan yurish vizual tartib va DOM tartibi mosligini ham tekshiradi — align-self va order darsidagi order xavfi aynan shu qadamda chiqadi. Fokus sahifada "sakrab" yursa, sabab ko'pincha order, grid-area yoki flex-direction: row-reverse.

8. Ko'p uchraydigan xatolar

8.1 Oq fonda tekshirib, boshqa fonga qo'yish

Rang palitra sahifasida tekshirilgan, lekin karta foni boshqa. Tuzatish: kontrast har juft uchun, haqiqiy fonda o'lchanadi.

8.2 4.49 — "deyarli 4.5"

Tuzatish: yaxlitlanmaydi. Chegaradagi rangni bir qadam to'qroq oling.

8.3 outline: none + soya

Halqa oddiy rejimda bor, majburiy ranglarda yo'q. Tuzatish: asosiy chiziq outline, soya — faqat qo'shimcha.

8.4 display: none bilan "ekran o'quvchi uchun" matn

Matn hech kimga yetmaydi. Tuzatish: .korinmas.

8.5 .korinmas ichida havola

Fokus ko'rinmas joyga tushadi. Tuzatish: :not(:focus) bilan ochiladigan variant yoki yashirmaslik.

8.6 Tugmaga qat'iy height

Matn kattalashganda qirqiladi. Tuzatish: min-height va vertikal padding.

9. Mashqlar

1-mashq (oson): kontrastni hisoblang

Oq fon (#ffffff, L = 1) va #595959 rangli matn. #595959 ning har kanali 89. Chiziqli qiymati: 0.0999. Kontrastni hisoblang. Oddiy matn uchun AA va AAA dan o'tadimi?

Ishora: "Nisbat qayerdan chiqadi" bo'limidagi formula; kulrangda uchala kanal bir xil, demak L = 0.0999.

(1 + 0.05) ÷ (0.0999 + 0.05) = 1.05 ÷ 0.1499 ≈ 7.00

2-mashq (o'rta): to'q fondagi havolalar

Faraz qiling: «Bahor» footer'i qorong'i rejim fonida (#16301b), havolalari #8fd19e. Uchta savol:

1. Havola matni o'qiladimi (kontrast 8.00:1)?
2. Havolalar oddiy matn (#fffaf0, 13.71:1) ichida chiziqsiz. Rang farqi yetarlimi? Havola va matn orasidagi kontrastni hisoblang: #8fd19e ning L i 0.5391, #fffaf0 niki 0.9592.
3. Fokus halqasi qanday bo'lsin?

Ishora: "Faqat rangga tayanmaslik" bo'limidagi 3:1 qoidasi; "Bitta rang har fonda ishlamaydi" bo'limi.

3-mashq (qiyin): yashirin, lekin fokusga chiqadigan "Yuqoriga" havolasi

«Bahor» menyu sahifasining oxirida "Yuqoriga" havolasi bor. Dizayner uni ekranda ko'rishni xohlamaydi, faqat klaviatura bilan kelganda chiqsin — pastki o'ng burchakda, --rang-asosiy fonda. Yozing:

1. Yashirish va ko'rsatish qoidalari.
2. Ko'ringanda fokus halqasi va bosish maydoni (kamida 44 piksel).
3. Majburiy ranglarda tugma shakli saqlansin.

Ishora: "Fokusga chiqadigan yashirin element" bo'limidagi .otish yozuvi; bosish maydoni — UI/UX asoslari. Namoyish uchun a[href="#bosh"] selektori (yangi class kerak emas).

a[href="#bosh"]:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

a[href="#bosh"]:focus {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  z-index: var(--qatlam-otish);
  min-block-size: 2.75rem;
  padding: 0.625rem 1rem;
  border: 2px solid transparent;
  border-radius: var(--burchak-m);
  background: var(--rang-asosiy);
  color: var(--rang-fon);
}

4-mashq: Portfolio qadami — accessibility auditi

Portfolio'ni shu darsdagi audit tartibi bilan tekshiring va topilganlarni tuzating:

1. Kontrast jadvali: --rang-matn, --rang-asosiy, --rang-ikkinchi, --rang-urgu — --rang-fon ga nisbatan, yorug' va qorong'i rejimda. Maydon chegarasi ham (brauzer standarti).
2. Majburiy ranglarda aloqa formasidagi tugma (border: 0) qanday ko'rinadi? Tuzating — oddiy rejimda bir piksel ham o'zgarmasin.
3. prefers-contrast: more da ikkinchi darajali matn asosiy matn rangiga o'tsin.
4. 320 piksel va matn oralig'i sinovidan o'tkazing.

Ishora: kontrast — DevTools rang tanlagichi yoki colorjs.io. Majburiy ranglar va prefers-contrast — Foydalanuvchi afzalliklari; Rendering panelida emulyatsiya. Qoidalar komponentlar.css ga, tugma qoidasi yoniga.

/* Majburiy ranglar: fon yo'qoladi — chegara tugma shaklini
   qaytaradi (CSS'da accessibility darsi) */
@media (forced-colors: active) {
  button {
    border: 2px solid ButtonText;
  }
}

/* Kontrast so'ralganda ikkinchi darajali matn ham to'liq */
@media (prefers-contrast: more) {
  :root {
    --rang-ikkinchi: var(--rang-matn);
  }
}

10. Real ishda

• Qonun va tender. Yevropa Ittifoqida European Accessibility Act 2025-yil iyunidan kuchga kirdi; u EN 301 549 standarti orqali WCAG AA ga tayanadi. Xalqaro mijozga ishlaydigan kompaniyalar auditni shartnomaga yozadi.
• Dizayn tizimlari tokenlarni kontrast bilan birga beradi: har rang juftining yonida "AA " belgisi. Yangi rang qo'shishdan oldin jadval yangilanadi.
• Vositalar: DevTools rang tanlagichi (kontrast chiziqlari bilan), Lighthouse va axe DevTools kengaytmasi, Windows'da haqiqiy kontrast mavzusi, NVDA. Figma'da ham kontrast plaginlari bor (Figma dasturchi uchun 1).
• Intervyuda so'raladi: "Kontrast qanday hisoblanadi?", "display: none va visually-hidden farqi?", "outline: none ning xavfi?", "Forced colors nima?".

Xulosa

• Kontrast — ikki yorqinlik nisbati, (L1 + 0.05) ÷ (L2 + 0.05); yaxlitlanmaydi va har juft haqiqiy fonda o'lchanadi.
• Talab: matn 4.5:1, katta matn va interfeys qismlari 3:1; APCA — qo'shimcha, standart emas.
• Fokus: outline asosiy, :focus-visible bilan; ikki rangli halqa har fonda ko'rinadi; sticky header uchun scroll-padding.
• Yashirish uch xil: hammadan (display: none), ekran o'quvchidan (aria-hidden), ko'zdan (.korinmas).
• Sahifa majburiy ranglar, 320 piksel eni va matn oralig'i sinovida buzilmasin: shaffof chegara, min-height, rem.

Keyingi dars: Figma dasturchi uchun 1 — dizayner chizgan maketdan o'lcham, rang va shriftni to'g'ri o'qib olishni o'rganamiz.

Manbalar

• W3C: "Web Content Accessibility Guidelines (WCAG) 2.2" — 1.4.3, 1.4.10, 1.4.11, 1.4.12, 2.4.7, 2.4.11, 2.4.13, 2.5.3; "Understanding" sahifalari — w3.org/WAI/WCAG22
• W3C: "WCAG 3.0 Working Draft" — w3.org/TR/wcag-3.0
• APCA Readability Criterion: "Bronze Simple Mode" — readtech.org/ARC
• WebAIM: "The WebAIM Million" (2026) — webaim.org/projects/million
• MDN: "forced-colors", ":focus-visible", "outline" — developer.mozilla.org
• colorjs.io, apca-w3 (npm) — hisoblash uchun ishlatilgan kutubxonalar