Accessible HTML jadvallar: scope, headers, aria-sort va telefonga moslash

Qisqacha: Ekran o'quvchi jadvalni katakma-katak o'qiydi va har katak bilan birga uning sarlavhasini aytadi — agar sarlavhalar kataklarga to'g'ri bog'langan bo'lsa. Oddiy jadvalda buni th va scope (col, row, colgroup, rowgroup) qiladi, juda murakkab jadvalda — headers va id. Telefonda keng jadval ekranga sig'maydi: uni nomli, klaviatura bilan boshqariladigan gorizontal skroll o'ramiga joylaymiz. Saralanadigan jadvalda joriy tartibni aria-sort aytadi.

Bu darsda

• Ekran o'quvchi jadvalni qanday "o'qishini" tushunasiz.
• scope ning to'rtala qiymatini to'g'ri ishlatasiz.
• Ko'p darajali sarlavhali jadvalni colgroup va scope="colgroup" bilan yozasiz.
• headers va id ni qachon ishlatish kerakligini bilasiz.
• Keng jadvalni telefon uchun skroll o'ramiga joylaysiz va saralash holatini aria-sort bilan belgilaysiz.

Oldin bilishingiz kerak: Jadval asoslari, Jadval qismlari va kataklarni birlashtirish.

1. Nega bu kerak?

Malika ko'rmaydi (alt matn darsidan tanishsiz). U kompyuterda ekran o'quvchi dasturi bilan ishlaydi: dastur sahifani ovoz chiqarib o'qiydi. Malika choyxona saytida kompleks tushlik narxini qidiryapti. Jadvalda katakdan katakka o'tadi va eshitadi: "45 000 so'm". Bu nima — tushlikmi, kechki ovqatmi, qaysi kun? Sarlavhalar kataklarga bog'lanmagan bo'lsa, jadval uning uchun ma'nosiz sonlar to'plami.

Aziz esa sahifani telefonda ochdi. Besh ustunli jadval 360 piksellik ekranga siqilgan: so'zlar harfma-harf bo'linib ketgan, sonlarni o'qib bo'lmaydi.

Bitta jadval — ikki xil foydalanuvchi, ikki xil muammo. Bu dars ikkalasini ham hal qiladi.

Shaxmat taxtasini eslang: "e4" — ustun harfi va qator raqami. Jadval sarlavhalari ham shunday: ular har bir katakning "manzili". Ko'rgan odam manzilni ko'zi bilan topadi, ekran o'quvchi foydalanuvchisi esa uni faqat HTML aytsa biladi.

2. Ekran o'quvchi jadvalni qanday o'qiydi

2.1 Jadval rejimi

Alt matn darsida tanishgan NVDA (Windows, bepul) va VoiceOver (macOS, iPhone) jadvallar uchun maxsus rejimga ega:

• NVDA'da T tugmasi keyingi jadvalga sakratadi. VoiceOver'da jadvalga oddiy o'qish bilan yetib kelasiz.
• Jadvalga kirganda nomi va o'lchami aytiladi: "Bugungi narxlar, jadval, 4 qator, 3 ustun".
• Katakdan katakka yurish: NVDA'da Ctrl + Alt + strelkalar, VoiceOver'da Ctrl + Option + strelkalar.

Eng muhimi — yurish paytida nima aytiladi. O'ngga (yangi ustunga) o'tsangiz, ustun sarlavhasi va qiymat: "To'liq porsiya, 35 000 so'm". Pastga (yangi qatorga) o'tsangiz, qator sarlavhasi va qiymat: "Lag'mon, 28 000 so'm". Foydalanuvchi har safar faqat o'zgargan sarlavhani eshitadi.

2.2 Sarlavha bog'lanishi qayerdan keladi

Taxmin — kafolat emas. Shuning uchun Jadval asoslari darsidan beri ikki tomonlama sarlavhali jadvalda scope yozyapmiz — html-validate'ning wcag/h63 qoidasi ham shuni talab qiladi.

3. scope ning to'rt qiymati

3.1 col, row va rowgroup — takrorlash

Uchalasini o'tgan darslarda ishlatdik. Jadval qismlari darsidagi menyu:

<tbody>
  <tr>
    <th scope="rowgroup" colspan="3">Issiq taomlar</th>
  </tr>
  <tr>
    <th scope="row">Osh</th>
    <td>20 000 so'm</td>
    <td>35 000 so'm</td>
  </tr>
</tbody>

"35 000 so'm" katagining sarlavhalari uchta: "Issiq taomlar" (guruh, rowgroup), "Osh" (qator, row) va thead dagi "To'liq porsiya" (ustun, col).

3.2 colgroup — ko'p darajali ustun sarlavhasi

Choyxonada kompleks ovqat bor: tushlik va kechki ovqat, har biri oddiy va katta porsiyada. Ustun sarlavhalari ikki qavat:

            Tushlik          Kechki ovqat
            Oddiy   Katta    Oddiy   Katta
Dushanba    40 000  55 000   45 000  60 000
Seshanba    38 000  52 000   45 000  60 000

"Tushlik" ikki ustun ustida turibdi — u ikkala ustunning ham sarlavhasi. Buni HTML'da shunday aytamiz:

<table>
  <caption>Kompleks ovqat narxlari (so'm)</caption>
  <colgroup><col></colgroup>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <thead>
    <tr>
      <td rowspan="2"></td>
      <th scope="colgroup" colspan="2">Tushlik</th>
      <th scope="colgroup" colspan="2">Kechki ovqat</th>
    </tr>
    <tr>
      <th scope="col">Oddiy</th>
      <th scope="col">Katta</th>
      <th scope="col">Oddiy</th>
      <th scope="col">Katta</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Dushanba</th>
      <td>40 000</td>
      <td>55 000</td>
      <td>45 000</td>
      <td>60 000</td>
    </tr>
    <tr>
      <th scope="row">Seshanba</th>
      <td>38 000</td>
      <td>52 000</td>
      <td>45 000</td>
      <td>60 000</td>
    </tr>
  </tbody>
</table>

Qatorma-qator:

1. Uchta colgroup — ustunlarni guruhlaydi: birinchisi kunlar ustuni, keyin "Tushlik" ning ikki ustuni, keyin "Kechki ovqat" ning ikki ustuni. O'tgan darsda aytgan edik: colgroup ning ikkinchi vazifasi — aynan shu. scope="colgroup" guruhni shu elementlardan oladi.
2. Chap yuqori burchak — bo'sh, shuning uchun td (Jadval asoslari darsidagi qoida). rowspan="2" — u ikkala sarlavha qatorini egallaydi.
3. "Tushlik" — colspan="2" va scope="colgroup": "men o'z ustunlar guruhimdagi hamma kataklarning sarlavhasiman".

Endi Malika "Dushanba" qatoridagi oxirgi katakka kelsa, taxminan shunday eshitadi: "Kechki ovqat, Katta, 60 000".

Diqqat: Ekran o'quvchilar colgroup va rowgroup ni har doim ham bir xil yaxshi o'qimaydi. Ikki qavatli sarlavha — chegara. Undan murakkabi kerak bo'lsa, headers ni ishlating yoki jadvalni bo'ling (4 va 5-bo'limlar).

Tekshirib ko'ring: Nega chap yuqori katak th emas, td?

4. headers va id — har bir katak o'z sarlavhalarini aytadi

scope "sarlavha → kataklar" yo'nalishida ishlaydi: sarlavha qaysi kataklarga tegishli ekanini aytadi. headers atributi teskari yo'nalishda ishlaydi: har bir katak "mening sarlavhalarim — mana bular" deydi.

<table>
  <caption>Tushlik narxlari (so'm)</caption>
  <thead>
    <tr>
      <td></td>
      <th id="oddiy" scope="col">Oddiy</th>
      <th id="katta" scope="col">Katta</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="dush" scope="row">Dushanba</th>
      <td headers="dush oddiy">40 000</td>
      <td headers="dush katta">55 000</td>
    </tr>
  </tbody>
</table>

• Har bir sarlavhaga takrorlanmas id beriladi. id ni sahifa ichidagi havolalar darsida ko'rgansiz.
• Har bir katakning headers atributida — uning sarlavhalari id lari, bo'sh joy bilan ajratilgan. Tartib: umumiydan xususiyga.
• headers bo'lsa, brauzer taxmin va scope o'rniga aynan shu ro'yxatga ishonadi.

Bu yerda scope ham qoldi — headers bor jadvalni html-validate "murakkab" deb hisoblaydi va har bir th dan scope so'raydi. Zarari yo'q: headers ni tushunmaydigan vositalar uchun zaxira bo'ladi.

Qachon kerak? Sarlavha katakning qatorida ham, ustunida ham turmasa. Masalan, uch-to'rt qavatli sarlavhalar yoki jadval o'rtasida turgan oraliq sarlavhalar. Bunday hollarda scope "chiziq bo'ylab" ishlagani uchun yetmaydi.

Kamchiligi: qo'lda yozish uzoq va xatoga moyil. Bitta id da xato — bog'lanish jimgina uziladi. Jadvalga yangi ustun qo'shsangiz, o'nlab kataklarni yangilaysiz. Shuning uchun real loyihalarda headers ni ko'pincha dastur (server yoki JavaScript) yozadi.

Bo'sh joyni to'ldiring: katakni sarlavhalariga id lar orqali bog'laydigan atribut —

5. Eng yaxshi yechim — oddiy jadval

W3C accessibility qo'llanmasining asosiy maslahati: murakkab jadvalni murakkab belgilashdan ko'ra, uni soddalashtiring.

• Uch qavatli sarlavhali bitta jadval o'rniga — ikki-uchta oddiy jadval. Masalan, "Tushlik narxlari" va "Kechki ovqat narxlari".
• Birlashtirishni faqat ma'no uchun ishlating (o'tgan darsdagi qoida).
• caption da jadval tuzilishini aytish mumkin: "Kompleks ovqat narxlari: ustunlarda — ovqat va porsiya, qatorlarda — kunlar".

Maslahat: Eski kodda <table summary="..."> ni uchratasiz — jadval tuzilishining yashirin tavsifi. Atribut eskirgan. Nu Checker uning o'rniga caption yoki jadvalni figure ga o'rashni taklif qiladi. figure ichida jadval va figcaption bo'lsa, caption yozilmaydi — nomni figcaption beradi.

6. Jadval telefonda

6.1 Muammo

Kompleks ovqat jadvalida beshta ustun. Kompyuterda chiroyli, telefonda esa brauzer ustunlarni ekranga sig'dirish uchun siqadi. Uzun so'zlar bo'linadi, sonlar ikki qatorga tushadi.

Tekshirish: DevTools'dagi telefon rejimi — Ctrl + Shift + M (macOS'da Cmd + Shift + M). Uni Chrome DevTools I darsida ko'rgansiz. Kenglikni 360 pikselga qo'ying.

6.2 Asosiy yechim: skroll o'rami

G'oya oddiy: jadvalni o'ramga (div) joylaymiz. O'ram ekran kengligida qoladi, jadval esa uning ichida chapga-o'ngga suriladi. Sahifaning o'zi emas, faqat jadval suriladi — xuddi telefondagi rasmlar lentasi kabi.

HTML qismi:

<div class="jadval-orami" role="region"
     aria-labelledby="kompleks-nomi" tabindex="0">
  <table>
    <caption id="kompleks-nomi">Kompleks ovqat narxlari</caption>
    <!-- ... jadvalning qolgan qismi ... -->
  </table>
</div>

Skrollni esa CSS yoqadi — bitta qoida:

.jadval-orami {
  overflow-x: auto;
}

"Gorizontal yo'nalishda sig'masa — skroll qil" degani. CSS'ni hali o'rganmadik — bu qoidani Overflow darsida to'liq ochamiz. Hozir g'oyani tushunish yetarli.

Endi div dagi har bir atribut nega kerak:

• tabindex="0" — o'ramni klaviatura bilan fokuslanadigan qiladi. Sichqonchasi yo'q foydalanuvchi Tab bilan o'ramga o'tadi va strelkalar bilan jadvalni suradi. Busiz u o'ng ustunlarni umuman ko'ra olmaydi. Ba'zi brauzerlar skroll konteynerni o'zi fokuslanadigan qiladi, lekin hammasi emas. tabindex ni Fokus va tahrir atributlari darsida to'liq o'rganamiz.
• role="region" — o'ramga "hudud" rolini beradi. Fokus o'ramga tushganda ekran o'quvchi nima bo'lganini aytadi — aks holda foydalanuvchi "hozir qayerdaman?" deb adashadi. Teglar yashirin rol olishini Semantik HTML darsida ko'rgan edik. role atributi rolni qo'lda beradi — bu ARIA'ning bir qismi, uni ARIA asoslari darsida o'rganamiz.
• aria-labelledby="kompleks-nomi" — hududga nomni caption matnidan oladi. Ekran o'quvchi "Kompleks ovqat narxlari, hudud" deydi. Matnni ikki marta yozmaymiz. Bu atributni SVG darsida ko'rgansiz.

6.3 html-validate va ongli istisno

Kodni npx html-validate bilan tekshirsangiz:

1:27  error  Prefer to use the native <section> element  prefer-native-element

Tarjimasi: "Mahalliy (tayyor) section elementini ishlatish afzal." Linter mantiqi: nomli section ham "hudud" rolini oladi, demak role="region" o'rniga section yozing.

Lekin article, section yoki div darsini eslang: section ga sarlavha kerak. Bizning o'ramda sarlavha yo'q (caption — sarlavha emas), shuning uchun Nu Checker "Section lacks heading" deb ogohlantiradi. Bu holatda div + role="region" — ongli tanlov.

Linterga buni aytish uchun maxsus izoh bor:

<!-- [html-validate-disable-next prefer-native-element] -->
<div class="jadval-orami" role="region"
     aria-labelledby="kompleks-nomi" tabindex="0">

"Keyingi elementda prefer-native-element qoidasini o'chir." Real loyihalarda ham shunday qilinadi: qoida umumiy holat uchun yozilgan, siz esa sababini bilgan holda istisno qilasiz. Muhimi — istisno faqat bitta joyda va sababi aniq.

6.4 Boshqa yondashuvlar

• Ustunlarni kamaytiring. Har bir ustun rostdan kerakmi? Qisqaroq sarlavhalar ham joy tejaydi.
• Jadvalni bo'ling. "Tushlik" va "Kechki ovqat" — ikkita uch ustunli jadval telefonga sig'adi (5-bo'lim).
• "Kartochka" ko'rinishi. CSS bilan telefonda har bir qatorni alohida blok qilib ko'rsatish mumkin. Tuzog'i bor: CSS jadval elementlarining ko'rinish turini o'zgartirsa, ba'zi brauzerlar (tarixan ayniqsa Safari) jadval ma'nosini "unutadi" — ekran o'quvchi uchun u endi jadval emas. Buni CSS qismida ko'ramiz. Hozircha xavfsiz yo'l — skroll o'rami.

Telefon uchun bitta, kompyuter uchun boshqa HTML (jadval nusxasi div larda) yozmang. Ikki nusxa — ikki baravar xato: biri yangilanadi, ikkinchisi unutiladi.

7. Saralanadigan jadval va aria-sort

Admin panelda buyurtmalar jadvali: "Summa" sarlavhasini bossangiz, jadval summa bo'yicha tartiblanadi. Qatorlarni qayta tartiblashni JavaScript qiladi (kursning JavaScript qismida). HTML'ning vazifasi — joriy tartibni aytish:

<table>
  <caption>Bugungi buyurtmalar</caption>
  <thead>
    <tr>
      <th scope="col">
        <button type="button">Mijoz</button>
      </th>
      <th scope="col" aria-sort="descending">
        <button type="button">Summa</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Malika</td>
      <td>118 800 so'm</td>
    </tr>
    <tr>
      <td>Jasur</td>
      <td>56 000 so'm</td>
    </tr>
  </tbody>
</table>

aria-sort qiymatlari:

Qoidalar:

• aria-sort — faqat sarlavha katagida (th), oddiy td da emas.
• Bir vaqtda faqat bitta ustunda. Foydalanuvchi boshqa ustunni bossa, JavaScript atributni eskisidan olib, yangisiga qo'yadi.
• Sarlavha ichidagi button — saralashni boshlaydigan element. Tugma yoki havola darsidagi qoida: sahifada harakat qilsa — tugma. Tugma bo'lgani uchun klaviatura bilan ham bosiladi.

Ekran o'quvchi taxminan shunday aytadi: "Summa, kamayish tartibida saralangan, tugma".

Tekshirib ko'ring: Nega sarlavha matnini oddiy th da qoldirmay, button ichiga oldik?

8. Jadvalni tekshirish

Ekran o'quvchi bilan tekshirishni Accessibility'ni tekshirish darsida batafsil o'rganamiz. Hozir bitta tajriba qiling: NVDA bilan o'z jadvalingizda yuring. Bir marta eshitganingizdan keyin scope ning nega kerakligi hech qachon esingizdan chiqmaydi.

9. Ko'p uchraydigan xatolar

9.1 headers da mavjud bo'lmagan id

id="dush" yozilgan, headers da esa dushanba. Nu Checker:

Error: The “headers” attribute on the element “td” refers to the ID “dushanba”, but there is no “th” element with that ID in the same table.

Tarjimasi: "td elementining headers atributi dushanba id siga ishora qiladi, lekin shu jadvalda bunday id li th elementi yo'q." Tuzatish: id va headers dagi nomlarni harfma-harf solishtiring.

9.2 Skroll o'rami klaviaturasiz

tabindex="0" yozilmagan. Sichqoncha bilan hammasi ishlaydi, klaviatura foydalanuvchisi esa ekranga sig'magan ustunlarni ko'ra olmaydi. Tuzatish: o'ramga tabindex="0", role="region" va nom.

9.3 Nomsiz hudud

role="region" bor, aria-labelledby yo'q. Ekran o'quvchi "hudud" deydi — lekin qanday hudud? Sahifada uchta jadval bo'lsa, uchta bir xil "hudud" eshitiladi. Tuzatish: har bir o'ramga caption orqali nom bering.

9.4 Jadval rasm sifatida

Excel'dagi jadvalning skrinshoti sahifaga rasm qilib qo'yilgan. Ekran o'quvchi katakma-katak yura olmaydi, telefonda esa rasm kichrayib, o'qib bo'lmaydi. Tuzatish: haqiqiy table. Alt matn bu muammoni hal qilmaydi — butun jadvalni bitta gapga sig'dirib bo'lmaydi.

9.5 aria-sort bir nechta ustunda

Uchala sarlavhada ham aria-sort="none" va bittasida ascending — bu xato emas, lekin ortiqcha shovqin. Ikki ustunda ascending esa noto'g'ri: jadval bir vaqtda faqat bitta asosiy tartibga ega. Tuzatish: aria-sort faqat hozir saralangan ustunda.

10. Mashqlar

1-mashq (oson): scope ni tanlang

1. Ikki ustun ustida turgan "Tushlik" sarlavhasi:
2. tbody boshidagi "Salatlar" guruh nomi:
3. Qator boshidagi kun nomi:

2-mashq (o'rta): Filiallar savdosi

Choyxonaning ikki filiali bor: Chilonzor va Yunusobod. Har birida ertalabki va kechki savdo hisoblanadi. Jadval yozing:

• Nomi: "Kunlik savdo (ming so'm)".
• Ustunlar: Chilonzor (Ertalab, Kechqurun), Yunusobod (Ertalab, Kechqurun).
• Qatorlar: Dushanba — 850, 1 200, 640, 980; Seshanba — 790, 1 150, 700, 1 010.
• Ikki qavatli sarlavha: colgroup elementlari va scope ning to'g'ri qiymatlari bilan.

<table>
  <caption>Kunlik savdo (ming so'm)</caption>
  <colgroup><col></colgroup>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <thead>
    <tr>
      <td rowspan="2"></td>
      <th scope="colgroup" colspan="2">Chilonzor</th>
      <th scope="colgroup" colspan="2">Yunusobod</th>
    </tr>
    <tr>
      <th scope="col">Ertalab</th>
      <th scope="col">Kechqurun</th>
      <th scope="col">Ertalab</th>
      <th scope="col">Kechqurun</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Dushanba</th>
      <td>850</td>
      <td>1 200</td>
      <td>640</td>
      <td>980</td>
    </tr>
    <tr>
      <th scope="row">Seshanba</th>
      <td>790</td>
      <td>1 150</td>
      <td>700</td>
      <td>1 010</td>
    </tr>
  </tbody>
</table>

3-mashq (qiyin): Buyurtmalar paneli

Admin uchun "Bugungi buyurtmalar" jadvalini yozing:

1. Ustunlar: "№", "Mijoz", "Taom", "Summa", "Vaqt". Uchta buyurtma o'ylab toping.
2. Jadval "Summa" bo'yicha kamayish tartibida saralangan. "Mijoz", "Summa" va "Vaqt" sarlavhalari — saralash tugmalari.
3. Jadval telefon uchun skroll o'ramida: nomli, klaviatura bilan boshqariladigan.
4. npx html-validate jim bo'lsin (kerakli joyda ongli istisno bilan), Nu Checker — xatosiz.
5. DevTools telefon rejimida (360 piksel) jadval surilishini tekshiring. CSS'siz o'ram hali surilmaydi — shuning uchun head ga vaqtincha <style>.jadval-orami { overflow-x: auto; }</style> qo'shing.

<!-- [html-validate-disable-next prefer-native-element] -->
<div class="jadval-orami" role="region"
     aria-labelledby="buyurtmalar-nomi" tabindex="0">
  <table>
    <caption id="buyurtmalar-nomi">Bugungi buyurtmalar</caption>
    <thead>
      <tr>
        <th scope="col">№</th>
        <th scope="col">
          <button type="button">Mijoz</button>
        </th>
        <th scope="col">Taom</th>
        <th scope="col" aria-sort="descending">
          <button type="button">Summa</button>
        </th>
        <th scope="col">
          <button type="button">Vaqt</button>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">58</th>
        <td>Malika</td>
        <td>Osh, lag'mon, ko'k choy</td>
        <td>118 800 so'm</td>
        <td><time datetime="13:05">13:05</time></td>
      </tr>
      <tr>
        <th scope="row">57</th>
        <td>Jasur</td>
        <td>Manti</td>
        <td>56 000 so'm</td>
        <td><time datetime="12:40">12:40</time></td>
      </tr>
      <tr>
        <th scope="row">59</th>
        <td>Dilnoza</td>
        <td>Somsa, kompot</td>
        <td>24 000 so'm</td>
        <td><time datetime="13:20">13:20</time></td>
      </tr>
    </tbody>
  </table>
</div>

11. Real ishda

• WCAG — veb accessibility'ning xalqaro standarti. Uning "Info and Relationships" talabi aynan shu darsdagi narsani talab qiladi: jadval sarlavhalari kodda kataklarga bog'langan bo'lishi. Davlat saytlari, banklar va xalqaro mijozlar uchun ishlaganda buni albatta tekshirishadi. Yevropa Ittifoqida 2025-yildan onlayn do'kon va bank xizmatlari uchun accessibility qonun bilan majburiy (European Accessibility Act).
• Admin panellar va ma'lumot jadvallari. AG Grid, MUI DataGrid, TanStack Table kabi kutubxonalar (React qismida ko'rasiz) saralash, skroll va aria-sort ni o'zi qo'yadi. Lekin ularni to'g'ri sozlash va tekshirish — dasturchining ishi. Juda interaktiv jadvallar uchun ARIA'da alohida "grid" namunasi bor — ARIA Authoring Practices darsida.
• Mobil trafik. O'zbekistonda saytlarning trafigi asosan telefondan keladi. Telefonda o'qib bo'lmaydigan jadval — yo'qotilgan mijoz.
• Intervyu savoli: "Jadvalni qanday accessible qilasiz?" Kuchli javob: "caption, th va scope, murakkab hollarda headers; lekin avval jadvalni soddalashtiraman. Mobil uchun — nomli, fokuslanadigan skroll o'rami."

Xulosa

• Ekran o'quvchi har katak bilan uning sarlavhasini aytadi — agar sarlavha kodda bog'langan bo'lsa.
• scope: col, row, rowgroup (guruh nomi) va colgroup (colgroup elementlari bilan, ko'p darajali sarlavha).
• headers + id — juda murakkab jadvallar uchun; lekin eng yaxshi yechim — jadvalni soddalashtirish yoki bo'lish.
• Telefonda keng jadval — skroll o'ramida: tabindex="0", role="region", aria-labelledby va CSS'da overflow-x: auto.
• html-validate'ning prefer-native-element qoidasidan ongli istisno — maxsus izoh bilan, faqat bitta joyda.
• aria-sort — faqat hozir saralangan bitta th da; saralash tugmasi — button.

Keyingi dars: Forma qanday ishlaydi — jadvallardan formalarga o'tamiz: forma ma'lumotni qanday yig'ib, serverga yuboradi.

Manbalar

• W3C WAI: "Tables Tutorial" (ayniqsa "Multi-level headers" va "Irregular headers") — w3.org/WAI/tutorials/tables
• W3C WAI-ARIA Authoring Practices: "Sortable Table Example" — w3.org/WAI/ARIA/apg
• MDN: <th> (scope, headers), aria-sort — developer.mozilla.org
• Adrian Roselli: "Under-Engineered Responsive Tables" — adrianroselli.com