Semantik HTML5 va accessibility

semantik teglar, landmark, sarlavhalar iyerarxiyasi, alt, ARIA, WCAG (POUR), kontrast

10-sinfAdvanced UX/UI5-hafta · 13-dars

Bugun nimalarni o'rganamiz?

Semantik teglar

Ma'noli HTML

Sahifa tuzilmasi

Landmark va sarlavhalar

ARIA va WCAG

Hamma uchun qulay

Takrorlash

Wireframe dagi yuqori qism (logo va menyu) nima deb ataladi?

Header: sahifaning yuqori qismi, logo va navigatsiya.

Semantik teglar

Ma'noli HTML

Semantikaning foydalari

Non-semantik va semantik


<!-- Non-semantik -->
<div id="header">Saytimizga xush kelibsiz!</div>
<div id="content">Asosiy matn.</div>
<div id="footer">Mualliflik huquqi 2026</div>

<!-- Semantik -->
<header>Saytimizga xush kelibsiz!</header>
<main>Asosiy matn.</main>
<footer>Mualliflik huquqi 2026</footer>

Ikkala variant ekranda bir xil ko'rinishi mumkin, lekin faqat ikkinchisi ekran o'qiydigan qurilma va qidiruv tizimiga sahifa tuzilmasini aytib beradi.

Mini-test

Qaysi teg non-semantik hisoblanadi?

div o'zi ma'no bildirmaydi.

Sahifa tuzilmasi

Landmark va sarlavhalar

Sahifa xaritasi

Maktab sayti tuzilmasi


<header>
  <nav>
    <ul>
      <li><a href="/">Bosh sahifa</a></li>
      <li><a href="/qabul">Qabul</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>Maktab yangiliklari</h1>
  <article>
    <h2>Olimpiada g'oliblari</h2>
    <p>Matn...</p>
  </article>
</main>
<footer>Aloqa: [email protected]</footer>

Sahifada bitta h1 va main bo'ladi. h2 dan keyin to'g'ridan-to'g'ri h4 yozmang: sarlavhalar iyerarxiyasi sakramasin.

Mini-test

Bitta sahifada nechta main bo'ladi?

main asosiy kontent: sahifada bitta.

ARIA va WCAG

Hamma uchun qulay

WCAG: POUR

alt va ARIA


<img src="maktab.jpg" alt="Maktab binosi, old tomondan">
<img src="chiziq.png" alt="">

<div role="tablist">
  <div role="tab" aria-selected="true">Umumiy</div>
  <div role="tab" aria-selected="false">Tafsilot</div>
</div>

<button aria-label="Menyuni yopish">X</button>

Bezak (dekorativ) rasmga alt="" yoziladi: ekran o'qiydigan qurilma uni o'tkazib yuboradi. div dan tab yasalganda ARIA kerak; tayyor button bo'lsa, ARIA kerak emas.

Mini-test

ARIA ni qachon ishlatamiz?

Avval semantik HTML, ARIA — faqat zarur bo'lganda.

Div-sho'rva va semantik

Non-semantik (div)

Hamma narsa div: ma'no yo'q, ekran o'qiydigan qurilma uchun tuzilma ko'rinmaydi

Semantik

header, nav, main, footer: ma'no aniq, SEO va accessibility yaxshi

Semantik tuzilma o'qish va qo'llab-quvvatlashni osonlashtiradi.

Atamalar. Bosing

Landmark

bosing

Sahifa zonasi: header, nav, main, footer

alt

bosing

Rasmning matnli tavsifi

ARIA

bosing

Rol va holatni tushuntiruvchi atributlar

POUR

bosing

WCAG ning 4 tamoyili

Sahifani semantik qilish

1. Tahlil qiling

Qaysi div qanday rol bajarayotganini toping.

2. Almashtiring

div o'rniga header, nav, main, footer.

3. Tekshiring

Sarlavhalar, alt va Lighthouse Accessibility.

Landmark teglar

Teg	Vazifasi	Soni
`header`	yuqori qism, logo	bir nechta bo'lishi mumkin
`nav`	asosiy navigatsiya	1-2 ta
`main`	asosiy kontent	faqat bitta
`aside`	qo'shimcha blok	kerak bo'lsa
`footer`	pastki qism	bir nechta bo'lishi mumkin

Pastga bosing: tekshirish

Accessibility tekshiruvi

Sahifani brauzerda oching, DevTools > Lighthouse.
Faqat Accessibility ni tanlab, hisobotni oling.
Kamida 2 ta xatoni (alt, kontrast) tuzating.

div dan nav ga


<div id="menu">
  <a href="/">Bosh</a>
</div>

div dan nav ga


<nav>
  <ul>
    <li><a href="/">Bosh</a></li>
  </ul>
</nav>

Semantika raqamlarda

ta taxminan semantik element

ta foyda: A, U, M, SEO

ta WCAG tamoyili: POUR

Semantik teglar soni taxminiy: 30–40.

Amaliy topshiriq 20 daqiqa

OsonTeg juftlash: Quyidagilarni mos tegga bog'lang: yuqori qism; asosiy navigatsiya; asosiy kontent; pastki qism.

O'rtadiv ni almashtiring: <div id="header">, <div id="content">, <div id="footer"> ni semantik teglarga almashtiring.

QiyinMaktab sayti, semantik: 12-darsdagi maktab sayti wireframe ini semantik HTML ga o'tkazing: header + nav, main (h1, 3 ta yangilik article), footer.

BonusARIA ni tekshiring: <nav role="navigation"> yozilgan. Bu to'g'rimi? Sababini yozing.

Dars xulosasi

Semantik HTML

Teg ma'no bildiradi; div non-semantik.

Landmark va sarlavha

header, nav, main, footer; bitta h1.

ARIA va WCAG

Avval semantik teg; POUR tamoyillari va alt.

Uyga vazifa: semantik sahifa tuzilmasi va Lighthouse hisoboti.

Keyingi dars: Formalar va validatsiya

form, label, input, validatsiya, semantika

5-hafta · 14-dars