Semantik HTML ve Erişilebilirlik (a11y): Herkes İçin Web

Web'in kurucu fikirlerinden biri, herkes için erişilebilir olmasıydı. Ne var ki pratikte çoğu site, ekran okuyucu kullanan görme engelli bir kullanıcı, klavyeyle gezinen biri veya bilişsel farklılıkları olan bir ziyaretçi için gerçek bir engel koşusuna dönüşüyor. Bu erişilebilirlik sorunlarının büyük kısmının kökeni şaşırtıcı derecede basit: yanlış HTML. Semantik HTML ve erişilebilirlik (kısaca a11y), aslında birbirinden ayrılamaz iki kavram. Bu yazıda doğru etiket seçmenin neden bu kadar önemli olduğunu ve web'i gerçekten herkes için nasıl açacağınızı ele alacağız.

Semantik HTML Ne Demek?

Semantik HTML, her öğe için anlamını taşıyan doğru etiketi kullanmak demektir. Bir başlık için <h1>, bir gezinme menüsü için <nav>, bir buton için <button> kullanmak gibi. Bunun karşıtı, her şeyi anlamsız <div> ve <span> etiketleriyle yapmaktır.

Görsel olarak fark görünmeyebilir; CSS ile bir <div>'i butona benzetebilirsiniz. Ama arka planda dünyalar kadar fark vardır. Tarayıcı, arama motoru ve yardımcı teknolojiler, sayfayı etiketlerin anlamına göre yorumlar. Anlamsız etiketler, bu araçları kör bırakır.

<!-- Kötü: anlamsız -->
<div class="baslik">Ürünlerimiz</div>
<div class="menu">...</div>
<div onclick="gonder()">Gönder</div>

<!-- İyi: anlamlı -->
<h1>Ürünlerimiz</h1>
<nav>...</nav>
<button type="submit">Gönder</button>

Her şeyi div ile yapmak, bir kütüphanedeki tüm kitapları kapaksız ve etiketsiz raflara dizmek gibidir. Görenler belki bulur; ama sistematik arayan herkes kaybolur.

Erişilebilirlik Neden Herkesi İlgilendirir?

Erişilebilirliği çoğu kişi "az sayıda engelli kullanıcı için ek bir çaba" sanır. Oysa gerçek bunun çok ötesindedir. Erişilebilir bir site:

• Görme engelli kullanıcılara: Ekran okuyucuların sayfayı doğru okumasını sağlar.
• Motor kısıtlılığı olanlara: Klavyeyle tam gezinilebilirlik sunar.
• Geçici engellilere: Kolu alçıda olan, parlak güneşte ekrana bakan herkese yardım eder.
• Arama motorlarına: Yapıyı net anladığı için SEO'yu güçlendirir.

Yani erişilebilirlik, bir azınlık için fedakârlık değil; herkes için daha iyi bir web'dir. Üstelik pek çok ülkede yasal bir gereklilik hâline gelmektedir.

Doğru Yapı: Belge İskeleti

Semantik bir sayfa, anlamı taşıyan bölge etiketleriyle örülür. Bunlar ekran okuyuculara sayfanın haritasını verir:

<header> <!-- site başlığı, logo -->
  <nav> <!-- ana gezinme --> </nav>
</header>
<main> <!-- sayfanın asıl içeriği -->
  <article> <!-- bağımsız bir içerik parçası --> </article>
  <aside> <!-- yan bilgi --> </aside>
</main>
<footer> <!-- alt bilgi --> </footer>

Bir ekran okuyucu kullanıcısı, bu bölgeler arasında tıpkı gören bir kullanıcının gözüyle sayfayı taraması gibi hızlıca gezinebilir. Her şey <div> olduğunda ise bu harita tamamen kaybolur.

Başlık Hiyerarşisi

Başlıklar (h1–h6) sadece yazıyı büyük göstermek için değildir; içeriğin ana hattını (outline) oluşturur. Kurallar basittir:

1. Sayfada tek bir <h1> olmalı; ana konuyu tanımlar.
2. Başlıklar mantıklı bir sırayla inmeli; h2'den sonra h4'e atlamamalı.
3. Başlık seviyesini boyut için değil, anlam için seçin; boyutu CSS ayarlar.

Formlar ve Etiketler

Erişilebilirlikte en sık kırılan yerlerden biri formlardır. Her form alanının bir <label> etiketiyle açıkça ilişkilendirilmesi gerekir. Yer tutucu (placeholder) metin, etiketin yerini tutmaz; çünkü kullanıcı yazmaya başlayınca kaybolur.

<label for="eposta">E-posta adresi</label>
<input type="email" id="eposta" name="eposta" required>

Bu bağ sayesinde ekran okuyucu, alana odaklanıldığında ne girileceğini seslendirir. Ayrıca etikete tıklamak, ilgili alanı otomatik seçer; bu da herkes için kullanışlıdır.

ARIA: Gereken Yerde, Ölçülü

Bazen HTML'in kendi etiketleri yetmez; karmaşık bileşenler için ARIA (Accessible Rich Internet Applications) öznitelikleri devreye girer. Ancak altın kural şudur: doğru HTML etiketi varsa, ARIA'ya gerek yoktur. ARIA bir merhemdir; ama önce semantik yarayı açmamak gerekir. Gereksiz ARIA, yardımcı olmaktan çok kafa karıştırır.

Berasoft ve Erişilebilir Üretim

Geliştirdiğimiz web projelerinde semantik HTML ve erişilebilirliği baştan planlıyoruz; sonradan yamanacak bir ek değil, temel bir üretim ilkesi olarak. Bunun nedeni sadece kapsayıcılık değil; erişilebilir bir site aynı zamanda daha iyi sıralanır, daha kolay bakım alır ve daha az hata üretir. Sitenizi gerçekten herkes için erişilebilir kılmak istiyorsanız projenizi konuşalım.

Sonuç

Semantik HTML ve erişilebilirlik, birbirinden ayrılamayan iki yüzdür. Doğru etiketi seçmek, sayfanıza anlam katar; bu anlam da hem yardımcı teknolojilere hem arama motorlarına hem de gelecekteki geliştiriciye yol gösterir. Erişilebilirliği baştan düşünmek, sonradan eklemekten hem daha kolay hem daha ucuzdur. Ve nihayetinde amaç basittir: web'i, kim olurlarsa olsunlar herkes için açık tutmak. Bu, iyi mühendisliğin de en temiz tanımlarından biridir.