Ana içeriğe geç
Rehberler

Erişilebilirlik (Accessibility / WCAG)

EErcan Büyükcafer SEO & Dijital Pazarlama Uzmanı · SeoPulse Son güncelleme: 29 Temmuz 2026

Erişilebilirlik, görme/işitme/motor engelli kullanıcıların da sitenizi rahatça kullanabilmesidir. SeoPulse bunu Google'ın Lighthouse denetimiyle ölçer ve WCAG 2.1 AA standardını hedefler.

Neden önemli?

Erişilebilir bir site daha geniş bir kitleye ulaşır ve birçok ülkede yasal bir zorunluluktur. Erişilebilirlik iyileştirmelerinin çoğu (görsel alt metni, anlamlı başlıklar, form etiketleri) aynı zamanda doğrudan SEO sinyalidir; yani hem kullanıcıya hem Google'a yarar. Kötü kontrast veya etiketsiz butonlar hem engelli kullanıcıyı hem arama motorunu içerikten mahrum bırakır.

Sitenizde nasıl anlarsınız?

SeoPulse "Erişilebilirlik" modülü 0-100 arası bir Lighthouse skoru ve tespit edilen somut sorunları listeler (renk kontrastı, eksik alt metin, etiketsiz form alanı, ARIA hataları gibi). Skor 90'ın altındaysa iyileştirme gerekir. Kendiniz için: sitede F12 ile geliştirici araçlarını açıp "Lighthouse" sekmesinden "Accessibility" denetimi çalıştırabilirsiniz.

Nasıl düzeltilir?

  1. 1

    Metin ile arka plan arasında yeterli renk kontrastı sağlayın (normal yazı için en az 4.5:1); açık gri üzerine daha açık gri gibi soluk kombinasyonlardan kaçının.

  2. 2

    Tüm anlamlı görsellere içeriği anlatan alt metni ekleyin; yalnızca süs amaçlı görsellere alt="" verin.

  3. 3

    Her form alanını bir <label> ile eşleştirin; placeholder tek başına etiket yerine geçmez.

  4. 4

    Sadece ikondan oluşan link/butonlara aria-label ile metin karşılığı ekleyin.

  5. 5

    Sayfanın <html> etiketine dil (lang) niteliği verin ve içeriği klavye (Tab tuşu) ile gezilebilir tutun.

Şu an (sorunlu)
<a href="/sepet"><img src="/cart.svg"></a>
<input type="email" placeholder="E-posta">
<p style="color:#bbb; background:#fff">İndirim kodunuz</p>
Olması gereken (doğru)
<!-- İkon linke ekran okuyucu metni -->
<a href="/sepet" aria-label="Sepete git"><img src="/cart.svg" alt=""></a>

<!-- Form alanına bağlı etiket -->
<label for="eposta">E-posta</label>
<input id="eposta" type="email">

<!-- Yeterli kontrast: koyu metin, açık zemin -->
<p style="color:#333; background:#fff">İndirim kodunuz</p>

Kendiniz uğraşmak istemiyor musunuz?

Bu sorunu ve raporunuzdaki diğerlerini sizin için çözelim.

Biz çözelim

Diğer rehberler