Semantik HTML

Semantik HTML

Accessibility (ko'pincha a11y deb qisqartiriladi) — hammaga foydalanish mumkin bo'lgan sahifalar qurishni anglatadi, jumladan klaviatura yoki screen reader (ko'r va kam ko'ruvchi foydalanuvchilar uchun sahifani ovoz chiqarib o'qiydigan dastur) bilan harakatlanadigan odamlarni. Accessible bo'lishning eng oson usuli — bu shuningdek yaxshi HTML yozishning eng oson usuli: ish uchun to'g'ri elementdan foydalaning.

Nazarda tutgan narsangizni anglatadigan elementdan foydalaning

HTML elementlari ichki qurilgan ma'no va xatti-harakatga ega. <button> tugma sifatida e'lon qilinadi, focus qilinishi mumkin va bosishlarga hamda Enter va Space tugmalariga javob beradi — bepul. <nav> yordamchi texnologiyaga "bu navigatsiya" deb aytadi. Niyatingizga mos elementni tanlaganingizda, brauzer sizga accessibility ni avtomatik ravishda beradi.

Haqiqiy tugma va bosiladigan div

Juda keng tarqalgan boshlovchi xatosi — <div> ni tugmaga o'xshab uslublash va unga bosish handleri biriktirish:

<!-- Before: a fake button -->
<div class="btn" onclick="save()">Save</div>

Bu yaxshi ko'rinadi, lekin ko'pchilik foydalanuvchilar uchun buzilgan. <div> focus qilinadigan emas, shuning uchun klaviatura foydalanuvchilari Tab bilan unga yeta olmaydi. U Enter yoki Space tugmalariga javob bermaydi. Va screen reader uni tugma emas, oddiy matn sifatida e'lon qiladi, shuning uchun foydalanuvchilar uning bosiladiganini bilishmaydi.

Tuzatish — shunchaki haqiqiy tugmadan foydalanish:

<!-- After: a real button -->
<button class="btn" onclick="save()">Save</button>

Endi u klaviatura orqali focus qilinadigan, Enter va Space bilan ishlaydigan va to'g'ri e'lon qilinadigan — nol qo'shimcha kod bilan. Qoida sifatida: agar biror narsa bosiladigan bo'lsa va harakatni ishga tushirsa, <button> dan foydalaning. Agar u boshqa sahifaga o'tsa, havoladan (<a>) foydalaning.

Sarlavhalar tartibi

Sarlavhalar (<h1> dan <h6> gacha) shunchaki katta matn emas — ular sahifangizning konturini (outline) hosil qiladi. Screen reader foydalanuvchilari kontentni ko'zdan kechirish uchun ko'pincha sarlavhalar orasida sakraydilar, shuning uchun tuzilish mantiqiy bo'lishi kerak.

Ikkita qoida:

• Sarlavhalarni tartibda ishlating va darajalarni o'tkazib yubormang. <h1> dan keyin <h2> kelishi mumkin, lekin <h1> dan to'g'ridan-to'g'ri <h4> ga sakrash konturni buzadi.
• Darajani ma'no uchun tanlang, o'lcham uchun emas. Agar sarlavhaning kichikroq ko'rinishini xohlasangiz, uni CSS bilan uslublang — shunchaki standart bo'yicha kichik bo'lgani uchun <h4> ni olmang.

<h1>Recipes</h1>
  <h2>Breakfast</h2>
    <h3>Pancakes</h3>
  <h2>Dinner</h2>

Bu toza, mantiqiy daraxt sifatida o'qiladi, bu esa aynan yordamchi texnologiya tayanadigan narsa.

Suhbat maslahatlari

• Oltin qoidani xulosalang: <div> ga murojaat qilishdan oldin kontentning maqsadiga mos semantik elementdan foydalaning.
• Bosiladigan <div> nega muvaffaqiyatsiz bo'lishini aniq tushuntiring — focus yo'q, klaviatura qo'llab-quvvatlash yo'q, noto'g'ri e'lon — va haqiqiy <button> uchalasini ham tuzatishini.
• Sarlavhalar darajalarni o'tkazib yubormasdan tartibga rioya qilishi va ma'no uchun tanlanishi, o'lchamni esa CSS boshqarishi kerakligini eslatib o'ting.