Accessible forma UI
HTML va CSS yordamida accessible forma UI yarating.
Bu loyihada faqat HTML va CSS'dan foydalanib forma UI yaratishingiz kerak. Formada to'liq ism, email, parol va parolni tasdiqlash maydonlari, shuningdek, parol matnini ko'rsatish yoki yashirish uchun tugma bo'ladi. Bundan tashqari, formada to'ldirilganlik darajasini ko'rsatuvchi progress bar va forma 100% to'ldirilishi uchun bajarilishi kerak bo'lgan talablar checklist'i bo'ladi. Formaning bu versiyasi ishlamaydi, ya'ni u keyinchalik JavaScript yordamida kengaytirilishi mumkin bo'lgan statik UI component bo'ladi.
Bu loyihaning maqsadi nafaqat HTML va CSS bo'yicha mashq qilishingizga yordam berish, balki barcha foydalanuvchilar, jumladan, imkoniyati cheklangan insonlar uchun ham foydalanish oson bo'lgan accessible forma yaratishga e'tibor qaratishdir. Quyida siz yaratishingiz kerak bo'lgan forma UI'ning taxminiy maketi berilgan:
Accessibility bo'yicha yo'riqnomalar
Loyihani boshlashdan oldin accessibility yo'riqnomalari va best practice'lari bilan tanishib chiqishingiz kerak. Shunga qaramay, accessible forma UI yaratishda yodda tutish kerak bo'lgan asosiy jihatlar quyidagilar:
- Label qo'yish: Har bir forma maydonida unga mos
<label>elementi bo'lishi va uforatributi orqali maydon bilan aniq bog'langan bo'lishi kerak. - Focus state: Har bir input maydonining focus state'iga stil bering, shunda klaviatura orqali harakatlanayotgan foydalanuvchilar ayni paytda qaysi maydon faol ekanini oson ko'ra oladi.
- Xato xabarlari: Foydalanuvchi noto'g'ri ma'lumot kiritganda ko'rsatiladigan xato xabarlari uchun joy qoldirishni o'ylab ko'ring. Bu xabarlar tegishli input maydoni bilan aniq bog'langan bo'lishi kerak.
- ARIA atributlari: Zarur joylarda ARIA (Accessible Rich Internet Applications) atributlaridan foydalaning, masalan, majburiy maydonlar uchun
aria-requiredva xatoli maydonlar uchunaria-invalid. - Rang kontrasti: Matn va fon o'rtasidagi rang kontrasti WCAG (Web Content Accessibility Guidelines) standartlariga javob beradigan darajada yetarli bo'lishini ta'minlang, shunda forma ko'rish qobiliyati zaif foydalanuvchilar uchun ham o'qiladigan bo'ladi.
- Interaktiv elementlar: Parolni ko'rsatish/yashirish tugmasi klaviatura va screen reader'lar orqali foydalanish mumkin bo'lishi hamda joriy holat haqida aniq ma'lumot berishi kerak (masalan, "Parol yashirilgan" yoki "Parol ko'rinib turibdi").
Ishni tugatgach, accessibility muammolarini aniqlash va kerakli tuzatishlarni kiritish uchun forma UI'ni screen reader yoki Axe, Lighthouse kabi brauzer kengaytmalari yordamida testlashingiz mumkin.
Bu loyihani tugatgach, HTML va CSS yordamida accessible va yaxshi tuzilgan formalar yaratish bo'yicha mustahkam poydevorga ega bo'lasiz. Keyingi loyihalarda bu formaga JavaScript qo'shib, uni to'liq ishlaydigan va dinamik qilishingiz mumkin.