Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Havola holatlari

ULASHISH

Nega

Turli havola holatlari foydalanuvchilarga havolalar bilan ishlashda yordam beradi. Tashrif buyurilgan (visited) holat qisqa muddatli xotirasi zaif insonga qaysi kontent o‘qilganini tushunishga yordam beradi. Hover holati mushaklarini boshqarish qobiliyati pasaygan insonga qachon bosish kerakligini bilishga yordam beradi. Fokusdagi havola klaviatura foydalanuvchilariga qaysi havolani faollashtirmoqchi ekanini bilishga yordam beradi.

Nima

Havolalar deyarli tanishtirishga muhtoj emas. Ular vebning yuragi. Havolaning ko‘plab holatlari bor. Quyida eng keng tarqalgan beshtasi keltirilgan. CSS atamalarida bular psevdoklasslar deb ataladi:

  • Tashrif buyurilmagan (unvisited)
  • Tashrif buyurilgan (visited)
  • Hover (sichqoncha ustida)
  • Faol (active)
  • Fokus (focus)

Qanday

Barcha havola holatlari qulay bo‘lishini ta’minlash uchun quyidagi uchta maslahatni yodda tutishimiz kerak. Xalqaro Qizil Xoch qo‘mitasi — ICRC bosh sahifasidagi misoldan foydalanamiz.

Screenshot from the front page of ICRC, International Committee of the Red Cross.

1. Tag chiziq

Havolalarning tagi sukut bo‘yicha chizilgan bo‘ladi. Asosiy matndagi havoladan tag chiziqni olib tashlash ko‘p hollarda yomon fikr. Buni faqat rang haqidagi bo‘limda bilib olgan edik. Bu ayniqsa tashrif buyurilmagan va tashrif buyurilgan havolalar uchun muhim.

ICRC misolida asosiy matnda bitta havola bor – rules of war. Tag chiziqsiz. Keling, stillar jadvalidan text-decoration: none; qatorini olib tashlaymiz:

Screenshot from ICRC, where the link has underline.

Endi havola ranglarni ajrata olmaydigan (daltonizmli) insonlar uchun ham qulay.

2. Kontrast va fokus

Rang kontrasti darsida bilib olganimizdek, barcha holatlar yetarli kontrastga ega bo‘lishi kerak. Bundan tashqari, fokusdagi havola fokussiz holatga nisbatan yetarli kontrastga ega bo‘lishi kerak.

Screenshot from ICRC showing a focused link that is hard to read.

Endi rules of war havolasi fokus holatida. Matn atrofida hech qanday chetlanishsiz (offset) to‘q sariq kontur (outline) bor. Bu fokus holatida ikkita muammo bor. Birinchidan, to‘q sariq kontur oq fonga nisbatan past kontrastga ega. Ikkinchidan, chetlanish yo‘qligi matnni o‘qishni qiyinlashtiradi. Keling, saytning rang palitrasida allaqachon mavjud bo‘lgan qizil rangdan foydalanamiz va biroz chetlanish qo‘shamiz.

Screenshot from ICRC showing a readable focused link with a red outline.

Ancha yaxshi! Harakatlanish uchun klaviaturadan foydalanadigan va/yoki ko‘rish qobiliyati pasaygan insonlar uchun qulay bo‘lgan fokusdagi havola.

Bu yaxshilanishda outline-color va outline-offset CSS xossalaridan foydalanildi.

3. Hover

Aniq hover holati hamma uchun, ayniqsa harakat faoliyati buzilgan insonlar uchun foydali.

Animated image from ICRC shoing a subtle hover effect.

ICRC saytining footer qismida tezkor havolalar to‘plamini ko‘rishingiz mumkin. Ularning hover holati juda sezilmas — rang och kulrangdan oqqa o‘zgaradi. Bu effektni yaxshilash mumkin.

Screenshot from ICRC with an improved hover effect, making the text bold.

Bu misolda hover holati uchun bitta effekt — qalin matn qo‘shdik. Endi foydalanuvchi qanday amalni bajarmoqchi ekani aniqroq.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish