Semantik və əlçatanlıq (a11y) arasındakı fərq nədir?

Semantika maşınlara (brauzerlər, analizatorlar, axtarış robotları) məzmunun quruluşunu və mənasını anlamağa kömək edir. Əlçatanlıq (a11y) müxtəlif fiziki və ya kognitiv məhdudiyyətləri olan insanların istifadə etdiyi köməkçi texnologiyalar vasitəsilə məzmunun başa düşülməsi və istifadəsini təmin etməyə yönəlib.

Semantik etiketlər

<article>, <nav>, <aside>, <footer>, <h1>-<h6> kimi semantik HTML etiketlərinin istifadəsi, səhifənin elementlərinə mənası verir. Məsələn:

<article>
  <h2>Məqalənin başlığı</h2>
  <p>Məqalənin mətni...</p>
</article>

Bu, brauzerlərə sənədin quruluşunu düzgün şəkildə şərh etməyə kömək edir.

Əlçatanlıq (a11y)

Əlçatanlıq çoxsaylı aspektləri əhatə edir:

• Semantika: Semantik etiketlərin düzgün istifadəsi artıq əlçatanlığın bir hissəsidir, çünki onlar köməkçi texnologiyalara (ekran oxuyucularına) elementlərin quruluşunu və funksiyasını başa düşməyə kömək edir.

• ARIA atributları: aria-label, aria-describedby, aria-hidden, role kimi əlavə atributlar, HTML semantikası kifayət etmədikdə, köməkçi texnologalara əlavə məlumatlar verir.

  <button aria-label="Dialoqu bağla">
    <img src="close.svg" alt="">
  </button>
  

• Kontrast: Görmə qabiliyyəti zəif olanlar üçün mətn və fon arasında kifayət qədər kontrast.

• Klaviatura ilə naviqasiya: Səhifədə hərəkət etmək və elementlərlə yalnız klaviatura istifadə edərək qarşılıqlı əlaqə qurmaq imkanı.

• Şəkillər üçün alternativ mətn (alt): İstifadəçilər üçün şəkilin məzmununun təsviri, onları görməyənlər üçün.

  <img src="cat.jpg" alt="Qara pişik pəncərədə yatıb.">
  

• Başlıq strukturu: Ekran oxuyucular ilə asan naviqasiya üçün məntiqi başlıq hierarşiyası (<h1> - <h6>) quruluşu.

Əlaqə

Semantika əlçatanlıq üçün vacib əsasdır. Yaxşı qurulmuş, semantik elementlərlə zənginləşdirilmiş səhifə əlçatanlığı çox asanlaşdırır. Ancaq, semantik tək başına kifayət deyil – əlavə tədbirlər, məsələn, ARIA atributları, fokus idarəetməsi və kifayət qədər kontrast təmin etmək lazım ola bilər.