Xatolar

---

Nega

Hamma xato qiladi. Xato qilganimizda, uni tuzata olishimiz uchun nima sababdan xatoga yo‘l qo‘yganimizni tushunishimiz kerak. Qulay forma ranglarni ajrata olmaydigan, ko‘zi ojiz yoki ko‘rish qobiliyati past insonlar, shuningdek, kognitiv qobiliyatlari cheklangan insonlar idrok eta oladigan va tushuna oladigan xato xabarlariga ega bo‘lishi kerak.

---

Nima

Qulay xato xabari:

• matn ko‘rinishida yoziladi. Rang va ikonkadan foydalanish mumkin, lekin ularning o‘zi yetarli emas.
• xato yuz bergan elementga yaqin joylashadi.
• ma’lumot beruvchi bo‘lib, foydalanuvchiga yordam beradi.
• kodda xato yuz bergan element bilan bog‘langan bo‘ladi.

Bundan tashqari, fokusni xato yuz bergan forma elementiga ko‘chirish foydali.

Bu ro‘yxatdan o‘tish formasida foydalanuvchi harflar o‘rniga raqam kiritgan.

---

---

Qanday

Qulay xato xabarlarini yaratishning beshta usulini o‘rganasiz.

Matn ko‘rinishida yozilgan

Xato xabari ogohlantirish ikonkasi va qizil hoshiyaga qo‘shimcha ravishda matn ko‘rinishida yozilgan. Uchta turli ko‘rsatkich bu xato holatini foydalanuvchiga aniq ko‘rsatadi. Barcha foydalanuvchilar tushunishi uchun faqat ikonka va qizil hoshiya yetarli bo‘lmasdi.

Bir-biriga yaqin

Bir-biriga yaqin joylashgan dizayn elementlari o‘zaro bog‘liq deb idrok etiladi, bir-biridan uzoqda joylashgan elementlar esa alohida guruhlarga tegishli deb qabul qilinadi.

Bir-biriga yaqin joylashgan dizayn elementlari o‘zaro bog‘liq deb idrok etiladi, bir-biridan uzoqda joylashgan elementlar esa alohida guruhlarga tegishli deb qabul qilinadi.

Bu misolda xato xabarlari xato yuz bergan maydonlarga yaqin joylashgan. Maydonlar orasidagi katta masofa (margin) bilan birgalikda xato xabarlari qaysi maydonga tegishli ekanini tushunish oson.

Ma’lumot beruvchi

Qanchalik ko‘p ma’lumot bersa, shunchalik yaxshi.

Birinchi misolimizdagi "Your first name must have at least two letters and no unusual characters" (Ismingiz kamida ikkita harfdan iborat bo‘lishi va unda g‘ayrioddiy belgilar bo‘lmasligi kerak) xatosi ma’lumot beruvchi. U inson tilida yozilgan. Uni yaxshilash, yanada aniqroq yozish mumkin:

"Ismingiz raqamlardan emas, faqat harflardan iborat bo‘lishi kerak."

Qanchalik aniq bo‘lsa, shunchalik yaxshi. Bu tizimga turli vaziyatlar uchun ko‘proq xato xabarlari kerakligini anglatadi. Qancha turli xato xabarlari va vaziyatlarni yaratishni hal qilishda amaliy (pragmatik) bo‘ling. Foydalanuvchilardan nima noto‘g‘ri ekanini tushunishlarini so‘rang. Agar tushunmasalar, xato xabarini aniqroq yozing.

Forma elementi bilan bog‘langan

Xo‘sh, kod-chi?

<input name="firstName" id="firstNameInput" type="text" pattern="[^.]*?">

<p id="firstName-length-error" role="alert">Your first name must have at least two letters and no unusual characters</p>

Xato xabari alert roliga ega. Bu yaxshi. Bu ekran o‘quvchi dasturga, hatto xabar fokusda bo‘lmasa ham, uning mazmunini o‘qib berish imkonini beradi.

Xato xabari maydon bilan bog‘lanmagan. Buni aria-describedby atributi yordamida amalga oshirish mumkin. Uning qiymati — xato xabarining ID’si.

Shuningdek, ekran o‘quvchi dasturlarga forma elementida xato borligini bildirish uchun noto‘g‘ri to‘ldirilgan forma elementiga aria-invalid="true" qo‘shishimiz kerak. Kiritish maydonining yaxshilangan versiyasi:

<input name="firstName" id="firstNameInput" type="text" pattern="[^.]*?" aria-describedby="firstName-length-error" aria-invalid="true">

Fokusni ko‘chirish

Bu mijoz tomonidagi (client-side) tekshiruvga qaraganda server tomonidagi (server-side) tekshiruvlar uchun muhimroq. Foydalanuvchi formani yuborganda fokus birinchi noto‘g‘ri to‘ldirilgan maydonga ko‘chadi.

Bu misolda uchala maydon ham noto‘g‘ri to‘ldirilgan. Fokus birinchi maydonga — First name (Ism) maydoniga ko‘chirildi. Foydalanuvchi yozishni boshlaganda xato xabari yo‘qoladi.

---