HTML foydalanish qulayligi
HTML qulaylik (accessibility)
Doim HTML kodni qulayliklar (accessibility)ni hisobga olib yozing!
Foydalanuvchiga saytingizda navigatsiya qilish va muloqot qilishning yaxshi usulini taqdim eting. HTML kodingizni imkon qadar semantik qiling.
Semantik HTML
Semantik HTML — to‘g‘ri maqsad uchun to‘g‘ri HTML elementlaridan imkon qadar ko‘proq foydalanishni bildiradi. Semantik elementlar — ma’noga ega elementlar; agar sizga tugma kerak bo‘lsa, <button> elementidan foydalaning (<div> elementidan emas).
Semantik HTML sahifa mazmunini ovoz chiqarib o‘qiydigan ekran o‘quvchilariga (screen readers) kontekst beradi.
Tugma misolini esda tutib:
- tugmalar standart holda mosroq uslubga ega
- ekran o‘quvchisi uni tugma sifatida aniqlaydi
- fokuslanadigan (focusable)
- bosiladigan (clickable)
Tugma faqat klaviatura navigatsiyasiga tayanadigan odamlar uchun ham qulay; uni sichqoncha bilan ham, tugmalar bilan ham bosish mumkin va tugmalar orasida (klaviaturadagi tab tugmasi yordamida) o‘tish mumkin.
Non-semantik elementlar misollari: <div> va <span> - O‘z kontenti haqida hech narsa aytmaydi.
Semantik elementlar misollari: <form>, <table> va <article> - Kontentni aniq belgilaydi.
Sarlavhalar muhim
Sarlavhalar <h1> dan <h6> gacha bo‘lgan teglar bilan belgilanadi:
Misol
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
O‘zingiz sinab ko‘ring »
Qidiruv tizimlari veb-sahifalaringizning tuzilmasi va mazmunini indeklash uchun sarlavhalardan foydalanadi.
Foydalanuvchilar sahifalaringizni sarlavhalari orqali ko‘zdan kechiradi. Hujjat tuzilishini va turli bo‘limlar o‘rtasidagi bog‘liqlikni ko‘rsatish uchun sarlavhalardan foydalanish muhim.
Ekran o‘quvchilari ham sarlavhalardan navigatsiya vositasi sifatida
foydlanadi. Turli xil sarlavhalar sahifaning konturini belgilaydi.
Asosiy sarlavhalar uchun <h1> sarlavhalari ishlatilishi kerak, so‘ngra <h2> sarlavhalari, keyin esa kamroq muhim <h3> va h.k.
Eslatma: HTML sarlavhalaridan faqat sarlavhalar uchun foydalaning. Matnni KATTA yoki qalin qilish uchun sarlavhalarni ishlatmang.
Alternativ matn
alt atributi rasm uchun muqobil matn beradi, agar foydalanuvchi biror sababga ko‘ra uni ko‘ra olmasa (sekin ulanish,
src
atributidagi xatolik yoki foydalanuvchi ekran o‘quvchisidan foydalansa).
alt atributining qiymati rasmni tavsiflashi kerak:
Misol
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
O‘zingiz sinab ko‘ring »
Agar brauzer rasmni topa olmasa, u alt atributining qiymatini ko‘rsatadi:
Misol
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
O‘zingiz sinab ko‘ring »
Tilni belgilang
Siz doim <html> tegi ichida lang atributini
kiritishingiz kerak, veb-sahifa tilini e’lon qilish uchun. Bu qidiruv tizimlari va brauzerlarga yordam berish uchun mo‘ljallangan.
Quyidagi misol til sifatida ingliz tilini belgilaydi:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Aniq tildan foydalaning
Doim tushunish oson bo‘lgan aniq tildan foydalaning. Shuningdek, ekran o‘quvchisi aniq o‘qiy olmaydigan belgilardan qochishga harakat qiling. Masalan:
- Jumlalarni imkon qadar qisqa saqlang
- Tire belgilaridan qoching. 1-3 deb yozish o‘rniga, 1 dan 3 gacha deb yozing
- Qisqartmalardan qoching. Feb deb yozish o‘rniga, February deb yozing
- Jargon (slang) so‘zlardan qoching
Yaxshi havola matni yaratish
Havola matni o‘sha havola bosilganda o‘quvchi qanday ma’lumot olishini aniq tushuntirishi kerak.
Yaxshi va yomon havolalar misollari:
Eslatma: bu sahifa veb-saytlardan foydalanish qulayligiga kirishdir. Batafsil ma’lumot uchun foydalanish qulayligi darsligini o‘qing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!