Klaviatura asoslari

Klaviatura asoslari

Hamma ham sichqonchadan foydalanmaydi. Harakat cheklovlariga ega odamlar, screen reader ishlatuvchilar va ko'plab tajribali foydalanuvchilar butunlay klaviatura bilan harakatlanadi. Agar sahifangiz faqat sichqoncha bilan ishlasa, siz o'sha odamlarni chetlab qo'ygansiz. Yaxshi xabar: asoslarni to'g'ri qiling va klaviatura qo'llab-quvvatlash asosan bepul keladi.

Klaviatura navigatsiyasi qanday ishlaydi

Foydalanuvchilar keyingi interaktiv elementga o'tish uchun Tab ni, orqaga qaytish uchun Shift+Tab ni bosib sahifa bo'ylab harakatlanadi. Element ustida focus bo'lgach, ular uni Enter yoki Space bilan faollashtiradi (tugmalar va havolalar uchun). Hozirda focus bo'lgan element — bosishlar boradigan joy.

Faqat ma'lum elementlar standart bo'yicha focus qilinadigan: havolalar (href bilan <a>), <button>, forma maydonlari va yana bir nechtasi. Bu haqiqiy semantik elementlardan foydalanishning yana bir sababi — haqiqiy <button> Tab bilan yetiladigan, bosiladigan <div> esa emas.

Tab tartibi

Tab tartibi (tab order) — Tab ni bosish sahifa bo'ylab harakatlanadigan ketma-ketlik. Standart bo'yicha u HTML tartibiga rioya qiladi, yuqoridan pastga. Bu odatda aynan xohlagan narsangiz, shuning uchun eng oddiy qoida: HTML ingizni mantiqiy o'qish tartibida yozing, tab tartibi esa o'zini o'zi hal qiladi.

Narsalarni qayta tartiblash uchun tabindex atributini musbat raqamlar bilan ishlatishdan qoching — bu deyarli har doim chalkash, saqlash qiyin tartib yaratadi. Agar sizga focus qilinmaydigan narsani focus qilinadigan qilish kerak bo'lsa (kamdan-kam), tabindex="0" uni navbatni buzmasdan tabiiy tartibga qo'shadi.

Ko'rinadigan focus

Element focus qilinganda, brauzer focus indikatorini chizadi — odatda uning atrofidagi kontur halqasi. Klaviatura foydalanuvchilari sahifada qayerda ekanliklarini shu tarzda bilishadi. Usiz Tab bosish ko'r-ko'rona harakatlanishday his qilinadi.

Juda keng tarqalgan va zararli xato — o'sha konturni ko'rinish uchun olib tashlash:

/* Don't do this — it hides focus from keyboard users */
button:focus {
  outline: none;
}

Focus uslubini almashtirmasdan hech qachon olib tashlamang. Agar standart halqa dizayningizga zid bo'lsa, o'rniga o'zingizning aniq ko'rinadigan focus holatingizni uslublang:

button:focus-visible {
  outline: 3px solid #0066ff;
  outline-offset: 2px;
}

:focus-visible selektori qulay — u klaviatura foydalanuvchilari uchun halqani ko'rsatadi, lekin oddiy sichqoncha bosishlarida emas, sizga ikkalasining eng yaxshisini beradi.

Narsalarni ishlatiladigan qilish

To'liq test oddiy: kimdir har bir interaktiv narsaga faqat klaviatura bilan yeta va uni ishlata oladimi? Buni o'zingiz sinab ko'ring — sichqonchani chetga qo'ying, sahifangiz bo'ylab Tab bosing va har bir boshqaruvni Enter yoki Space bilan faollashtiring. Agar hamma narsani qila olsangiz, klaviatura foydalanuvchisi ham qila oladi. Agar biror narsa tiqilib qolsa yoki ko'rinmas bo'lsa, bu tuzatish kerak bo'lgan xato.

Suhbat maslahatlari

• Asosiy o'zaro ta'sirni tasvirlab bering: focusni ko'chirish uchun Tab va Shift+Tab, faollashtirish uchun Enter/Space.
• Tab tartibi HTML tartibiga rioya qilishini ta'kidlang, shuning uchun mantiqiy markup asosiy vosita — va musbat tabindex ga qarshi ogohlantiring.
• Ko'rinadigan almashtirishsiz focus konturlarini hech qachon olib tashlamaslik kerakligini tushuntiring va :focus-visible ni eslatib o'ting.