Anlamsal HTML ve erişilebilirlik

Tıpatıp aynı görünen iki sayfa düşün. Biri yalnızca <div> öğelerinden, diğeri <header>, <nav>, <main> ve <footer> öğelerinden kurulmuş. Göze hiçbir fark yok. Ama ekran okuyucu kullanan görme engelli bir kullanıcı, bir arama motoru, hatta birkaç ay sonra kodu okuyan sen bile büyük bir fark göreceksiniz. İşte bu anlamsal HTML'dir.

Anlamsal HTML nedir?

<div> (blok) ve <span> (satır içi) nötr kaplardır; içerik hakkında hiçbir şey söylemezler. CSS ile biçimlendirme için işe yararlar ama anlamlı bir öğe varsa onu tercih et.

Sayfanın ana bölgeleri

<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 okuyucular bu bölgelerin bir listesini sunar; kullanıcı doğrudan <main>'e ya da <nav>'a atlayabilir. Bu, sayfa yapısı için bir içindekiler tablosu gibidir. Arama motorları da ana içeriğin nerede olduğunu daha iyi anlar.

Erişilebilirlik: herkes için web

Erişilebilirlik (accessibility, kısaca a11y), farklı yeteneklere sahip insanların bir sayfayı kullanabilmesi demektir: görme engelli ve az gören kullanıcılar (ekran okuyucu, yakınlaştırma), işitme engelliler (altyazı), fare kullanamayanlar (yalnızca klavye) ve renkleri ayırt etmekte zorlananlar. Bunun büyük kısmı doğru HTML ile kendiliğinden gelir.

• Anlamlı her görsele bir alt metni, süs görsellerine ise alt="" ver.
• Başlıkları sırayla kullan; ekran okuyucu kullananlar çoğu zaman başlıktan başlığa atlar.
• Eylemler için <button>, gezinme için <a> kullan. Tıklanabilir bir <div>'e klavyeyle (Tab) ulaşılamaz ve Enter ile basılamaz.
• Her form alanının bir <label>'ı olsun.
• Sayfanın dilini belirt: <html lang="tr">; böylece ekran okuyucu kelimeleri doğru telaffuz eder.
• Bilgiyi yalnızca renkle verme: “kırmızı alanlar zorunludur” renkleri ayırt edemeyen biri için işe yaramaz; metin ya da yıldız (*) ekle. Metin ile arka plan arasında yeterli kontrast da olmalı.

<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 yetmediğinde

ARIA öznitelikleri (aria-label, aria-hidden, role), yardımcı teknolojilere ek bilgi verir. Örneğin yalnızca simgeden oluşan bir düğme: <button aria-label="Close">✕</button>. aria-label olmasaydı ekran okuyucu yalnızca simgeyi okurdu ve kullanıcı düğmenin ne yaptığını anlamazdı. aria-hidden="true" ise süs simgelerini ekran okuyuculardan gizler.