Semantik HTML və əlçatanlıq

Tamamilə eyni görünən iki səhifə təsəvvür et. Biri yalnız <div> elementlərindən, digəri isə <header>, <nav>, <main> və <footer> elementlərindən qurulub. Gözlə baxanda fərq yoxdur. Amma ekran oxuyucusu ilə işləyən görməyən istifadəçi də, axtarış sistemi də böyük fərq görəcək. Hətta bir neçə aydan sonra kodu oxuyanda sən özün də bu fərqi görəcəksən. Bu, semantik HTML-dir.

Semantik HTML nədir?

<div> (blok) və <span> (sətirdaxili) neytral qablardır — məzmun haqqında heç nə demirlər. Onlar CSS ilə tərtibat üçün faydalıdır, amma mənalı element varsa, ona üstünlük ver.

Səhifənin əsas bölgələri

<style>
  body { font-family: system-ui, sans-serif; margin: 0; color: #1e293b; }
  header, nav, main, footer { padding: 8px 12px; }
  header { background: #fde68a; font-size: 20px; }
  nav { background: #bfdbfe; }
  main { background: #f1f5f9; }
  article { background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 12px; }
  aside { background: #ddd6fe; margin-top: 8px; padding: 6px 12px; border-radius: 8px; }
  footer { background: #e2e8f0; font-size: 14px; }
</style>

<header><strong>City Library</strong></header>
<nav><a href="books.html">Books</a> · <a href="events.html">Events</a></nav>
<main>
  <article>
    <h2>New books this week</h2>
    <p>Ten new novels are waiting for you.</p>
  </article>
  <aside>Tip: you can renew your books online.</aside>
</main>
<footer>© City Library</footer>

Ekran oxuyucuları bu bölgələrin siyahısını təqdim edir və istifadəçi birbaşa <main>-ə və ya <nav>-a keçə bilir — bu, səhifə quruluşu üçün mündəricata bənzəyir. Axtarış sistemləri də əsas məzmunun harada olduğunu daha yaxşı başa düşür.

Əlçatanlıq: hamı üçün veb

Əlçatanlıq (accessibility, qısaca a11y) səhifədən müxtəlif imkanlara malik insanların istifadə edə bilməsi deməkdir: görməyən və zəif görən istifadəçilər (ekran oxuyucusu, böyütmə), eşitməyənlər (subtitrlər), siçandan istifadə edə bilməyənlər (yalnız klaviatura) və rəngləri ayırd etməkdə çətinlik çəkənlər. Bunun böyük hissəsi düzgün HTML ilə öz-özünə gəlir.

• Mənalı hər şəklə alt mətni yaz, bəzək şəkillərinə isə alt="".
• Başlıqları ardıcıllıqla işlət — ekran oxuyucusu istifadəçiləri çox vaxt başlıqdan başlığa keçirlər.
• Əməliyyatlar üçün <button>-dan, keçidlər üçün <a>-dan istifadə et. Klik edilən <div>-ə klaviatura ilə (Tab) çatmaq və onu Enter ilə basmaq olmur.
• Hər forma sahəsinin <label>-i olsun.
• Səhifənin dilini göstər: <html lang="az"> — ekran oxuyucusu sözləri düzgün tələffüz etsin.
• Məlumatı yalnız rənglə vermə: «qırmızı sahələr məcburidir» rəngləri ayırd edə bilməyən insan üçün işləmir — mətn və ya ulduzcuq (*) əlavə et. Mətnlə fon arasında kontrast da kifayət qədər olmalıdır.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .fake, button { display: inline-block; margin: 6px 0; padding: 8px 16px; font: inherit;
    color: white; background: #4f46e5; border: 0; border-radius: 6px; cursor: pointer; }
  button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
</style>

<p>Click here, then press <kbd>Tab</kbd> a few times.</p>
<div class="fake" onclick="this.textContent = 'Clicked!'">I am a div</div>
<br>
<button onclick="this.textContent = 'Clicked!'">I am a button</button>

ARIA: HTML kifayət etməyəndə

ARIA atributları (aria-label, aria-hidden, role) köməkçi texnologiyalara əlavə məlumat verir. Məsələn, yalnız ikondan ibarət düymə: <button aria-label="Close">✕</button>. aria-label olmasa, ekran oxuyucusu yalnız simvolu oxuyar və istifadəçi düymənin nə etdiyini başa düşməz. aria-hidden="true" isə bəzək ikonlarını ekran oxuyucularından gizlədir.