M

MLOG

O'zbek

Barcha foydalanuvchilar, shu jumladan nogironligi bo‘lgan shaxslar uchun qulaylikni ta'minlovchi, hover va fokus holatlaridan foydalanib, qulay tooltip'larni joriy qilish bo‘yicha to‘liq qo‘llanma.

Tooltipni joriy etish: Hover va Fokus orqali qulay ma'lumotlar

Tooltip'lar (maslahat oynalari) — bu foydalanuvchi sichqoncha kursorini biror element ustiga olib kelganda (hover) yoki unga fokuslanganda paydo bo'ladigan kichik, kontekstli yordam xabarlari. Ular qo'shimcha ma'lumot berishi, elementning maqsadini aniqlashtirishi yoki funksiyadan qanday foydalanish bo'yicha maslahatlar taklif qilishi mumkin. Biroq, agar to'g'ri joriy etilmasa, tooltip'lar qulaylik (accessibility) jihatidan jiddiy muammolarga olib kelishi mumkin. Ushbu qo'llanma hamma, shu jumladan imkoniyati cheklangan foydalanuvchilar ham ishlata oladigan tooltip'larni yaratish bo'yicha eng yaxshi amaliyotlarni o'z ichiga oladi.

Nima uchun Tooltip'larda qulaylik muhim?

Qulaylik (accessibility) — bu shunchaki talablarga rioya qilish emas; bu hamma uchun yaxshiroq foydalanuvchi tajribasini yaratishdir. Tooltip'lar qulay bo'lmasa, ekran o'qish dasturlari (screen readers), klaviatura navigatsiyasi yoki nutq orqali kiritish kabi yordamchi texnologiyalarga tayanadigan foydalanuvchilarni chetda qoldirishi mumkin. Quyidagi holatlarni ko'rib chiqing:

Qulaylik bo'yicha eng yaxshi amaliyotlarga rioya qilish orqali biz tooltip'lar barcha foydalanuvchilarning tajribasiga xalaqit bermasdan, aksincha, uni yaxshilashini ta'minlay olamiz.

Qulay Tooltip'lar uchun asosiy tamoyillar

Qulay tooltip'larni yaratish uchun quyidagi tamoyillar juda muhim:

  1. Muqobil kirishni ta'minlang: Tooltip'larga ham "hover", ham klaviatura fokusi orqali kirish mumkinligiga ishonch hosil qiling.
  2. ARIA atributlaridan foydalaning: Yordamchi texnologiyalarga tooltip'larni to'g'ri aniqlash va tavsiflash uchun ARIA (Accessible Rich Internet Applications) atributlaridan foydalaning.
  3. Fokusni boshqaring: Tooltip ko'rsatilganda va yashirilganda fokus qayerga o'tishini nazorat qiling.
  4. Yetarli kontrastni ta'minlang: Tooltip matni va foni o'rtasida yetarli rang kontrastini ta'minlang.
  5. Yetarli vaqt bering: Foydalanuvchilarga tooltip tarkibini o'qish uchun yetarli vaqt bering.
  6. Yopish imkoniyatini yarating: Tooltip'ni yopishning aniq usulini ta'minlang.
  7. Ortiqcha ishlatishdan saqlaning: Tooltip'lardan tejamkorlik bilan va faqat zarur bo'lganda foydalaning.

Joriy etish usullari

1. Hover va Fokusdan foydalanish

Qulay tooltip'larning eng muhim jihati ularning ham sichqoncha, ham klaviatura foydalanuvchilari uchun qulay bo'lishini ta'minlashdir. Bu shuni anglatadiki, tooltip ham "hover" holatida, ham element fokus olganda paydo bo'lishi kerak.

HTML:

<a href="#" aria-describedby="tooltip-example">Misol Havola</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Bu misol uchun tooltip.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Tooltip yuqorida turishini ta'minlash */
}

Tushuntirish:

JavaScript (Kengaytirilgan boshqaruv - Ixtiyoriy):

CSS oddiy ko'rsatish/yashirishni amalga oshira olsa-da, JavaScript, ayniqsa, tooltip'lar dinamik ravishda yaratilganda yoki murakkabroq harakatlarga muhtoj bo'lganda, yanada mustahkam nazoratni ta'minlaydi.

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. ARIA atributlaridan foydalanish

ARIA atributlari yordamchi texnologiyalarga semantik ma'lumotlarni taqdim etish uchun juda muhimdir. Asosiy atributlarning tahlili quyidagicha:

Misol:

<button aria-describedby="help-tooltip">Yuborish</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Formani yuborish uchun shu yerni bosing.</div>

JavaScript (aria-hidden uchun):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. Fokusni boshqarish

Tooltip paydo bo'lganda, u odatda fokusni ishga tushiruvchi elementdan *olib qo'ymasligi kerak*. Fokus tooltip'ni ishga tushirgan elementda qolishi kerak. Bu klaviatura foydalanuvchilari sahifada kutilmagan uzilishlarsiz harakatlanishda davom etishini ta'minlaydi.

Biroq, siz fokusni tooltip'ga o'tkazishni *xohlagan* holatlar ham bo'lishi mumkin, ayniqsa tooltip interaktiv elementlarni (masalan, havolalar, tugmalar) o'z ichiga olsa. Bunday holda, quyidagilarga ishonch hosil qiling:

Aksariyat hollarda, soddalik va qulaylik uchun tooltip ichida fokusni boshqarishdan qochish afzalroqdir.

4. Yetarli kontrastni ta'minlash

Rang kontrasti o'qish uchun juda muhim. Tooltip'laringizdagi matn rangi fon rangiga nisbatan yetarli kontrastga ega ekanligiga ishonch hosil qiling. Veb-kontentga qulaylik bo'yicha yo'riqnomalar (WCAG) oddiy matn uchun kamida 4.5:1 va katta matn (18pt yoki 14pt qalin) uchun 3:1 kontrast nisbatini tavsiya qiladi.

Rang tanlovlaringiz qulaylik standartlariga mos kelishini tekshirish uchun onlayn kontrast tekshiruvchilaridan foydalaning. Kontrast tekshiruvchilarga misollar:

Misol (Yaxshi kontrast):

.tooltip {
  background-color: #000;
  color: #fff;
}

Misol (Yomon kontrast):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. Yetarli vaqt berish

Foydalanuvchilarga tooltip tarkibini o'qish uchun yetarli vaqt kerak. Juda tez yo'qolib qoladigan tooltip'lardan saqlaning. Aniq bir raqam bo'lmasa-da, bir necha soniyalik minimal ko'rsatish vaqtini maqsad qiling. Shuningdek, foydalanuvchi sichqonchani ishga tushiruvchi element ustida ushlab turgan yoki unga fokuslangan ekan, tooltip ko'rinib turishi kerak. Agar boshqa hodisalar tufayli tooltip'ni yopishingiz kerak bo'lsa, tooltip yopilishi haqida indikator taqdim eting.

Agar tooltip tarkibi uzun bo'lsa, foydalanuvchiga tooltip'ni qo'lda yopish imkoniyatini berishni o'ylab ko'ring (masalan, yopish tugmasi yoki Escape klavishini bosish).

6. Ularni yopiladigan qilish

Garchi tooltip'lar ko'pincha foydalanuvchi sichqonchani chetga olganda yoki fokusni olib tashlaganda avtomatik ravishda yo'qolsa-da, ularni qo'lda yopishning aniq usulini taqdim etish yaxshi amaliyotdir, ayniqsa uzun tooltip'lar yoki interaktiv elementlarni o'z ichiga olgan tooltip'lar uchun.

Tooltip'larni yopish usullari:

Misol (Yopish tugmasi):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Bu mening tooltip tarkibim.
  <button onclick="hideTooltip()">Yopish</button>
</div>

Misol (Escape klavishi):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // O'zingizning tooltip yashirish funksiyangiz bilan almashtiring
  }
});

7. Ortiqcha ishlatishdan saqlanish

Tooltip'lardan tejamkorlik bilan va faqat haqiqatan ham foydali ma'lumot berganida foydalanish kerak. Tooltip'larni ortiqcha ishlatish interfeysni murakkablashtirishi, foydalanuvchilarni chalg'itishi va noqulay tajriba yaratishi mumkin.

Tooltip'larga muqobillar:

Kengaytirilgan mulohazalar

Dinamik tarkib

Agar sizning tooltip tarkibingiz dinamik ravishda yaratilsa (masalan, API'dan yuklangan yoki foydalanuvchi kiritishiga qarab yangilangan bo'lsa), aria-describedby atributi va tooltip ko'rinishi mos ravishda yangilanishini ta'minlang. Ushbu yangilanishlarni boshqarish uchun JavaScript'dan foydalaning.

Joylashuv

Tooltip'laringizning joylashuvini diqqat bilan o'ylab ko'ring. Ularni muhim tarkibni to'sib qo'yadigan yoki maket siljishiga olib keladigan tarzda joylashtirishdan saqlaning. Turli ekran o'lchamlari va ruxsatlariga e'tibor bering va tooltip'lar har doim ko'rish maydoni (viewport) ichida ko'rinib turishini ta'minlash uchun CSS'dan foydalaning.

Mobil qurilmalar

Tooltip'lar an'anaviy ravishda sensorli qurilmalarda mavjud bo'lmagan "hover" o'zaro ta'sirlariga tayanadi. Mobil qurilmalar uchun quyidagi kabi muqobil o'zaro ta'sir usullaridan foydalanishni o'ylab ko'ring:

Tooltip'laringizni sinovdan o'tkazish

Tooltip'laringiz barcha foydalanuvchilar uchun qulay ekanligiga ishonch hosil qilish uchun ularni sinchkovlik bilan sinovdan o'tkazing. Qo'lda sinovdan o'tkazish va avtomatlashtirilgan qulaylikni sinash vositalarining kombinatsiyasidan foydalaning.

Sinov usullari:

Internatsionalizatsiya (i18n) va Mahalliylashtirish (l10n)

Global auditoriya uchun tooltip'lar ishlab chiqayotganda, internatsionalizatsiya va mahalliylashtirishni yodda tuting:

Xulosa

Qulay tooltip'larni joriy etish sinchkovlik bilan rejalashtirishni va detallarga e'tibor berishni talab qiladi. Ushbu qo'llanmada keltirilgan tamoyillar va usullarga rioya qilish orqali siz, qobiliyatidan qat'i nazar, hamma uchun qulay bo'lgan tooltip'larni yaratishingiz mumkin. Yodda tutingki, qulaylik — bu davomiy jarayon, shuning uchun tooltip'laringiz barcha foydalanuvchilaringizning ehtiyojlariga javob berishini ta'minlash uchun ularni sinab ko'rishda va takomillashtirishda davom eting.

Manbalar

Tooltipni joriy etish: Hover va Fokus orqali qulay ma'lumotlar | MLOG