M

MLOG

O'zbek

CSS-da WCAG qo'llanmalarini joriy etish orqali veb-saytlaringizni hamma uchun qulay qilishni o'rganing. Global auditoriya uchun inklyuziv dizaynlar yarating.

CSS-da maxsus imkoniyatlar: WCAG muvofiqligi bo'yicha amaliy qo'llanma

Bugungi kunda tobora raqamlashtirilib borayotgan dunyoda veb-qulaylikni ta'minlash shunchaki eng yaxshi amaliyot emas, balki axloqiy zaruratdir. Maxsus imkoniyatlarga ega veb-saytlar barcha foydalanuvchilarga, ularning qobiliyatlaridan qat'i nazar, teng kirish va imkoniyatlarni taqdim etadi. Ushbu qo'llanma Veb Kontentining Maxsus Imkoniyatlari bo'yicha Qo'llanmalarga (WCAG) rioya qilgan holda qulay va inklyuziv veb-tajribalarini yaratish uchun CSS-dan qanday foydalanishga qaratilgan.

WCAG nima va u nima uchun muhim?

Veb Kontentining Maxsus Imkoniyatlari bo'yicha Qo'llanmalar (WCAG) bu nogironligi bo'lgan odamlar uchun veb-kontentni yanada qulayroq qilish bo'yicha xalqaro miqyosda tan olingan tavsiyalar to'plamidir. World Wide Web Consortium (W3C) tomonidan ishlab chiqilgan WCAG, xalqaro miqyosda jismoniy shaxslar, tashkilotlar va hukumatlarning ehtiyojlariga javob beradigan veb-qulaylik uchun umumiy standartni ta'minlaydi. WCAG muhim, chunki:

WCAG tamoyillari: POUR

WCAG to'rtta asosiy tamoyilga asoslangan bo'lib, ular ko'pincha POUR qisqartmasi bilan esda qoladi:

Maxsus imkoniyatlar uchun CSS texnikalari

CSS WCAG muvofiqligiga erishishda hal qiluvchi rol o'ynaydi. Quyida ko'rib chiqilishi kerak bo'lgan ba'zi asosiy CSS texnikalari keltirilgan:

1. Semantik HTML va CSS

Semantik HTML elementlaridan to'g'ri foydalanish kontentingizga ma'no va tuzilma beradi, bu esa uni ekran o'quvchilari va boshqa yordamchi texnologiyalar uchun qulayroq qiladi. Keyin CSS ushbu semantik elementlarning taqdimotini yaxshilaydi.

Misol:

Hamma narsa uchun umumiy <div> elementlaridan foydalanish o'rniga, <article>, <nav>, <aside>, <header>, <footer>, <main>, <section> va sarlavha teglaridan (<h1> dan <h6> gacha) foydalaning.

HTML:

<article> <h2>Maqola sarlavhasi</h2> <p>Maqola matni shu yerda joylashadi.</p> </article>

CSS:

article { margin-bottom: 20px; } h2 { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; }

<article> va <h2> dan foydalanib, siz kontentga semantik ma'no beryapsiz, bu esa yordamchi texnologiyalarga tuzilma va kontekstni tushunishga yordam beradi.

2. Rang va kontrast

Ko'rish qobiliyati past yoki rang ajrata olmaydigan foydalanuvchilar uchun matnni o'qiladigan qilish uchun matn va fon ranglari o'rtasida yetarli rang kontrastini ta'minlang. WCAG 2.1 AA darajasi oddiy matn uchun kamida 4.5:1 va katta matn (18pt yoki 14pt qalin) uchun 3:1 kontrast nisbatini talab qiladi.

Rang kontrastini tekshirish uchun vositalar:

Misol:

/* Yaxshi kontrast */ body { background-color: #000000; /* Qora */ color: #FFFFFF; /* Oq */ } /* Yomon kontrast */ body { background-color: #FFFFFF; /* Oq */ color: #F0F0F0; /* Och kulrang */ }

Birinchi misol yaxshi kontrastni ta'minlaydi, ikkinchi misolda esa kontrast yomon va ko'plab foydalanuvchilar uchun o'qish qiyin bo'ladi.

Rangdan tashqari: Axborotni yetkazish uchun faqat rangga tayanmang. Axborotning hamma uchun qulay bo'lishini ta'minlash uchun rangga qo'shimcha ravishda matn yorliqlari, piktogrammalar yoki boshqa vizual belgilardan foydalaning. Masalan, talab qilinadigan forma maydonlarini qizil rangda ajratib ko'rsatish o'rniga, qizil chegara va "(talab qilinadi)" kabi matn yorlig'i kombinatsiyasidan foydalaning.

3. Fokus indikatorlari

Foydalanuvchilar veb-saytingizda klaviatura yordamida (masalan, Tab tugmachasini ishlatib) harakatlanayotganda, qaysi element hozirda fokusda ekanligini bilishlari uchun aniq vizual fokus indikatorlarini taqdim etish juda muhim. Brauzerning standart fokus indikatori ba'zi hollarda yetarli bo'lmasligi yoki hatto ko'rinmas bo'lishi mumkin. Fokus indikatorini yanada ko'zga ko'rinarli qilish uchun CSS yordamida sozlang.

Misol:a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 2px solid #007bff; /* Moviy kontur */ outline-offset: 2px; /* Element va kontur o'rtasida bo'shliq yaratadi */ }

Ushbu CSS kodi elementlarga fokus tushganda moviy kontur qo'shadi. outline-offset xususiyati element va kontur o'rtasida kichik bo'shliq qo'shib, ko'rinishni yaxshilaydi. Muvofiq o'rnini bosuvchi vositani taqdim etmasdan fokus indikatorini butunlay olib tashlashdan saqlaning, chunki bu veb-saytingizni klaviatura foydalanuvchilari uchun yaroqsiz holga keltirishi mumkin.

4. Klaviatura orqali navigatsiya

Barcha interaktiv elementlar (havolalar, tugmalar, forma maydonlari va h.k.) klaviatura yordamida boshqarilishi mumkinligiga ishonch hosil qiling. Bu sichqonchani ishlata olmaydigan foydalanuvchilar uchun juda muhim. Mantiqiy navigatsiya oqimini ta'minlash uchun HTML manba kodidagi elementlar tartibi sahifadagi vizual tartibga mos kelishi kerak. Mantiqiy klaviatura navigatsiyasi tartibini saqlagan holda elementlarni vizual tarzda qayta tartiblash uchun CSS-dan foydalaning.

Misol:

CSS yordamida ekraning o'ng tomonida navigatsiya menyusini ko'rsatmoqchi bo'lgan vaziyatni ko'rib chiqing. Biroq, maxsus imkoniyatlar uchun, ekran o'quvchi foydalanuvchilar asosiy kontentdan oldin unga duch kelishlari uchun navigatsiya menyusining HTML manba kodida birinchi bo'lib paydo bo'lishini xohlaysiz.

HTML:

<nav> <ul> <li><a href="#">Bosh sahifa</a></li> <li><a href="#">Haqimizda</a></li> <li><a href="#">Xizmatlar</a></li> <li><a href="#">Aloqa</a></li> </ul> </nav> <main> <h1>Asosiy kontent</h1> <p>Bu sahifaning asosiy kontenti.</p> </main>

CSS:

body { display: flex; } nav { order: 1; /* Navigatsiyani o'ngga siljitadi */ width: 200px; padding: 20px; } main { order: 0; /* Asosiy kontentni chapda saqlaydi */ flex: 1; padding: 20px; }

CSS-dagi order xususiyatidan foydalanib, siz navigatsiya menyusini HTML manba kodidagi asl holatini saqlagan holda vizual ravishda ekraning o'ng tomoniga qayta tartiblashingiz mumkin. Bu klaviatura foydalanuvchilarining navigatsiya menyusiga birinchi bo'lib duch kelishini ta'minlaydi va maxsus imkoniyatlarni yaxshilaydi.

5. Kontentni mas'uliyat bilan yashirish

Ba'zan kontentni vizual displeydan yashirish, lekin uni ekran o'quvchilari uchun ochiq saqlash kerak bo'ladi. Masalan, faqat piktogramma bilan vizual ravishda ifodalangan havola yoki tugma uchun qo'shimcha kontekst taqdim etishni xohlashingiz mumkin. display: none yoki visibility: hidden dan foydalanishdan saqlaning, chunki bu xususiyatlar kontentni ham vizual foydalanuvchilardan, ham ekran o'quvchilaridan yashiradi. Buning o'rniga, kontentni vizual ravishda yashiradigan, lekin uni yordamchi texnologiyalar uchun ochiq saqlaydigan usuldan foydalaning.

Misol:

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

Ushbu CSS klassi elementni vizual ravishda yashiradi, lekin uni ekran o'quvchilari uchun ochiq saqlaydi. Ushbu klassni ekran o'quvchilari tomonidan o'qilishi kerak bo'lgan, lekin vizual ravishda ko'rsatilmaydigan matnga qo'llang.

HTML misoli:

<a href="#">Tahrirlash <span class="sr-only">elementini</span></a>

Bu misolda, "elementini" matni vizual ravishda yashirilgan, lekin ekran o'quvchilari tomonidan o'qiladi va "Tahrirlash" havolasi uchun kontekst taqdim etadi.

ARIA atributlari (Accessible Rich Internet Applications): Dinamik kontent va murakkab UI komponentlarining maxsus imkoniyatlarini oshirish uchun ARIA atributlaridan oqilona foydalaning. ARIA atributlari yordamchi texnologiyalarga qo'shimcha semantik ma'lumot beradi. Biroq, semantik HTML bilan hal qilinishi mumkin bo'lgan maxsus imkoniyatlar muammolarini tuzatish uchun ARIA atributlaridan foydalanishdan saqlaning. Masalan, maxsus vidjetlarni aniqlash va kontent dinamik ravishda o'zgarganda ekran o'quvchilariga holat yangilanishlarini taqdim etish uchun ARIA rollari va atributlaridan foydalaning.

6. Moslashuvchan dizayn va maxsus imkoniyatlar

Veb-saytingiz moslashuvchan va turli xil ekran o'lchamlari va qurilmalariga moslashishiga ishonch hosil qiling. Bu mobil qurilmalar yoki planshetlarda yordamchi texnologiyalardan foydalanayotgan nogironligi bo'lgan foydalanuvchilar uchun juda muhim. Ekran o'lchami va yo'nalishiga qarab kontentingizning joylashuvi va taqdimotini sozlash uchun CSS media so'rovlaridan foydalaning.

Misol:

@media (max-width: 768px) { nav ul { flex-direction: column; /* Kichikroq ekranlarda navigatsiya elementlarini vertikal joylashtiradi */ } }

Ushbu CSS kodi kichikroq ekranlarda navigatsiya elementlarining yo'nalishini vertikalga o'zgartirish uchun media so'rovidan foydalanadi, bu esa mobil qurilmalarda navigatsiyani osonlashtiradi.

7. Animatsiyalar va harakat

Haddan tashqari ko'p yoki noto'g'ri amalga oshirilgan animatsiyalar ba'zi foydalanuvchilarda tutqanoq yoki harakat kasalligini keltirib chiqarishi mumkin. Kamaytirilgan harakatni afzal ko'radigan foydalanuvchilar uchun animatsiyalarni kamaytirish yoki o'chirib qo'yish uchun CSS-dan foydalaning. prefers-reduced-motion media so'rovi foydalanuvchi tizimdan animatsiya yoki harakat miqdorini minimallashtirishni so'raganligini aniqlash imkonini beradi.

Misol:

@media (prefers-reduced-motion: reduce) { .animated-element { animation: none !important; transition: none !important; } }

Ushbu CSS kodi o'z operatsion tizimida "kamaytirilgan harakat" sozlamasini yoqgan foydalanuvchilar uchun animatsiyalar va o'tishlarni o'chirib qo'yadi. Foydalanuvchilarga veb-saytingizdagi animatsiyalarni qo'lda o'chirib qo'yish imkonini beradigan boshqaruv vositasini taqdim etishni ko'rib chiqing.

8. Yordamchi texnologiyalar bilan sinovdan o'tkazish

Veb-saytingizning qulay ekanligiga ishonch hosil qilishning eng samarali usuli - uni ekran o'quvchilari, ekran kattalashtiruvchilari va nutqni aniqlash dasturlari kabi yordamchi texnologiyalar bilan sinab ko'rishdir. Veb-saytingizning maxsus imkoniyatlarini har tomonlama tushunish uchun turli xil yordamchi texnologiyalardan foydalaning.

Ommabop ekran o'quvchilari:

Qo'shimcha sinov maslahatlari:

Maxsus imkoniyatlar uchun ilg'or CSS texnikalari

1. Mavzular uchun maxsus xususiyatlar (CSS o'zgaruvchilari)

Yuqori kontrastli variantlar bilan qulay mavzular yaratish uchun CSS maxsus xususiyatlaridan (o'zgaruvchilardan) foydalaning. Bu foydalanuvchilarga veb-saytingiz ko'rinishini o'zlarining shaxsiy ehtiyojlariga moslashtirish imkonini beradi.

Misol:

:root { --text-color: #333; --background-color: #fff; --link-color: #007bff; } body { color: var(--text-color); background-color: var(--background-color); } a { color: var(--link-color); } /* Yuqori kontrastli mavzu */ .high-contrast { --text-color: #fff; --background-color: #000; --link-color: #ff0; }

Ushbu misol matn rangi, fon rangi va havola rangi uchun CSS maxsus xususiyatlarini belgilaydi. .high-contrast klassi yuqori kontrastli mavzu yaratish uchun ushbu o'zgaruvchilarni qayta yozadi. Keyin mavzular o'rtasida almashish uchun <body> elementida .high-contrast klassini yoqish/o'chirish uchun JavaScript-dan foydalanishingiz mumkin.

2. Qulay joylashuvlar uchun CSS Grid va Flexbox

CSS Grid va Flexbox qulay va moslashuvchan joylashuvlarni yaratish uchun ishlatilishi mumkin bo'lgan kuchli joylashuv vositalaridir. Biroq, elementlarning vizual tartibi DOM tartibiga mos kelishini ta'minlash uchun ulardan ehtiyotkorlik bilan foydalanish muhimdir.

Misol:

Flexbox yoki Grid-dan foydalanganda, tab tartibi mantiqiy bo'lib qolishiga ishonch hosil qiling. Agar ehtiyotkorlik bilan ishlatilmasa, order xususiyati tab tartibini buzishi mumkin.

3. `clip-path` va maxsus imkoniyatlar

`clip-path` xususiyati vizual jihatdan qiziqarli shakllar va effektlar yaratish uchun ishlatilishi mumkin. Biroq, `clip-path` dan foydalanganda ehtiyot bo'ling, chunki u ba'zan kontentni yashirishi yoki u bilan ishlashni qiyinlashtirishi mumkin. Kesilgan kontentning qulay bo'lib qolishini va kesish klaviatura navigatsiyasi yoki ekran o'quvchisining kirishiga xalaqit bermasligini ta'minlang.

4. `content` xususiyati va maxsus imkoniyatlar

CSS-dagi `content` xususiyati elementdan oldin yoki keyin yaratilgan kontentni kiritish uchun ishlatilishi mumkin. Biroq, yaratilgan kontent har doim ham ekran o'quvchilari uchun qulay emas. `content` xususiyatidan oqilona foydalaning va yordamchi texnologiyalarga qo'shimcha semantik ma'lumot berish uchun ARIA atributlaridan foydalanishni ko'rib chiqing.

Haqiqiy dunyo misollari va keys-stadilari

Ushbu tamoyillarning turli mintaqalar va kontekstlarda qanday qo'llanilishini ko'rsatish uchun ba'zi haqiqiy dunyo misollarini ko'rib chiqamiz.

Yo'l qo'ymaslik kerak bo'lgan umumiy maxsus imkoniyatlar xatolari

Xulosa: Yaxshiroq veb uchun maxsus imkoniyatlarni qabul qilish

Maxsus imkoniyatlar shunchaki texnik talab emas; bu hamma uchun inklyuziv va qulay bo'lgan veb yaratishning asosiy jihatidir. Ushbu CSS texnikalarini joriy etish va WCAG qo'llanmalariga rioya qilish orqali siz nafaqat vizual jihatdan jozibali, balki barcha foydalanuvchilar uchun, ularning qobiliyatlaridan qat'i nazar, foydalanishga yaroqli va zavqli veb-saytlarni yaratishingiz mumkin. Maxsus imkoniyatlarni veb-ishlab chiqish jarayoningizning ajralmas qismi sifatida qabul qiling va siz yanada inklyuziv va adolatli raqamli dunyoga hissa qo'shgan bo'lasiz.

Manbalar va qo'shimcha o'qish uchun