Kontent accessibility'si: oddiy til, sarlavhalar, havola matni va rang

Qisqacha: Kod mukammal bo'lsa ham, matnning o'zi tushunarsiz bo'lsa, sayt baribir hamma uchun ochiq emas. Kontent accessibility'si — oddiy til, mazmunli sarlavha va havola matni ("bu yerni bosing" emas), rasm o'rniga haqiqiy matn. Rang yagona belgi bo'lmaydi, avtomatik ovoz, harakat va qat'iy vaqt limitidan qochiladi. Bu qoidalarni dasturchi ham, sayt matnini yozadigan har kim ham bilishi kerak.

Bu darsda

• Matnni oddiy tilga o'gira olasiz va o'zbek saytlariga xos til tuzoqlarini taniysiz.
• Mazmunli sarlavha, sahifa nomi va havola matnini yoza olasiz.
• Rangni yagona belgi qilmasdan ma'lumot bera olasiz.
• Avtopley, harakat va vaqt limiti qachon muammo bo'lishini bilasiz.
• Sahifa matnini WCAG'ning kontentga oid mezonlari bo'yicha tekshira olasiz.

Oldin bilishingiz kerak: ARIA Authoring Practices, ARIA asoslari, Yaxshi alt matn yozish, Subtitrlar va media accessibility, Sarlavhalar va paragraflar.

1. Nega bu kerak?

O'tgan darslarda «Bahor» saytining kodini tartibga keltirdik: landmarklar, label'lar, fokus, ARIA. Validator — 0 xato. Keyin matnlarni choyxona egasi Jasur akaning o'zi yoza boshladi. Bir oydan keyin bosh sahifada shunday bo'lim paydo bo'ldi:

<!-- ❌ -->
<h2>🔥🔥🔥 AKSIYA 🔥🔥🔥</h2>
<img src="aksiya.jpg" alt="aksiya">
<p>Qizil rangda ko'rsatilgan taomlarga chegirma amalga
oshiriladi. Batafsil <a href="aksiya.html">bu yerda</a>.</p>

Validator bu yerda xato topmaydi — alt bor, havola bor, sarlavha bor. Lekin Malika (NVDA bilan ishlaydigan doimiy mehmonimiz) nima eshitadi? "Olov, olov, olov, aksiya..." Qaysi taomlar qizil? Rasmda nima yozilgan? "Bu yerda" qayerga olib boradi?

Kod — idish, kontent — ovqat. Idish toza, lekin ovqat sho'r bo'lsa, mehmon baribir yemaydi. Bu darsda "ovqat"ni to'g'rilaymiz.

Yana bir muhim fakt: kontentni ko'pincha dasturchi yozmaydi. Menejer, marketolog, SMM mutaxassisi yozadi. Dasturchining vazifasi — qoidalarni bilish, ularni jamoaga tushuntirish va boshqaruv panelida (admin sahifada) to'g'ri maydonlarni qilish. Masalan, rasm yuklanganda alt maydonini majburiy qilish.

2. Oddiy til

2.1 Kim uchun?

Oddiy til (plain language) — o'quvchi birinchi o'qishda tushunadigan, kerakli ma'lumotni tez topadigan va unga amal qila oladigan matn. U quyidagilarga ayniqsa kerak:

• kognitiv (fikrlash, xotira, diqqat bilan bog'liq) qiyinchiligi bor odamlar;
• disleksiya — harflarni o'qish qiyin bo'lgan holat — bor odamlar;
• matnni ikkinchi tilda o'qiyotganlar: Toshkentdagi rusiyzabon oila, qoraqalpoq yoki tojik tilli mehmon;
• keksalar va shoshib, telefonda o'qiyotgan har kim;
• ekran o'quvchi foydalanuvchilari — uzun gapni quloq bilan eslab qolish ko'z bilan o'qishdan qiyinroq.

WCAG'da buning mezoni bor: 3.1.5 Reading Level (o'qish darajasi, AAA). Matn o'rta maktab (taxminan 7–9-sinf) darajasidan qiyin bo'lsa, soddaroq variant berilishi kerak. AAA — eng yuqori daraja, majburiy emas. Lekin oddiy til hammaga foyda beradi, shuning uchun uni odat qiling.

2.2 Qoidalar

Qisqartmani birinchi marta ochib yozing yoki abbr bilan tushuntiring: "QQS (qo'shilgan qiymat solig'i)".

2.3 O'zbek saytlariga xos tuzoqlar

Idoraviy til. O'zbek saytlarida eng keng tarqalgan kasallik — hujjat tili: "amalga oshiriladi", "... maqsadida", "... tomonidan", "ma'lum qilamiz". Taqqoslang:

❌ Buyurtmani rasmiylashtirish mijoz tomonidan telefon orqali
   amalga oshirilishi maqsadga muvofiqdir.
✅ Buyurtma berish uchun qo'ng'iroq qiling: +998 90 000 00 00.

Aralash so'zlar. "Dostavka", "skidka", "zakaz" — ko'pchilik tushunadi, lekin ekran o'quvchining o'zbekcha ovozi ularni buzib o'qiydi. Tarjimon ham adashadi. O'zbekchasini yozing: "yetkazib berish", "chegirma", "buyurtma".

Apostrof. o', oʻ va o’ ko'zga bir xil, kompyuter uchun esa uch xil belgi. Maxsus belgilar darsida ko'rgandik. Sahifada aralash yozilsa, Ctrl + F bilan "choyxona o'rni" ni qidirgan odam uni topmaydi. Ba'zi ekran o'quvchilar, sozlamasiga qarab, g'ayrioddiy belgini "apostrof" deb ovoz chiqarib o'qiydi. Bitta belgini tanlang va butun saytda faqat shuni ishlating.

Lotin va kirill. Sayt ikki yozuvda bo'lsa — ularni bitta sahifada aralashtirmang. Har biri alohida sahifa, o'z lang qiymati bilan: lang="uz-Latn" va lang="uz-Cyrl". Sahifalar orasidagi bog'lanish — qidiruv tizimlari uchun meta teglar darsidagi hreflang bilan.

Maslahat: Ingliz tili uchun matn darajasini o'lchaydigan dasturlar bor (masalan, Hemingway Editor). O'zbek tili uchun hozircha bunday vosita yo'q. Eng ishonchli test — matnni ovoz chiqarib o'qing yoki 13 yoshli ukangizga bering. U qayerda to'xtab qolsa — o'sha joyni qayta yozing.

Tekshirib ko'ring: Quyidagi gapni oddiy tilga o'giring: "Choyxona ma'muriyati tomonidan 1-oktabrdan boshlab ish vaqtiga o'zgartirishlar kiritilishi ma'lum qilinadi."

3. Sarlavhalar va sahifa nomi

3.1 Sarlavha — mundarija

Sarlavhalar va paragraflar darsida ko'rgandik: ekran o'quvchi foydalanuvchilari uzun sahifada birinchi navbatda sarlavhalar bo'ylab yuradi (NVDA'da H tugmasi). WebAIM tashkilotining ekran o'quvchi foydalanuvchilari orasidagi so'rovlarida 10 kishidan taxminan 7 tasi shunday qilishini aytadi.

Shuning uchun sarlavha mazmunli bo'lishi kerak — faqat o'zi o'qilganda ham tushunarli. WCAG buni 2.4.6 Headings and Labels (AA) mezonida talab qiladi.

Sarlavhalar testi: sahifadagi hamma sarlavhani ketma-ket o'qing — boshqa hech narsani emas. Sahifa nima haqida va unda nima borligi tushunildimi? Tushunilmasa, sarlavhalarni qayta yozing. Sarlavhalar ro'yxatini ko'rsatadigan brauzer kengaytmalari bor (masalan, HeadingsMap) — ular bilan bu test bir daqiqa oladi.

3.2 Sahifa nomi (title)

Ekran o'quvchi yangi sahifa ochilganda birinchi bo'lib title ni o'qiydi. Brauzerda o'nta tab ochiq bo'lsa, ko'radigan odam ham ularni title bo'yicha ajratadi. WCAG: 2.4.2 Page Titled (A).

Qoida: avval sahifaning o'ziga xos qismi, keyin sayt nomi.

<!-- ❌ hamma sahifada bir xil -->
<title>Choyxona «Bahor»</title>

<!-- ✅ -->
<title>Juma aksiyasi — Choyxona «Bahor»</title>

Formada xato bo'lsa, title boshida buni ham aytish mumkin — buni Qulay va accessible forma darsida qilgan edik.

4. Havola matni

4.1 "Bu yerni bosing" muammosi

Ekran o'quvchida sahifadagi hamma havolalar ro'yxatini ochish mumkin (NVDA'da Insert + F7). Malika menyu sahifasida shuni eshitadi:

Havolalar ro'yxati:
  Batafsil
  Batafsil
  Batafsil
  Bu yerni bosing

Qaysi "Batafsil" oshga, qaysi biri kabobga olib boradi? Ro'yxatda atrofdagi matn yo'q — faqat havolaning o'zi. Ko'radigan odam ham sahifani skanerlaganda ko'zi faqat havolalarga tushadi.

WCAG: 2.4.4 Link Purpose (In Context) (A) — havolaning maqsadi uning matnidan yoki atrofidagi gapdan tushunilsin. Yaxshi amaliyot — havola matni o'zi yolg'iz ham tushunarli bo'lsin.

4.2 Yaxshi havola matni

<!-- ❌ -->
<p>Osh retsepti bilan tanishish uchun
  <a href="osh.html">bu yerni bosing</a>.</p>

<!-- ✅ -->
<p><a href="osh.html">Osh retsepti</a> — oshpazimizdan
  qadamma-qadam.</p>

Qoidalar:

• Havola matni — manzil nomi yoki harakat: "Osh retsepti", "Stolni band qilish".
• Bir xil matn — bir xil manzil. Ikkita "Menyu" havolasi ikki xil sahifaga olib borsa, adashtiradi.
• Faylga havolada turi va hajmini yozing: "To'liq menyu (PDF, 1,2 MB)". Sekin internetdagi odam bosishdan oldin qaror qiladi.
• Uzun manzilni (https://example.com/menyu?kategoriya=...) havola matni qilmang: ekran o'quvchi uni harfma-harf o'qiydi.

4.3 Dizayn qisqa matn talab qilsa

Dizayner kartalarda faqat "Batafsil" so'zini ko'rishni xohlaydi. Uch yo'l bor:

1. Dizaynerni ko'ndirish — eng yaxshisi: "Osh haqida batafsil" ham chiroyli ko'rinadi.
2. Ko'rinmas qo'shimcha matn — ekranda "Batafsil", ekran o'quvchi uchun "Batafsil: osh". Bu CSS bilan qilinadi — CSS'da accessibility darsida.
3. aria-label — ARIA asoslari darsidan:

<a href="osh.html" aria-label="Batafsil: osh">Batafsil</a>

aria-label ko'rinadigan matnni o'z ichiga olishi shart. WCAG'ning 2.5.3 Label in Name (A) mezoni shuni talab qiladi. Nega? Ovoz bilan boshqaradigan odam ekranda "Batafsil" ni ko'radi va "Batafsil ni bos" deydi. Nom "Osh sahifasi" bo'lsa, dastur uni topmaydi.

Tekshirib ko'ring: Sahifada <a href="kabob.html" aria-label="Kabob narxlari">Batafsil</a> bor. Qaysi WCAG mezoni buzilgan va qanday tuzatiladi?

5. Rasm, emoji va media — chuqurroq

5.1 Menyu — rasm emas

O'zbekistondagi choyxona va kafelarning eng keng tarqalgan xatosi — menyuni telefonga suratga olib, JPG qilib saytga qo'yish. Muammolari:

• Ekran o'quvchi uchun bu bitta rasm. Butun menyuni alt ga yozish — noto'g'ri vosita.
• Telefonda kattalashtirsangiz, harflar xiralashadi.
• Google narxlarni o'qimaydi, brauzer tarjimoni tarjima qilmaydi.
• Narx o'zgardi — yangi surat kerak.

WCAG: 1.4.5 Images of Text (AA) — matnni rasm qilib ko'rsatmang (logotipdan boshqa hollarda). Yechim — oddiy HTML: ro'yxat yoki jadval. Chiroyli ko'rinishni CSS beradi.

5.2 Alt kontekstga bog'liq

Yaxshi alt matn darsidagi asosiy savol — "rasm bu yerda nima uchun turibdi?". Shundan muhim natija chiqadi: bitta rasm turli sahifada turli alt oladi.

Shuning uchun alt'ni rasm faylining "xususiyati" deb bir marta yozib qo'yish yetmaydi. U rasm turgan joyda yoziladi.

5.3 Emoji va belgilar

Ekran o'quvchi har bir emojini nomi bilan o'qiydi. Qizil yurak — "qizil yurak", olov — "olov":

<!-- ❌ Malika eshitadi:
     "olov olov olov aksiya olov olov olov" -->
<h2>🔥🔥🔥 AKSIYA 🔥🔥🔥</h2>

<!-- ✅ bitta emoji, ma'noli sarlavha -->
<h2>Juma kuni osh 20% arzon 🔥</h2>

Xuddi shunday: ★★★★☆ — "qora yulduz, qora yulduz..." kabi o'qiladi. Uning o'rniga "5 dan 4 baho" deb yozing.

Butun so'zni KATTA HARF bilan yozish ham o'qishni qiyinlashtiradi. Ba'zi ekran o'quvchilar qisqa katta harfli so'zni qisqartma deb, harfma-harf o'qishi mumkin. Katta harf ko'rinishi kerak bo'lsa, matnni oddiy yozing va ko'rinishni CSS bilan o'zgartiring (keyingi qismda).

5.4 Video va audio

Subtitrlar darsidagi qoidalarni eslang: nutqli videoga captions, audioga transkript. Kontent muallifi uchun yana ikki odat:

• Videoda ko'rsatib emas, aytib tushuntiring. "Mana bunday qilamiz" o'rniga — "Guruchni uch marta yuvamiz". Shunda ko'rmaydigan odam ham tushunadi va alohida audio tavsif kerak bo'lmaydi.
• Ovozli xabar — matn bilan. Telegram'da ovozli e'lon tashlash odat bo'lgan. Uni saytga qo'ysangiz, yoniga matnini ham yozing.

Tekshirib ko'ring: Jasur aka: "Menyu rasmiga alt ga butun menyuni yozdim, 600 belgi. Endi hammasi joyidami?" Nima deysiz?

6. Rang — yagona belgi emas

6.1 Muammo

"Qizil rangdagi taomlarga chegirma" — qizil rangni ko'rmaydigan odam uchun bu gap bo'sh. Erkaklarning taxminan 8 foizi (har 12 tadan biri) va ayollarning 0,5 foizi rangni to'liq ajrata olmaydi — ko'pincha qizil va yashilni. Ekran o'quvchi esa rangni umuman aytmaydi.

WCAG: 1.4.1 Use of Color (A) — rang ma'lumot berishning yagona usuli bo'lmasin. Rang ishlatsa bo'ladi, faqat yonida yana bir belgi bo'lsin: so'z, ikonka, shakl.

6.2 Yechim

<!-- ❌ faqat rang (qizil) -->
<li class="qizil">Osh — 28 000</li>

<!-- ✅ so'z bilan -->
<li>Osh — 28 000 so'm (chegirma, eski narx 35 000)</li>

s va del teglari (urg'u teglari darsida) ko'zga "eski narx" ni chizib ko'rsatadi. Lekin ko'p ekran o'quvchilar standart sozlamada chizilganini aytmaydi. Malika "Osh 35 000 28 000" eshitadi va qaysi narx amalda ekanini bilmaydi. Shuning uchun "eski narx" so'zi matnda bo'lishi kerak.

Boshqa misollar:

• Majburiy maydon faqat qizil yulduzcha rangi bilan emas — "(majburiy)" so'zi yoki required bilan (Qulay forma).
• Xarita yoki grafikdagi "yashil — ochiq, qizil — yopiq" — belgi shakli yoki yozuv ham farq qilsin.
• Matn ichidagi havola — faqat rang bilan emas, tagiga chizilgan ham bo'lsin (bu CSS'da).

6.3 Kontrast — dizayn qarori

Rangga oid ikkinchi mezon — kontrast (matn va fon yorug'ligi farqi). 1.4.3 Contrast (Minimum) (AA): oddiy matn uchun kamida 4.5:1, katta matn uchun 3:1. Tugma chegarasi va ikonkalar uchun — 3:1 (1.4.11, AA).

Kontentga tegishli qismi: surat ustiga matn yozmang yoki yozsangiz, ostiga to'q fon qo'ying. Kontrastni o'lchash va CSS'da to'g'rilash — CSS'da accessibility darsida, tekshirish vositalari — keyingi darsda.

6.4 "O'ngdagi yashil tugma"

Rangning qarindoshi — shakl va joylashuvga tayanish. "O'ngdagi yashil tugmani bosing" — ko'rmaydigan odam uchun "o'ng" ham, "yashil" ham yo'q. Telefonda esa "o'ngdagi" tugma pastga tushib qolgan bo'ladi. WCAG: 1.3.3 Sensory Characteristics (A).

❌ Davom etish uchun o'ngdagi yashil tugmani bosing.
✅ Davom etish uchun «Stolni band qilish» tugmasini bosing.

Tekshirib ko'ring: Bron kalendarida band kunlar qizil, bo'sh kunlar yashil. Rangga qo'shimcha nima qilish kerak?

7. Harakat, avtopley va vaqt limiti

7.1 O'zi boshlanadigan ovoz

Sahifa ochilishi bilan fonda musiqa yoki video ovozi boshlanadi. Malika uchun bu falokat: musiqa ekran o'quvchining ovozini bosib ketadi va u pauza tugmasini ham topa olmaydi.

WCAG: 1.4.2 Audio Control (A) — 3 soniyadan uzun avtomatik ovozni to'xtatish yoki pasaytirish imkoni bo'lishi shart. Eng yaxshi qoida oddiy: ovoz hech qachon o'zi boshlanmasin. Brauzerlar ham ovozli avtopleyni odatda to'sib qo'yadi — video va audio darsida muted shuning uchun kerak edi.

7.2 Yuguruvchi satr, karusel, miltillash

O'zbek saytlarida sevimli element — yuguruvchi satr (sahifa tepasida o'ngdan chapga suzib yuradigan yangiliklar). Diqqati tez chalg'iydigan odam uchun u sahifaning qolgan qismini o'qishga xalaqit beradi. Sekin o'qiydigan odam esa gapni oxirigacha o'qib ulgurmaydi.

• 2.2.2 Pause, Stop, Hide (A): 5 soniyadan uzoq davom etadigan harakatni to'xtatish imkoni bo'lsin. Bu karusel, yuguruvchi satr va avtomatik yangilanadigan bloklarga tegishli.
• 2.3.1 Three Flashes (A): soniyasiga 3 martadan ko'p miltillamasin — tutqanoq xavfi.
• Harakat ba'zi odamlarda bosh aylanishini keltirib chiqaradi. Operatsion tizimda "harakatni kamaytirish" sozlamasi bor, sayt uni hurmat qilishi kerak — prefers-reduced-motion darsida.

7.3 Vaqt limiti

«Bahor» bron formasida SMS kod yuboriladi va "60 soniya" taymeri boshlanadi. Barmoqlari sekin ishlaydigan keksa odam yoki ekran o'quvchi foydalanuvchisi kodni kiritib ulgurmaydi.

WCAG 2.2.1 Timing Adjustable (A) — vaqt limiti bo'lsa, foydalanuvchi kamida bittasini qila olsin:

• limitni o'chirish;
• limitni kamida 10 barobar uzaytirish;
• tugashidan kamida 20 soniya oldin ogohlantirish olib, bitta harakat bilan (masalan, tugma) uzaytirish.

Kontent tomoni: limit haqida oldindan yozing ("Kod 5 daqiqa amal qiladi") va "Kodni qayta yuborish" tugmasini ko'rinadigan joyga qo'ying. Real vaqtdagi auksion kabi haqiqatan qat'iy holatlar — istisno.

8. Kognitiv qulaylik: izchillik va xotira

Bir necha mezon matnning o'zidan ko'ra "sayt qanday gapirishi"ga tegishli:

Oxirgi uchtasi 2023-yilda WCAG 2.2 bilan qo'shilgan. «Bahor» uchun amaliy xulosalar:

• "Savat" bir sahifada "Korzina", boshqasida "Buyurtmalarim" bo'lmasin.
• Choyxona telefoni har sahifaning pastki qismida (footer) bir xil joyda tursin.
• Bron formasida telefon raqami bir marta so'raladi. Tasdiqlash qadamida uni qayta yozdirmang — oldingi qiymatni ko'rsating.
• Parol maydoniga nusxa qo'yishni taqiqlamang, parol menejeriga xalaqit bermang (Forma xavfsizligi darsida ko'rgandik).
• "Yuqorida aytilgan kodni kiriting" emas — kodni yonida ko'rsating yoki qaysi SMS'dan olishni aniq ayting.

9. Til belgilash — takrorlash

Hujjat skeleti va Ko'p tilli matn darslarida lang ni o'rgandik. Kontent nuqtai nazaridan qisqa takror:

• 3.1.1 Language of Page (A): html lang="uz" — ekran o'quvchi o'zbekcha matnni ingliz talaffuzida o'qimasligi uchun.
• 3.1.2 Language of Parts (AA): boshqa tildagi bo'lak o'z lang i bilan.

<p>Bizning mashhur taomimiz —
  <span lang="ru">«Плов по-ташкентски»</span>,
  ya'ni Toshkent oshi.</p>

Rus tilidagi nom rus ovozida, qolgan matn o'zbekcha ovozda o'qiladi. lang noto'g'ri bo'lsa, ovoz butun gapni buzib o'qiydi.

10. «Bahor»: aksiya sahifasini qayta yozamiz

Dars boshidagi bo'limni endi to'g'ri yozamiz — alohida sahifa sifatida:

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Juma aksiyasi — Choyxona «Bahor»</title>
</head>
<body>
  <main>
    <h1>Juma kuni osh 20% arzon</h1>
    <p>Har juma soat 12:00 gacha osh 28 000 so'm turadi.
      Oddiy kunlari — 35 000 so'm.</p>

    <h2>Aksiya shartlari</h2>
    <ul>
      <li>Faqat choyxonaning o'zida, yetkazib berishda emas.</li>
      <li>Bitta mehmonga — 2 porsiyagacha.</li>
      <li>Oldindan stol band qilish shart emas.</li>
    </ul>

    <h2>Qanday ko'rinadi</h2>
    <figure>
      <img src="assets/images/osh-juma.jpg" width="1200"
           height="800"
           alt="Lagandagi osh, ustida bedana tuxumi va kazi.">
      <figcaption>Juma oshi — oshpaz Rustam aka retsepti.
      </figcaption>
    </figure>

    <h2>Video: osh qanday damlanadi</h2>
    <video controls width="640" height="360"
           src="assets/video/osh.mp4">
      <track kind="captions" src="assets/video/osh-uz.vtt"
             srclang="uz" label="O'zbekcha" default>
    </video>
    <p><a href="osh-video-matni.html">Videoning to'liq matni</a></p>

    <p><a href="assets/files/menyu-2026.pdf">To'liq menyu
      (PDF, 1,2 MB)</a></p>
  </main>
</body>
</html>

Nima o'zgardi:

• Sarlavha — emojisiz va mazmunli: faqat uni o'qigan odam ham aksiyani biladi. title ham sahifaga xos.
• Muhim ma'lumot birinchi paragrafda: qaysi kun, qaysi vaqtgacha, qancha. Rang yo'q — narxlar so'z bilan.
• Shartlar ro'yxat bilan, idoraviy tilsiz.
• Rasm — matnli banner emas, taomning o'zi; alt esa uni tasvirlaydi. Aksiya matni rasmda emas, HTML'da.
• Video — subtitr va alohida to'liq matn bilan.
• Havolalar — "bu yerda" emas; PDF turi va hajmi yozilgan.

Kod html-validate dan xatosiz o'tadi. E'tibor bering: dars boshidagi variant ham xatosiz o'tardi. Validator kontent sifatini baholay olmaydi — buni faqat odam qiladi.

11. Ko'p uchraydigan xatolar

11.1 "Batafsil" va "Bu yerni bosing"

Havolalar ro'yxatida ma'nosiz. Tuzatish: havola matni — manzil nomi yoki harakat ("Osh retsepti", "Stolni band qilish").

11.2 Matn rasm ichida

Menyu, aksiya, e'lon — JPG. Tuzatish: matn HTML'da, rasm — faqat tasvir uchun.

11.3 Ma'lumot faqat rangda

"Qizil — chegirma", "yashil — bo'sh". Tuzatish: so'z yoki belgi qo'shing.

11.4 Sarlavha bezak uchun

Matn katta ko'rinsin deb h3, sarlavha bo'lishi kerak joyda esa qalin p. Tuzatish: sarlavha darajasi — tuzilma bo'yicha, o'lcham — CSS'da (Sarlavhalar darsidagi qoida).

11.5 Emoji va KATTA HARF bilan "baqirish"

Ekran o'quvchi har emojini o'qiydi, katta harfli so'zni ba'zan harfma-harf aytadi. Tuzatish: bitta emoji, oddiy yozuv.

11.6 Idoraviy til

"Amalga oshiriladi", "tomonidan", "maqsadida". Tuzatish: kim, nima qiladi — fe'l bilan, qisqa gap.

12. Mashqlar

1-mashq (oson): Havolalarni tuzating

Uchta havolani mazmunli qiling:

<p>Yangi filial manzili — <a href="filial.html">bu yerda</a>.</p>
<p>Menyu: <a href="menyu.pdf">yuklab olish</a></p>
<p><a href="bron.html">https://example.com/bron.html</a></p>

Menyu fayli 800 KB. Faylga havolada ikki narsa yoziladi: turi va .

<p><a href="filial.html">Yunusobod filialining manzili</a></p>
<p><a href="menyu.pdf">Menyuni yuklab olish (PDF, 800 KB)</a></p>
<p><a href="bron.html">Stolni band qilish</a></p>

2-mashq (o'rta): Oddiy tilga o'giring

«Bahor» saytidagi "Yetkazib berish" matnini qayta yozing. Maqsad: 3–5 ta qisqa gap yoki ro'yxat, muhim ma'lumot birinchi.

Hurmatli mijozlar! Sizga ma'lum qilamizki, choyxonamiz
tomonidan buyurtmalarni yetkazib berish xizmati Chilonzor
tumani hududida amalga oshirilib, buyurtma summasi 100 000
so'mdan oshgan taqdirda dostavka bepul tarzda taqdim etiladi,
qolgan holatlarda esa uning narxi 15 000 so'mni tashkil etadi.

<h2>Yetkazib berish</h2>
<p>Chilonzor tumani ichida yetkazib beramiz.</p>
<ul>
  <li>Buyurtma 100 000 so'mdan ko'p — bepul.</li>
  <li>100 000 so'mgacha — 15 000 so'm.</li>
</ul>

3-mashq (qiyin): Kontent auditi

«Bahor» saytining "Biz haqimizda" sahifasi. Kamida 6 ta kontent muammosini toping, har biriga WCAG mezonini (yoki qoidani) yozing va sahifani qayta yozing.

<title>Choyxona «Bahor»</title>
...
<h2>⭐⭐⭐ BIZ HAQIMIZDA ⭐⭐⭐</h2>
<img src="haqida-banner.jpg" alt="banner">
<p>Choyxonamiz 2015-yilda tashkil etilgan bo'lib, mijozlarga
sifatli xizmat ko'rsatish maqsadida faoliyat olib boradi.</p>
<p>Ish vaqtini bilish uchun o'ngdagi ko'k tugmani bosing.</p>
<p>Yashil belgili taomlar — vegetarian.</p>
<p>Manzil xaritasi: <a href="xarita.html">bu yerda</a></p>

Eslatma: haqida-banner.jpg da "10 yil siz bilan!" yozuvi bor.

<title>Biz haqimizda — Choyxona «Bahor»</title>
...
<h2>Biz haqimizda</h2>
<p>10 yildan beri siz bilan: «Bahor» 2015-yilda ochilgan.
  Bizda Toshkent oshi va tandir kabobi eng mashhur.</p>
<p><a href="ish-vaqti.html">Ish vaqti</a></p>
<p>Vegetarian taomlar menyuda «vegetarian» so'zi bilan
  belgilangan.</p>
<p><a href="xarita.html">Choyxonaning xaritadagi joyi</a></p>

13. Real ishda

• UX writer va kontent dizayner — katta kompaniyalarda alohida kasb. Ular interfeysdagi har bir so'zni oddiy tilda yozadi. Bank, taksi va marketpleys ilovalarida tugma va xabarlar matni ko'pincha shunday mutaxassislar qo'lidan o'tadi.
• Kontent yo'riqnomasi (style guide). Buyuk Britaniya hukumatining GOV.UK style guide'i — oddiy tilning mashhur namunasi. Jamoalar shunga o'xshash ichki qoidalar yozadi: "sana formati", "apostrof", "havola matni".
• Admin panelda majburiy alt. Dasturchi sifatida siz rasm yuklash formasida "Rasm tavsifi" maydonini majburiy qilasiz va yoniga qisqa yo'riqnoma yozasiz. Kontent sifati shunday "qolip"lardan boshlanadi.
• Qonun. Yevropadagi European Accessibility Act va boshqa qonunlar WCAG'ga tayanadi — kontent mezonlari ham shunga kiradi. Xalqaro buyurtmachi uchun ishlasangiz, bu talablar shartnomada yoziladi.

Xulosa

• Kontent accessibility'si — kod emas, matn, rasm, rang va harakat qanday tanlangani.
• Oddiy til: muhim narsa birinchi, qisqa gap, tanish so'z, idoraviy tilsiz; o'zbek saytlarida — yagona apostrof va yozuv.
• Sarlavha va title mazmunli; havola matni yolg'iz o'qilganda ham tushunarli.
• Matn rasmda emas, HTML'da; alt — kontekstga qarab; emoji va KATTA HARF ekran o'quvchiga shovqin.
• Rang, joylashuv va shakl — yagona belgi emas; yonida so'z bo'lsin.
• Avtomatik ovoz yo'q, 5 soniyadan uzun harakat to'xtatiladigan, vaqt limiti uzaytiriladigan.

Keyingi dars: Accessibility'ni tekshirish — axe, Lighthouse, WAVE, klaviatura va ekran o'quvchi bilan sahifani qanday sinashni o'rganamiz.

Manbalar

• W3C: "Web Content Accessibility Guidelines (WCAG) 2.2" va "Understanding WCAG 2.2" — w3.org/TR/WCAG22
• W3C WAI: "Making Content Usable for People with Cognitive and Learning Disabilities" — w3.org/TR/coga-usable
• WebAIM: "Screen Reader User Survey", "Writing Clearly and Simply", "Links and Hypertext" — webaim.org
• GOV.UK: "Content design: planning, writing and managing content" — gov.uk/guidance/content-design