Web Erişilebilirlik (a11y): Herkes İçin Web Sitesi

Web erişilebilirlik (accessibility, kısaca a11y), web sitelerinin engelli bireyler dahil herkes tarafından kullanılabilir olmasını sağlayan tasarım ve geliştirme yaklaşımıdır. Dünya nüfusunun yaklaşık %15'i bir tür engelle yaşıyor. Erişilebilir bir web sitesi yalnızca etik bir sorumluluk değil, aynı zamanda daha geniş bir kitleye ulaşmanın ve SEO performansını artırmanın da yoludur.

WCAG ve POUR Prensipleri

WCAG (Web Content Accessibility Guidelines), W3C tarafından yayımlanan web erişilebilirlik standartlarıdır. WCAG, dört temel prensip üzerine kuruludur (POUR):

• Perceivable (Algılanabilir): Bilgi ve arayüz bileşenleri kullanıcıya algılayabileceği şekilde sunulmalıdır
• Operable (Kullanılabilir): Arayüz bileşenleri ve navigasyon kullanılabilir olmalıdır
• Understandable (Anlaşılabilir): Bilgi ve arayüz işleyişi anlaşılabilir olmalıdır
• Robust (Sağlam): İçerik, yardımcı teknolojiler dahil çeşitli kullanıcı aracıları tarafından güvenilir şekilde yorumlanabilmelidir

WCAG üç uyumluluk seviyesi belirler: A (minimum), AA (standart — çoğu yasal gereklilik bu seviyeyi hedefler) ve AAA (en yüksek).

Alt Metin (Alternative Text)

Görseller için alt metin, ekran okuyucu kullanan kullanıcılar için hayati önem taşır:

<!-- İyi alt metin — açıklayıcı -->
<img src="grafik.png" alt="2025 yılı aylık satış grafiği, Aralık ayında %30 artış gösteriyor">

<!-- Kötü alt metin — anlamsız -->
<img src="grafik.png" alt="grafik">
<img src="grafik.png" alt="resim">

<!-- Dekoratif görseller için boş alt -->
<img src="dekoratif-cizgi.png" alt="">

Alt Metin Yazma Kuralları

• Görselin amacını ve içerdiği bilgiyi açıklayın
• "...resmi" veya "...görseli" gibi ifadeler kullanmayın — ekran okuyucu zaten bir görsel olduğunu söyler
• Dekoratif görseller için alt="" kullanın (boş bırakın, özniteliği silmeyin)
• Karmaşık görseller (grafikler, infografikler) için detaylı açıklama sağlayın

Semantik HTML

Doğru HTML elemanlarını kullanmak, yardımcı teknolojilerin sayfanızı anlamasını sağlar:

<!-- Kötü: her şey div -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">...</div>

<!-- İyi: semantik elemanlar -->
<header>
  <nav aria-label="Ana menü">...</nav>
</header>
<main>...</main>
<footer>...</footer>

Önemli semantik elemanlar:

• <header>, <nav>, <main>, <footer> — sayfa bölümleri
• <h1> - <h6> — başlık hiyerarşisi (seviye atlamayın)
• <button> — tıklanabilir eylemler için (div + onclick kullanmayın)
• <a> — sayfa yönlendirmeleri için
• <ul>, <ol> — liste yapıları için
• <table>, <th> — tablo verileri için

ARIA (Accessible Rich Internet Applications)

ARIA öznitelikleri, HTML'in yetersiz kaldığı durumlarda erişilebilirlik bilgisi ekler:

<!-- Rol tanımlama -->
<div role="alert">İşlem başarılı!</div>

<!-- Durum bilgisi -->
<button aria-expanded="false" aria-controls="menu">Menü</button>
<div id="menu" aria-hidden="true">...</div>

<!-- Etiketleme -->
<input type="search" aria-label="Site içinde arama">
<nav aria-label="Sayfa altı bağlantıları">...</nav>

Altın kural: Mümkünse ARIA yerine doğru HTML elemanını kullanın. "No ARIA is better than bad ARIA" — yanlış ARIA, hiç ARIA olmamasından daha kötüdür.

Klavye Navigasyonu

Birçok kullanıcı fare kullanamaz. Sitenizin tamamen klavye ile kullanılabilir olması gerekir:

• Tab: Etkileşimli elemanlar arasında gezinme
• Enter/Space: Buton ve bağlantıları etkinleştirme
• Escape: Modal veya açılır menüleri kapatma
• Ok tuşları: Menü öğeleri veya sekmeler arasında gezinme

/* Focus göstergesini asla kaldırmayın */
:focus {
  outline: 2px solid #4A90D9;
  outline-offset: 2px;
}

/* Yalnızca klavye kullanıcıları için */
:focus-visible {
  outline: 2px solid #4A90D9;
  outline-offset: 2px;
}

/* Fare ile tıklamada outline gizle */
:focus:not(:focus-visible) {
  outline: none;
}

Renk Kontrastı

Yeterli renk kontrastı, az gören kullanıcılar ve parlak güneş altında ekrana bakan herkes için önemlidir:

• WCAG AA: Normal metin için en az 4.5:1, büyük metin için 3:1 kontrast oranı
• WCAG AAA: Normal metin için 7:1, büyük metin için 4.5:1

Rengi tek bilgi aktarım yöntemi olarak kullanmayın. Örneğin, form hatalarını yalnızca kırmızı renkle değil, ikon ve metin ile de belirtin.