Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

CSS foydalanish qulayligi

ULASHISH

CSS kirish imkoniyati (accessibility) uslublash

Veb-sayt nogironligi bo‘lganlar ham qo‘shilgan barcha foydalanuvchilar uchun yaxshi kirish imkoniyatini ta’minlash maqsadida loyihalanishi kerak.

CSS kirish imkoniyati uslublari vizual aniqlik, navigatsiya va umumiy foydalanuvchi tajribasini yaxshilash maqsadida yaxshi uslublash usullaridan foydalanish haqidadir.

CSS kirish imkoniyati uslublash usullari

Veb-saytingiz kirish imkoniyatini yaxshilash bo‘yicha ba’zi maslahat va usullar:

1. Yuqori rang kontrastini ta’minlash

O‘qilchanlik uchun matn va fon orasida doim yaxshi rang kontrastidan foydalaning. Bu ko‘rish nuqsoni yoki ranglarni ajratish qiyinligi bo‘lgan foydalanuvchilar uchun ayniqsa muhim.

Yaxshi rang kontrasti

body {
  background-color: #ffffff;
  color: #000000;
}
O‘zingiz sinab ko‘ring »

Yomon rang kontrasti

body {
  background-color: #eeeeee;
  color: #cccccc;
}
O‘zingiz sinab ko‘ring »

2. Yaxshi shrift, shrift o‘lchami va qator balandligini ta’minlash

Har doim oson o‘qiladigan shriftdan foydalaning. Bundan tashqari, mos shrift o‘lchami va qator balandligidan foydalaning. Foydalanuvchi brauzer sozlamalarida matn o‘lchamini o‘zgartira olishi uchun font-size uchun nisbiy birliklardan (rem kabi) foydalaning.

Yaxshi shrift misoli

body {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
O‘zingiz sinab ko‘ring »

Yomon shrift misoli

body {
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
  font-variant: small-caps;
  line-height: 90%;
}
O‘zingiz sinab ko‘ring »

3. Ko‘rinadigan fokus indikatorlariga ega bo‘lish

Interaktiv elementlar (havolalar, tugmalar, input maydonlari kabi) aniq vizual focus uslubiga ega bo‘lishini ta’minlash uchun har doim :focus psevdo-klassidan foydalaning.

:focus ishlatish klaviatura foydalanuvchilari va ekran o‘quvchilar qaysi element hozir faol ekanini tushunishlarini ta’minlaydi.

Misol

a:focus, button:focus, input:focus {
  outline: 2px solid orange;
}
O‘zingiz sinab ko‘ring »

4. Fokusni yashirishdan qochish

Standart focus konturlarini boshqa ko‘rinadigan focus uslubi bilan almashtirmasdan hech qachon olib tashlamang.

Noto‘g‘ri misol

button:focus {
  outline: none;
}
O‘zingiz sinab ko‘ring »

Yaxshi misol

button:focus {
  outline: 2px solid orange;
}
O‘zingiz sinab ko‘ring »

5. CSS + semantik HTML-dan foydalanish

Vizual uslublash uchun CSS’dan, kontentni tuzilishini esa semantik HTML elementlari bilan belgilang (hamma narsani <div> kabi semantik bo‘lmagan elementlar bilan emas).

Misol

nav {
  background-color: #333333;
  color: white;
}
aside {
  background-color: #333333;
  color: white;
}

6. Foydalanuvchi sozlamalarini hisobga olish

CSS prefers-reduced-motion @media imkoniyati foydalanuvchi animatsiya yoki o‘tishlar kabi harakatlarni kamaytirishni so‘raganini tekshirish imkonini beradi.

Ba’zi foydalanuvchilar harakatga sezgir bo‘lib, kamroq animatsiyali saytlarni afzal ko‘radi. Bu media so‘rovni kompyuterida bu sozlamani yoqgan foydalanuvchilar uchun animatsiya va o‘tishlarni o‘chirish yoki yumshatish uchun ishlatishingiz mumkin:

Misol

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
O‘zingiz sinab ko‘ring »

Keyingi bobda siz media so‘rovlar haqida ko‘proq bilib olasiz.

Xulosa

  • Provide high color contrast
  • Provide easily readable fonts
  • Keep focus outlines visible
  • Semantik HTML elementlaridan foydalaning
  • Respect user preferences

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish