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:

• U inklyuzivlikni targ'ib qiladi, har kim veb-saytingizga kira olishini va undan foydalana olishini ta'minlaydi.
• U faqat nogironligi bo'lganlar uchun emas, balki barcha foydalanuvchilar uchun foydalanuvchi tajribasini yaxshilaydi.
• U veb-saytingizning SEO (Qidiruv Tizimlarini Optimallashtirish) ko'rsatkichlarini yaxshilashi mumkin.
• Ba'zi mintaqalarda bu qonuniy talab bo'lishi mumkin. Masalan, ko'pgina mamlakatlarda davlat veb-saytlari va ayrim xususiy sektor tashkilotlari uchun veb-qulaylikni talab qiluvchi qonunlar mavjud. Qo'shma Shtatlardagi Nogironlar to'g'risidagi Amerika qonuni (ADA) veb-saytlarga nisbatan qo'llanilishi talqin qilingan. Yevropada Yevropa Maxsus Imkoniyatlar to'g'risidagi Qonun veb-saytlar va mobil ilovalarni o'z ichiga olgan keng turdagi mahsulotlar va xizmatlar uchun maxsus imkoniyatlar talablarini belgilaydi. Avstraliyada esa Nogironlik bo'yicha Diskriminatsiyaga qarshi qonun mavjud bo'lib, u ham veb-qulaylikni qamrab oladi.
• U ijtimoiy mas'uliyatni namoyish etadi va brendingiz obro'sini mustahkamlaydi.

WCAG tamoyillari: POUR

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

• Idrok etiladigan: Axborot va foydalanuvchi interfeysi komponentlari foydalanuvchilar idrok eta oladigan usullarda taqdim etilishi kerak.
• Boshqariladigan: Foydalanuvchi interfeysi komponentlari va navigatsiyasi boshqariladigan bo'lishi kerak.
• Tushunarli: Axborot va foydalanuvchi interfeysining ishlashi tushunarli bo'lishi kerak.
• Mustahkam: Kontent yordamchi texnologiyalarni o'z ichiga olgan turli xil foydalanuvchi agentlari tomonidan ishonchli tarzda talqin qilinishi uchun yetarlicha mustahkam bo'lishi kerak.

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:

• WebAIM's Color Contrast Checker: https://webaim.org/resources/contrastchecker/
• Accessible Color Palette Builder: https://www.learnui.design/tools/accessible-color-palette-builder.html
• Chrome DevTools: Chrome DevTools o'rnatilgan rang kontrastini tekshirish imkoniyatini taqdim etadi.

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:

• NVDA (NonVisual Desktop Access): Windows uchun bepul va ochiq manbali ekran o'quvchi.
• JAWS (Job Access With Speech): Windows uchun ommabop tijorat ekran o'quvchisi.
• VoiceOver: macOS va iOS uchun o'rnatilgan ekran o'quvchi.

Qo'shimcha sinov maslahatlari:

• Klaviatura orqali navigatsiya: Barcha interaktiv elementlarga klaviatura yordamida erishish mumkinligini va fokus tartibining mantiqiy ekanligini tekshiring.
• Forma qulayligi: Forma maydonlari to'g'ri yorliqlanganligini va xato xabarlarining aniq va tushunarli ekanligini ta'minlang.
• Rasmlar uchun Alt matni: Barcha rasmlarda rasmning mazmuni va vazifasini aniq aks ettiruvchi tavsiflovchi alt matni borligini tekshiring.
• Dinamik kontent: Dinamik kontent yangilanishlari ekran o'quvchilariga to'g'ri e'lon qilinishini sinab ko'ring.

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.

• Hukumat veb-saytlari: Buyuk Britaniya, Kanada va Avstraliya kabi ko'plab mamlakatlarda hukumat veb-saytlari uchun qat'iy maxsus imkoniyatlar qoidalari mavjud. Ushbu veb-saytlar ko'pincha WCAG muvofiqligining namunali modellari bo'lib xizmat qiladi va semantik HTML, rang kontrasti va klaviatura navigatsiyasi bo'yicha eng yaxshi amaliyotlarni namoyish etadi.
• Elektron tijorat platformalari: Amazon va Alibaba kabi global elektron tijorat gigantlari kengroq auditoriyani qamrab olish uchun maxsus imkoniyatlarga katta sarmoya kiritadilar. Ular ko'pincha rasmlar uchun alternativ matn, mahsulotlarni ko'rish uchun klaviatura navigatsiyasi va o'qishni yaxshilash uchun sozlanishi mumkin bo'lgan shrift o'lchamlari kabi xususiyatlarni joriy etadilar.
• Ta'lim muassasalari: Dunyo bo'ylab universitetlar va kollejlar tobora qulay onlayn ta'lim muhitini yaratishga e'tibor qaratmoqdalar. Ular ko'pincha nogironligi bo'lgan talabalarga yordam berish uchun videolar uchun transkriptlar, audio kontent uchun subtitrlar va kurs materiallarining qulay versiyalarini taqdim etadilar.

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

• Yetarli bo'lmagan rang kontrasti: Ko'rish qobiliyati past bo'lgan foydalanuvchilar uchun o'qish qiyin bo'lgan rang kombinatsiyalaridan foydalanish.
• Rasmlar uchun Alt matnining yo'qligi: Rasmlar uchun tavsiflovchi alt matnini taqdim etmaslik, bu ularni ekran o'quvchi foydalanuvchilari uchun yaroqsiz qiladi.
• Yomon klaviatura navigatsiyasi: Klaviatura yordamida harakatlanish qiyin yoki imkonsiz bo'lgan veb-saytlarni yaratish.
• Joylashtirish uchun jadvallardan foydalanish: Semantik HTML elementlari o'rniga joylashuv maqsadlarida HTML jadvallaridan foydalanish.
• Fokus indikatorlariga e'tibor bermaslik: Vizual fokus indikatorini olib tashlash yoki yashirish, bu klaviatura foydalanuvchilariga qaysi element fokusda ekanligini bilishni qiyinlashtiradi.
• Ma'lumotni yetkazish uchun faqat rangga tayanib qolish: Rangni ma'lumot yetkazishning yagona vositasi sifatida ishlatish, bu uni rang ajrata olmaydigan foydalanuvchilar uchun yaroqsiz qiladi.
• Yordamchi texnologiyalar bilan sinovdan o'tkazmaslik: Veb-saytingizni yordamchi texnologiyalar, masalan, ekran o'quvchilari bilan sinovdan o'tkazmaslik, maxsus imkoniyatlar muammolarini aniqlash va tuzatish uchun.

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

• Web Content Accessibility Guidelines (WCAG): https://www.w3.org/WAI/standards-guidelines/wcag/
• Web Accessibility Initiative (WAI): https://www.w3.org/WAI/
• WebAIM: https://webaim.org/
• Deque University: https://dequeuniversity.com/