Vizual fokus

---

Nega

Vizual fokus klaviatura va switch qurilmalariga tayanadigan barcha foydalanuvchilar uchun juda muhim.

---

Nima

Havola holatlari haqida gaplashganimizda vizual fokus haqida biroz bilib olgan edingiz. Keling, chuqurroq o‘rganamiz. Vizual fokus ba’zan klaviatura fokusi yoki tab fokusi deb ham ataladi. Bu klaviatura fokusiga ega interaktiv komponentdagi vizual ko‘rsatkich. Bu effekt ko‘pincha hoshiya (border) yoki kontur (outline) ko‘rinishida bo‘ladi.

---

Qanday

Fokusni olib tashlamaslikni va fokusni bezatishning ikki variantini o‘rganasiz.

---

Fokusni olib tashlamang yoki yashirmang

Bu modulning eng muhim xulosasi shu. Nima qilsangiz ham, fokusni olib tashlamang. Mana bu CSS qatori ko‘plab insonlar uchun qulaylikni buzmoqda:

outline: 0;

Fokusni yashirishning yana bir keng tarqalgan usuli — ota elementning fokusni ko‘rsatish uchun juda kichik bo‘lishi va quyidagi xossa bilan birgalikda ishlatilishi:

overflow: hidden;

Ko‘pchilik brauzerlar interaktiv elementning vizual fokusini ko‘rsatish uchun outline xossasidan foydalanadi. Bizda ikkita variant bor: uni o‘z holicha qoldirish yoki moslashtirish. Olib tashlash esa variant emas.

Airbnb’dan olingan ushbu misolda Ålesund manzili fokusdagi element. Biroq buni aniqlab bo‘lmaydi. Buning sababi — ota <div> elementida overflow: hidden; bor

---

---

1-variant: Sukut bo‘yicha fokusdan foydalanish

Vizual fokusni boshqarishning eng oson yo‘li — buni brauzerga qoldirish. Buning ko‘plab afzalliklari bor:

• Vizual fokusga tayanadigan foydalanuvchilar uni osongina taniydi.
• Hech narsa kodlashingiz shart emas.
• Foydalanuvchilar kutilmagan holatlarga duch kelmaydi.

overflow: hidden; olib tashlangach, sukut bo‘yicha fokus uslubi ko‘rinadi. Mobil rejimdagi Chrome brauzeri to‘q sariq konturdan foydalanadi. Mobil qurilmalarda klaviatura fokusi muhim emas deb o‘ylashingiz mumkin. Bu noto‘g‘ri tushuncha. Odamlar mobil qurilmalarda ham klaviatura va boshqa yordamchi texnologiyalardan foydalanadi.

---

2-variant: Vizual fokusni moslashtirish

Sukut bo‘yicha fokus bilan bog‘liq ba’zi muammolar ham bor.

• Sukut bo‘yicha uslub saytning rang palitrasiga mos kelmasligi mumkin.
• Sukut bo‘yicha uslub saytning rang palitrasiga juda o‘xshash bo‘lishi mumkin.
• Sukut bo‘yicha uslub barcha brauzerlarda yetarlicha ko‘rinmaydi.

Momondo sayohat saytining rang palitrasi yorqin. Ular vizual fokus sifatida ishlatish uchun palitrasidan biror rangni tanlashlari mumkin.

Bu Momondo veb-saytining o‘zgartirilgan versiyasi bo‘lib, unda Trips havolasi pushti va oq konturli fokus holatida ko‘rsatilgan. Pushti rang ularning palitrasidan olingan va qidiruv tugmasi rangi bilan bir xil.

Aytgancha, qidiruv tugmasi oq matn bilan ishlatilganda rang kontrasti yetarli emas. Kontrast nisbati atigi 3.33. Biroq to‘q binafsha fonda vizual fokus sifatida ishlatilganda kontrast yaxshiroq — nisbat 5.47 ga teng.

---

CSS outline

Maxsus vizual fokusni yaxshiroq yaratish uchun turli CSS outline xossalarini bilishingiz kerak. W3Schools’ga o‘tib, outline’ning uslubi (style), rangi (color), qalinligi (width) va chetlanishi (offset) haqida o‘rganing. Endi klaviatura bilan qulay ishlaydigan interfeyslar yaratishga yaxshiroq tayyorsiz.

---