Semantika va kirish imkoniyati (a11y) o'rtasidagi farq nima?

Semantik mashinalarga (brauzerlar, parserlar, qidiruv robotlari) mazmunning tuzilishi va ma'nosini tushunishga yordam beradi. A11y (mavjudlik) mazmunning turli jismoniy yoki kognitiv cheklovlarga ega odamlar uchun tushunarli va qulay bo‘lishiga qaratilgan.

Semantik teglar

<article>, <nav>, <aside>, <footer>, <h1>-<h6> kabi semantik HTML teglaridan foydalanish, sahifa elementlariga ma'noni beradi. Masalan:

<article>
  <h2>Maqola sarlavhasi</h2>
  <p>Maqola matni...</p>
</article>

Bu brauzerlarga hujjat tuzilmasini to‘g‘ri talqin qilishga yordam beradi.

Mavjudlik (a11y)

Mavjudlik ko‘plab jihatlarni o‘z ichiga oladi:

• Semantik: Semantik teglar to‘g‘ri ishlatilishi allaqachon mavjudlikning bir qismidir, chunki ular yordamchi texnologiyalar (ekran o‘quvchilar)ga elementlarning tuzilishi va maqsadini tushunishga yordam beradi.

• ARIA atributlari: aria-label, aria-describedby, aria-hidden, role kabi qo‘shimcha atributlar, HTML semantikasi yetarli bo‘lmagan hollarda, yordamchi texnologiyalar uchun qo‘shimcha ma’lumotlar beradi.

  <button aria-label="Dialogni yopish">
    <img src="close.svg" alt="">
  </button>
  

• Kontrast: Ko‘rish qobiliyati cheklanganlar uchun matn va fon o‘rtasida etarli kontrast.

• Klaviatura bilan navigatsiya: Sahifa bo‘ylab harakat qilish va elementlar bilan faollashish imkoniyati, faqat klaviatura yordamida.

• Rasmlar uchun muqobil matn (alt): Rasm mazmunini ko‘rmaydigan foydalanuvchilar uchun tavsif.

  <img src="cat.jpg" alt="Yashil mushuk derazada uxlayapti.">
  

• Sarlavha tuzilishi: Ekran o‘quvchilar bilan qulay navigatsiya uchun mantiqiy sarlavha hierarxiyasi (<h1> - <h6>) bilan.

Aloqa

Semantik, mavjudlik uchun muhim asosdir. Yaxshi tuzilgan, semantik elementlar bilan to‘ldirilgan sahifa, mavjud qilishni ancha osonlashtiradi. Biroq, semantik faqatgina yetarli emas — ko‘pincha qo‘shimcha choralar, masalan, ARIA atributlari, fokusni boshqarish va etarli kontrastni ta’minlash talab qilinadi.