Klaviatura accessibility'si: Tab tartibi, ko'rinadigan fokus va skip link

Qisqacha: Sichqonchasiz foydalanuvchi sahifada Tab bilan yuradi, shuning uchun har bir interaktiv element klaviatura bilan yetib boriladigan va fokusi doim ko'rinadigan bo'lishi kerak. Tab tartibi — HTML koddagi tartib. Sahifa boshidagi skip link menyuni sakrab o'tishga yordam beradi. Modal oynada fokus oyna ichida qoladi, yopilganda esa uni ochgan tugmaga qaytadi — native dialog buni o'zi qiladi.

Bu darsda

• Qaysi elementlar fokus oladi va Tab tartibi qanday aniqlanishini tushuntira olasiz.
• Klaviaturadagi asosiy tugmalar qayerda nima qilishini bilasiz.
• Fokus ko'rinishini saqlaysiz va :focus-visible nima ekanini tushunasiz.
• «Bahor» sahifasiga skip link qo'shasiz.
• Modal oynada fokus tuzog'i va fokusni qaytarish qanday ishlashini, "yomon tuzoq" nimaligini bilasiz.

Oldin bilishingiz kerak: Accessibility daraxti, Fokus va tahrir atributlari, dialog: native modal oyna, Sahifa landmarklari.

1. Nega bu kerak?

O'tgan darsda ekran o'quvchi sahifani accessibility daraxtidan o'qishini ko'rdik. Lekin daraxtni o'qish — yarim ish. Malika tugmani bosishi ham kerak. U sichqoncha ishlatmaydi: ekranni ko'rmasa, kursorni qayerga olib borishini bilmaydi. U faqat klaviatura bilan ishlaydi.

Klaviaturada yana kimlar ishlaydi?

• Qo'li titraydigan yoki falaj bo'lgan odam — sichqonchani aniq boshqara olmaydi.
• Qo'lini sindirib, bir hafta gipsda yurgan talaba.
• Noutbukining sensorli paneli buzilgan buxgalter.
• Tajribali dasturchilar — ular sichqonchaga qo'l cho'zishni yoqtirmaydi.

Ularning hammasi uchun bitta qoida bor. Sichqoncha bilan qila oladigan hamma narsani klaviatura bilan ham qilish mumkin bo'lsin. WCAG'da bu eng birinchi mezonlardan — 2.1.1 Keyboard (A daraja).

2. Klaviatura bilan yurish

2.1 Asosiy tugmalar

Bir nozik farq bor. Enter havolani ham, tugmani ham ishga tushiradi. Space esa faqat tugmani. Havola ustida Space bossangiz, sahifa pastga aylanadi. Mehmon buni kutadi — shuning uchun Tugma yoki havola darsidagi to'g'ri tanlov klaviaturada ham muhim.

Maslahat: macOS'dagi Safari'da Tab sukut bo'yicha faqat maydon va tugmalarga o'tadi, havolalarni o'tkazib yuboradi. Havolalarga ham o'tishi uchun Safari sozlamalarida Advanced → Press Tab to highlight each item on a webpage ni yoqing. Yoki Option + Tab ishlating.

2.2 Fokus nima?

Fokus (focus) — klaviatura hozir qaysi element bilan "gaplashayotgani". Bir vaqtda faqat bitta element fokusda bo'ladi. Enter bossangiz, aynan shu element ishlaydi.

Fokus — klaviaturadagi odamning sichqoncha kursori. Kursorsiz sichqonchani tasavvur qiling: qo'lingizni qimirlatasiz, lekin strelka qayerdaligini bilmaysiz. Fokus ko'rinmasa, klaviaturadagi odam xuddi shunday holatda qoladi.

2.3 Qaysi elementlar fokus oladi

Fokus va tahrir atributlari darsida tabindex ni o'rgangan edik. Endi to'liq manzarani yig'amiz:

Qoida oddiy: bosib ish bajariladigan narsa fokus oladi, faqat o'qiladigan narsa olmaydi. Sarlavha va paragrafni ekran o'quvchi o'zining alohida tugmalari bilan o'qiydi — ularga Tab kerak emas.

Tekshirib ko'ring: Nega <p tabindex="0">Osh — 35 000 so'm</p> yomon fikr?

3. Tab tartibi

3.1 Tab tartibi = kod tartibi

Tab elementlarni HTML koddagi tartibda aylanib chiqadi. Qulay forma darsida buni formada ko'rgan edik. Butun sahifada ham xuddi shunday:

<header>
  <nav aria-label="Asosiy menyu">
    <a href="./">Bosh sahifa</a>
    <a href="menyu.html">Menyu</a>
    <a href="aloqa.html">Aloqa</a>
  </nav>
</header>
<main>
  <h1>Bugungi menyu</h1>
  <button type="button">Stol band qilish</button>
</main>

Tartib: Bosh sahifa → Menyu → Aloqa → Stol band qilish. h1 o'tkazib yuboriladi — u fokus olmaydi.

Demak, eng yaxshi "fokus boshqaruvi" — HTML'ni mantiqiy tartibda yozish. WCAG'da bu 2.4.3 Focus Order mezoni.

3.2 Tartibni buzadigan ikki narsa

Musbat tabindex. tabindex="1", "2" kabi qiymatlar elementni navbatning boshiga olib chiqadi. Fokus va tahrir atributlari darsida bu tuzoqni ko'rgan edik: bitta element uchun ishlaydi, lekin sahifa o'sgani sari tartib chalkashib ketadi. Faqat 0 va -1 ishlating.

Ko'rinish va kod tartibi farqi. Keyinroq CSS bilan elementlarni joyidan siljitishni o'rganasiz. Masalan, kodda oxirida turgan tugmani ekranda tepaga chiqarish mumkin. Ko'z uni birinchi ko'radi, Tab esa oxirida yetib boradi. Qoida: ko'rinish tartibini o'zgartirsangiz, kodni ham o'zgartiring.

3.3 DevTools: Source Order Viewer

Chrome'da tartibni ko'z bilan tekshirish mumkin:

1. F12 → Elements → o'ng tomonda Accessibility yorlig'i.
2. Pastda Source Order Viewer bo'limida Show source order belgisini yoqing.
3. Elements'da body ni tanlang.

Sahifadagi har element ustida raqamli belgi paydo bo'ladi: 1, 2, 3... Raqamlar ekranda sakrab yursa (1 pastda, 2 tepada) — ko'rinish va kod tartibi farq qilyapti.

Tekshirib ko'ring: Quyidagi kodda Tab tartibi qanday?

html

<a href="menyu.html">Menyu</a>
<button type="button" disabled>Band qilish</button>
<a>Aksiyalar</a>
<input type="text" aria-label="Qidirish">

4. Ko'rinadigan fokus

4.1 Fokus halqasi

Fokusdagi element atrofida brauzer ramka chizadi. Unga fokus halqasi (focus ring) yoki outline deyiladi. Chrome ikki rangli halqa chizadi: to'q va oq. Shunda u och fonda ham, to'q fonda ham ko'rinadi.

WCAG 2.4.7 Focus Visible (AA) talab qiladi: klaviatura bilan ishlaganda fokus doim ko'rinsin. WCAG 2.2 bunga yana bitta mezon qo'shdi — 2.4.11 Focus Not Obscured. Fokusdagi element boshqa narsa, masalan, yopishqoq sarlavha yoki cookie banneri ostida butunlay yashirinib qolmasin.

4.2 Eng katta xato: outline: none

Ko'p dizaynerlar fokus halqasini "xunuk" deb hisoblaydi. Dasturchi esa CSS'da bitta qator bilan uni o'chiradi:

/* ❌ hech qachon bunday qilmang */
:focus {
  outline: none;
}

Bu bitta qator klaviaturadagi odamni "kursorsiz" qoldiradi. U sahifada qayerda ekanini bilmay qoladi. Accessibility auditlarida bu eng ko'p topiladigan klaviatura muammolaridan biri.

4.3 :focus-visible — kerak paytda ko'rinadigan fokus

Dizaynerning ham haqi bor. Sichqoncha bilan tugmani bosganda halqa chiqishi ko'pchilikka keraksiz tuyuladi. Shuning uchun brauzer ikki holatni farqlaydi:

• :focus — element fokusda, qanday bo'lishidan qat'i nazar.
• :focus-visible — element fokusda va halqa ko'rsatish kerak. Brauzer buni o'zi hal qiladi.

Chrome'da tekshirdik: Tab bilan kelingan tugma :focus-visible bo'ldi. Sichqoncha bilan bosilgan tugma esa faqat :focus bo'ldi, halqasiz. Matn maydoni esa har doim :focus-visible — unga yozish uchun qaysi biri faolligini ko'rish kerak.

Shuning uchun to'g'ri yondashuv — halqani o'chirish emas, uni chiroyli qilish:

/* ✅ klaviatura uchun aniq, sichqoncha uchun xalaqit bermaydi */
:focus-visible {
  outline: 3px solid #1a5d1a;
  outline-offset: 2px;
}

Hozir bu CSS'ni tushunish shart emas. Uni Holat pseudo-klasslari va CSS'da accessibility darslarida to'liq yozamiz. HTML qismida bitta qoida yetarli: brauzerning fokus halqasiga tegmang.

Tekshirib ko'ring: Dizayner "tugmani sichqoncha bilan bosganda ramka chiqmasin" dedi. Siz nima qilasiz?

5. Skip link: menyuni sakrab o'tish

5.1 Muammo

«Bahor» saytining har sahifasida tepada menyu bor: logotip, 6 ta havola, til tanlash, savat. Bu 9 ta Tab. Klaviaturadagi odam har yangi sahifada asosiy kontentga yetish uchun 9 marta Tab bosadi. 20 sahifani ko'rsa — 180 marta.

Ko'radigan odam menyuga e'tibor bermay, ko'zi bilan to'g'ridan-to'g'ri kontentga "sakraydi". Klaviaturadagi odamga ham shunday sakrash kerak. WCAG'da bu 2.4.1 Bypass Blocks (A daraja).

5.2 Yechim

Skip link (o'tkazib yuborish havolasi) — sahifadagi eng birinchi havola. U asosiy kontentga olib boradi:

<body>
  <a href="#asosiy" class="otish">Asosiy kontentga o'tish</a>

  <header>
    <nav aria-label="Asosiy menyu">
      <a href="./">Bosh sahifa</a>
      <a href="menyu.html">Menyu</a>
      <a href="aloqa.html">Aloqa</a>
    </nav>
  </header>

  <main id="asosiy">
    <h1>Bugungi menyu</h1>
    <button type="button">Stol band qilish</button>
  </main>
</body>

Bu — oddiy sahifa ichidagi havola: href="#asosiy" va main id="asosiy". Yangi hech narsa yo'q.

Chrome'da qanday ishlashini tekshirdik:

1. Sahifa ochildi, birinchi Tab — fokus skip link'da.
2. Enter — sahifa main ga o'tdi.
3. Keyingi Tab — fokus darhol "Stol band qilish" tugmasida. Menyu o'tkazib yuborildi.

2-qadamda fokus main ning o'ziga o'tmaydi — u fokus olmaydi. Lekin brauzer "keyingi Tab shu joydan boshlansin" deb eslab qoladi. Zamonaviy brauzerlarning hammasi shunday qiladi.

Maslahat: Ba'zi saytlarda main ga tabindex="-1" ham qo'shiladi. Fokus va tahrir atributlari darsidan eslang: -1 elementni Tab tartibiga qo'shmaydi, lekin havola orqali fokus olishiga ruxsat beradi. Shunda ekran o'quvchi main ga o'tganini aniqroq e'lon qiladi. Bu majburiy emas, lekin zarari ham yo'q.

5.3 Ko'rinmas, lekin fokusda ko'rinadigan

Skip link ko'pincha yashiriladi va faqat Tab bosilganda ekranga chiqadi. Sichqonchadagi odam uni ko'rmaydi, klaviaturadagi odam esa birinchi Tab da ko'radi. Bu CSS bilan qilinadi:

.otish {
  position: absolute;
  left: -9999px;
}
.otish:focus {
  left: 1rem;
  top: 1rem;
}

Buni ham CSS'da accessibility darsida to'liq yozamiz. Hozir bilish kifoya: skip link fokusda albatta ko'rinsin. Doim ko'rinmas skip link ko'radigan klaviatura foydalanuvchisiga foyda bermaydi — u fokus qayoqqa ketganini ko'rmaydi.

hidden atributi bilan yashirmang: hidden element fokus ham olmaydi.

Tekshirib ko'ring: Ekran o'quvchi foydalanuvchisi landmarklar bo'yicha main ga sakray oladi (Sahifa landmarklari). Unda skip link kimga kerak?

6. Fokus tuzog'i: yaxshisi va yomoni

6.1 Yaxshi tuzoq: modal oyna

Mehmon "Stol band qilish" tugmasini bosdi va modal oyna ochildi. Endi Tab qayerga borishi kerak?

Faqat oyna ichida. Oyna orqasidagi sahifa hozir ishlamaydi — u xiralashgan. Agar Tab orqadagi menyuga o'tib ketsa, klaviaturadagi odam ko'rinmaydigan havolalarda adashadi. Ekran o'quvchi foydalanuvchisi esa oyna yopildimi-yo'qmi, tushunmaydi.

Fokusni oyna ichida ushlab turish — fokus tuzog'i (focus trap). Bu holatda u yaxshi narsa.

6.2 Native dialog buni o'zi qiladi

dialog va Invoker commands darslaridagi bron oynasini olamiz:

<button type="button" commandfor="bron"
        command="show-modal">Stol band qilish</button>

<dialog id="bron" aria-labelledby="bron-sarlavha">
  <h2 id="bron-sarlavha">Stol band qilish</h2>
  <form method="dialog">
    <label for="ism">Ismingiz</label>
    <input id="ism" name="ism" type="text">
    <button type="submit">Tayyor</button>
  </form>
</dialog>

aria-labelledby oynaga nom beradi — o'tgan darsdagi 1-navbatdagi manba. Ekran o'quvchi oyna ochilganda "Stol band qilish, dialog" deydi.

Chrome'da klaviatura bilan tekshirdik:

Ko'ryapsizmi: Tab orqadagi sahifaga hech qachon o'tmadi. Faqat oyna va brauzerning o'z paneli orasida aylandi. Buni showModal rejimi beradi. U orqadagi hamma narsani inert qilib qo'yadi.

Brauzer paneliga chiqish — to'g'ri xatti-harakat. Odam oynadan charchasa, manzil qatoriga o'tib, boshqa saytga keta olishi kerak.

6.3 Fokusni qaytarish

Jadvalning oxirgi qatoriga qarang. Oyna yopilganda fokus uni ochgan tugmaga qaytdi. "Tayyor" tugmasi bilan yopganda ham shunday bo'ldi.

Bu juda muhim. Fokus qaytmasa, u sahifa boshiga — body ga tushib qoladi. Klaviaturadagi odam yana menyudan boshlab, Tab bilan o'z joyini qidiradi. Ekran o'quvchi esa jim qoladi.

Popover'da ham xuddi shunday. Tekshirdik: popover ichida Esc bosilganda fokus uni ochgan tugmaga qaytdi. Ochiq popover'ga esa Tab tugmadan keyin darhol kiradi, garchi popover kodda ancha pastda tursa ham.

Diqqat: Bularning hammasi faqat native dialog va popover da bepul. div dan yasalgan "modal" da fokus o'z-o'zidan ichkariga kirmaydi, ichida ushlanmaydi va qaytmaydi. Uni JavaScript bilan qo'lda yozish kerak bo'ladi. Bu esa ko'p xatoga olib keladi. Qoida: modal kerak bo'lsa — dialog.

6.4 Yomon tuzoq: keyboard trap

Endi teskari holat. Klaviatura tuzog'i (keyboard trap) — foydalanuvchi elementga Tab bilan kira oladi, lekin undan chiqa olmaydi. WCAG 2.1.2 No Keyboard Trap (A daraja) buni taqiqlaydi.

Qayerda uchraydi:

• Sahifaga joylangan xarita, video pleyer yoki chat vidjeti Tab ni "yutib" yuboradi.
• Kod muharririda Tab probel qo'yadi va fokusni chiqarmaydi.
• Yopish tugmasi yo'q, Esc ham ishlamaydigan "modal".

Yaxshi va yomon tuzoq farqi: yaxshisida chiqish yo'li bor (Esc, "Yopish" tugmasi, brauzer paneli). Yomonida yo'q.

Maslahat: VS Code'da ham shu muammo bor: kod ichida Tab probel qo'yadi. Shuning uchun unda maxsus buyruq bor — Ctrl + M bosilsa, Tab fokusni keyingi panelga o'tkaza boshlaydi. Pastki holat qatorida "Tab Moves Focus" yozuvi chiqadi. Yaxshi dastur chiqish yo'lini doim beradi.

Tekshirib ko'ring: Nega oyna yopilgandan keyin fokus body ga tushishi yomon?

7. Roving tabindex: bir guruh — bitta Tab

7.1 Radio guruhini eslang

Qulay forma darsida radio guruhida Tab guruhga bir marta kirishini ko'rgan edik. Chrome'da tekshirdik: Tab belgilangan radio'ga tushdi, strelka keyingisiga o'tkazdi, keyingi Tab esa guruhdan butunlay chiqdi.

Uchta radio uchun uchta Tab emas, bitta. Qolganlari — strelkalar bilan.

7.2 O'z guruhlarimizda ham shunday

«Bahor» menyusining tepasida 8 ta filtr tugmasi bor: "Hammasi", "Oshlar", "Sho'rvalar", "Kaboblar"... Klaviaturadagi odam taomlarga yetish uchun 8 marta Tab bosadi.

Radio guruhidagi usulni o'zimizning tugmalarga ham qo'llash mumkin. Buning nomi — roving tabindex ("ko'chib yuruvchi tabindex"). G'oya:

• Guruhda faqat bitta tugmada tabindex="0". U Tab tartibida turadi.
• Qolganlarida tabindex="-1". Ular Tab tartibidan chiqarilgan.
• Strelka bosilganda 0 keyingi tugmaga "ko'chadi".

HTML'da bir lahzadagi holat shunday ko'rinadi:

<div class="filtr">
  <button type="button" tabindex="-1">Hammasi</button>
  <button type="button" tabindex="0">Oshlar</button>
  <button type="button" tabindex="-1">Sho'rvalar</button>
  <button type="button" tabindex="-1">Kaboblar</button>
</div>

Hozir "Oshlar" tanlangan. Tab guruhga kirsa, aynan unga tushadi. O'ng strelka bosilganda 0 "Sho'rvalar" ga o'tishi kerak. Lekin bu o'tishni JavaScript qiladi — HTML strelkalarni o'zi tushunmaydi.

Shuning uchun hozircha bu faqat tanishuv. To'liq pattern'ni rollar bilan ARIA Authoring Practices darsida ko'ramiz, JavaScript qismini esa Dinamik UI'da qulaylik darsida yozamiz. Hozirgi xulosa: oddiy tanlov uchun radio guruhi bu ishni JavaScript'siz, bepul qiladi.

8. "Tab testi": o'z sahifangizni tekshiring

Eng yaxshi tekshiruv vositasi — sizning klaviaturangiz. Sichqonchani chetga qo'ying va sahifani boshidan oxirigacha faqat klaviatura bilan o'ting:

Maslahat: Fokus ko'rinmay qolsa, uni DevTools'da kuzatish mumkin. Console panelida ko'z belgisini (Create live expression) bosing va document.activeElement deb yozing. Endi fokusdagi element har doim shu yerda ko'rinib turadi. Bu JavaScript ifodasi — hozircha uni tayyor "sehrli so'z" deb qabul qiling, 08-qismdan boshlab tushunasiz.

9. Ko'p uchraydigan xatolar

9.1 div va span dan tugma

<!-- ❌ Tab yetib bormaydi, Enter ishlamaydi -->
<div class="tugma">Savatga</div>

O'tgan darsda uning daraxtda "generic" ekanini ko'rgan edik. Klaviaturada esa u umuman yo'q: Tab uni o'tkazib yuboradi. Tuzatish: <button type="button">.

9.2 Fokus halqasini o'chirish

outline: none yoki outline: 0 — o'rniga hech narsa qo'yilmasa, fokus ko'rinmaydi. Tuzatish: o'chirmang; o'zgartirish kerak bo'lsa, :focus-visible da chiroyli ramka bering.

9.3 Musbat tabindex

tabindex="5" Tab tartibini buzadi. Tuzatish: kodni to'g'ri tartibda yozing, faqat 0 va -1 ishlating.

9.4 Doim ko'rinmas skip link

Skip link bor, lekin fokusda ham ko'rinmaydi. Klaviaturadagi odam birinchi Tab da fokus qayoqqa ketganini tushunmaydi. Tuzatish: skip link fokusda ekranga chiqsin.

9.5 Fokus yopishqoq sarlavha ostida qoldi

Sahifa pastga aylanganda sarlavha tepada qotib turadi. Tab bilan kelgan element esa aynan uning ostida — ko'rinmaydi. Bu WCAG 2.4.11 ni buzadi. Tuzatish: CSS'da maxsus chekinish beriladi — CSS qismida ko'ramiz. HTML tomonida esa fokus har doim ko'rinayotganini Tab testi bilan tekshiring.

10. Mashqlar

1-mashq (oson): Tab tartibini ayting

Quyidagi kodda Tab qaysi elementlarda, qaysi tartibda to'xtaydi?

<a href="#asosiy">Asosiy kontentga o'tish</a>
<h1>Choyxona «Bahor»</h1>
<p tabindex="0">Har kuni 7:00 dan 23:00 gacha</p>
<a href="menyu.html">Menyu</a>
<span>Aloqa</span>
<main id="asosiy">
  <button type="button" disabled>Band qilish</button>
  <input type="search" aria-label="Taom qidirish">
</main>

2-mashq (o'rta): «Bahor» sahifasiga skip link

Quyidagi sahifaga skip link qo'shing. Keyin faylni brauzerda ochib, tekshiring: birinchi Tab, Enter, keyingi Tab — fokus qayerda?

<body>
  <header>
    <nav aria-label="Asosiy menyu">
      <a href="./">Bosh sahifa</a>
      <a href="menyu.html">Menyu</a>
      <a href="aloqa.html">Aloqa</a>
    </nav>
  </header>
  <main>
    <h1>Aloqa</h1>
    <a href="tel:+998900000000">
      +998&nbsp;90&nbsp;000&nbsp;00&nbsp;00
    </a>
  </main>
</body>

Eslatma: sahifa ichidagi havola uchun href="#..." va maqsad elementda xuddi shu id kerak — Sahifa ichidagi havolalar.

<body>
  <a href="#asosiy" class="otish">Asosiy kontentga o'tish</a>
  <header>
    <nav aria-label="Asosiy menyu">
      <a href="./">Bosh sahifa</a>
      <a href="menyu.html">Menyu</a>
      <a href="aloqa.html">Aloqa</a>
    </nav>
  </header>
  <main id="asosiy">
    <h1>Aloqa</h1>
    <a href="tel:+998900000000">
      +998&nbsp;90&nbsp;000&nbsp;00&nbsp;00
    </a>
  </main>
</body>

3-mashq (qiyin): Buyurtmani bekor qilish oynasi

«Bahor» saytidagi "Buyurtmalarim" sahifasida har buyurtma yonida "Bekor qilish" tugmasi bor. Bosilganda modal oyna ochiladi: "Buyurtmani bekor qilasizmi?" va ikki tugma — "Ha, bekor qilish" va "Yo'q, qoldirish".

1. Oynani dialog, commandfor va command bilan yozing. Ikkala tugma ham oynani yopsin.
2. Oynaga aria-labelledby bilan nom bering.
3. Klaviatura yo'lini jadval qilib yozing: tugmada Enter → ... → Esc. Fokus har qadamda qayerda?

Eslatma: oynani yopish uchun command="close" (Invoker commands). Oyna ichida qaysi tugma birinchi fokus olishini autofocus bilan tanlash mumkin (dialog).

<button type="button" commandfor="bekor"
        command="show-modal">Bekor qilish</button>

<dialog id="bekor" aria-labelledby="bekor-sarlavha">
  <h2 id="bekor-sarlavha">Buyurtmani bekor qilasizmi?</h2>
  <p>Osh va 2 ta choy, 41 000 so'm.</p>
  <button type="button" commandfor="bekor"
          command="close" autofocus>Yo'q, qoldirish</button>
  <button type="button" commandfor="bekor"
          command="close">Ha, bekor qilish</button>
</dialog>

11. Real ishda

• Katta saytlar. GitHub, GOV.UK va Wikipedia'da sahifani ochib, birinchi Tab ni bosing — "Skip to content" yoki "Jump to content" havolasi chiqadi. Bu yirik saytlarda standart.
• Klaviatura yorliqlari. Gmail, GitHub va YouTube o'z tugma yorliqlariga ega (? bosilsa, ro'yxat chiqadi). Bu keyingi bosqich — lekin avval oddiy Tab ishlashi kerak.
• Dizayn tizimlari. Kompaniyalarning tayyor komponentlarida :focus-visible uslubi bir marta yoziladi va hamma joyda ishlatiladi. Dizayner fokus holatini maketda alohida chizadi.
• Intervyuda so'raladi: ":focus va :focus-visible farqi?", "Skip link nima?", "Modal oynada fokusni qanday boshqarasiz?". Uchinchi savolga eng yaxshi javob: "native dialog va showModal — tuzoq, Esc va fokus qaytishi bepul".

Xulosa

• Sichqoncha bilan qilinadigan hamma narsa klaviatura bilan ham bo'lishi kerak (WCAG 2.1.1).
• Tab tartibi — kod tartibi; musbat tabindex ishlatmang, ko'rinish tartibini koddan uzoqlashtirmang.
• Fokus doim ko'rinsin: outline ni o'chirmang, :focus-visible brauzerga "qachon ko'rsatish"ni hal qilishga yordam beradi.
• Skip link — body dagi birinchi havola, main ga olib boradi va fokusda ko'rinadi.
• Modal oynada fokus ichkarida qoladi va yopilganda ochgan tugmaga qaytadi — dialog buni o'zi qiladi; chiqish yo'li yo'q tuzoq esa taqiqlangan.
• Roving tabindex guruhni bitta Tab ga aylantiradi; oddiy tanlov uchun radio guruhi yetarli.

Keyingi dars: ARIA asoslari — HTML semantikasi yetmaganda rol va holatni qanday qo'shish va nega noto'g'ri ARIA uning yo'qligidan yomonroq.

Manbalar

• W3C WAI: WCAG 2.2 — 2.1.1, 2.1.2, 2.4.1, 2.4.3, 2.4.7, 2.4.11 va "Understanding" sahifalari — w3.org/WAI
• MDN: ":focus-visible", "tabindex", "Keyboard-navigable JavaScript widgets" — developer.mozilla.org
• WebAIM: "Keyboard Accessibility" va "Skip Navigation Links" — webaim.org
• HTML Living Standard: "Focus" va "The dialog element" — html.spec.whatwg.org