Web Accessibility ve SEO İlişkisi: a11y'nin Arama Etkisi

Web Accessibility ve SEO İlişkisi: a11y'nin Arama Etkisi

Web erişilebilirliği (accessibility, kısaca a11y) ve SEO, farklı amaçlara hizmet ediyor gibi görünseler de pek çok teknik gereksinimi paylaşırlar. Erişilebilir bir web sitesi, hem engelli kullanıcılara hem de arama motoru botlarına daha iyi bir deneyim sunar. Semantik HTML, alt text, heading hiyerarşisi ve ARIA attribute'ları gibi a11y pratikleri, arama motorlarının içeriğinizi anlamasını da doğrudan kolaylaştırır. Bu yazıda erişilebilirlik ve SEO'nun kesişim noktalarını, uygulamalı örneklerle inceliyoruz.

Accessibility ve SEO Neden Birlikte Düşünülmeli?

Arama motoru botları ve ekran okuyucular (screen readers), web sayfalarını benzer şekilde tüketir: her ikisi de görsel tasarımı göremez, HTML yapısına ve metin içeriğine dayanır. Bu nedenle erişilebilirlik için yapılan iyileştirmeler genellikle SEO'ya da katkıda bulunur.

• Semantik HTML: Doğru HTML elementleri hem screen reader'lar hem de botlar için anlam taşır.
• Alt text: Görselleri hem görme engelli kullanıcılar hem de Google Images için tanımlar.
• Heading hiyerarşisi: İçerik yapısını hem kullanıcılar hem de botlar için netleştirir.
• Link text: Açıklayıcı link metinleri hem navigasyonu hem de anchor text sinyallerini güçlendirir.
• Sayfa hızı: Performans hem erişilebilirlik hem de Core Web Vitals için kritiktir.

1. Semantik HTML Kullanımı

Semantik HTML elementleri, içeriğin amacını ve yapısını tanımlar. <div> ve <span> yerine anlamlı elementler kullanmak, hem erişilebilirliği hem de SEO'yu iyileştirir.

<!-- Kötü: Semantik olmayan yapı -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Ana Sayfa</a></div>
  </div>
</div>
<div class="content">
  <div class="title">Başlık</div>
  <div class="text">İçerik metni...</div>
</div>

<!-- İyi: Semantik HTML -->
<header>
  <nav aria-label="Ana navigasyon">
    <ul>
      <li><a href="/">Ana Sayfa</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Başlık</h1>
    <p>İçerik metni...</p>
  </article>
</main>
<footer>
  <p>&copy; 2025 Tarik Tunç</p>
</footer>

2. Görsel Erişilebilirliği ve SEO

Alt text, görselleri hem görme engelli kullanıcılar hem de arama motorları için tanımlar. Google Images sıralamasında alt text doğrudan etkilidir.

<!-- Kötü örnekler -->
<img src="photo.webp">                              <!-- Alt text yok -->
<img src="photo.webp" alt="resim">                  <!-- Anlamsız alt text -->
<img src="photo.webp" alt="seo seo optimizasyon seo"> <!-- Keyword stuffing -->

<!-- İyi örnekler -->
<img
  src="core-web-vitals-dashboard.webp"
  alt="Google Search Console Core Web Vitals raporu ekran görüntüsü"
  width="800"
  height="450"
  loading="lazy"
>

<!-- Dekoratif görseller için boş alt -->
<img src="divider.svg" alt="" role="presentation">

<!-- Figure ve figcaption ile -->
<figure>
  <img src="lighthouse-score.webp" alt="Lighthouse performans skoru 98/100">
  <figcaption>Optimizasyon sonrası Lighthouse performans skoru</figcaption>
</figure>

3. Heading Hiyerarşisi

Heading'ler (h1-h6) hem screen reader kullanıcılarının hem de arama motorlarının içerik yapısını anlamasını sağlar. Her sayfada yalnızca bir <h1> olmalı ve heading seviyeleri atlanmamalıdır.

<!-- Doğru heading hiyerarşisi -->
<h1>Web Accessibility ve SEO</h1>           <!-- Seviye 1: Sayfa başlığı -->
  <h2>Semantik HTML Kullanımı</h2>          <!-- Seviye 2: Ana bölüm -->
    <h3>Landmark Elementleri</h3>           <!-- Seviye 3: Alt bölüm -->
    <h3>Form Elementleri</h3>               <!-- Seviye 3: Alt bölüm -->
  <h2>Görsel Erişilebilirliği</h2>          <!-- Seviye 2: Ana bölüm -->
    <h3>Alt Text Best Practices</h3>        <!-- Seviye 3: Alt bölüm -->

<!-- Yanlış: Seviye atlama -->
<h1>Başlık</h1>
  <h4>Alt başlık</h4>  <!-- h2 ve h3 atlanmış! -->

4. Link Erişilebilirliği

Açıklayıcı link metinleri hem screen reader kullanıcıları hem de SEO anchor text sinyalleri için önemlidir.

<!-- Kötü -->
<a href="/blog/seo-rehberi">Buraya tıklayın</a>
<a href="/blog/seo-rehberi">Devamını oku</a>

<!-- İyi -->
<a href="/blog/seo-rehberi">Teknik SEO rehberimizi okuyun</a>

<!-- Yeni sekmede açılan linkler -->
<a href="https://schema.org" target="_blank" rel="noopener noreferrer">
  Schema.org dokümantasyonu
  <span class="sr-only">(yeni sekmede açılır)</span>
</a>

5. ARIA ve SEO

ARIA (Accessible Rich Internet Applications) attribute'ları, HTML'in yetersiz kaldığı durumlarda erişilebilirlik bilgisi sağlar. Arama motorları ARIA'yı doğrudan sıralama faktörü olarak kullanmaz, ancak erişilebilir siteler dolaylı olarak daha iyi performans gösterir.

Erişilebilirlik Test Araçları

• axe DevTools: Tarayıcı eklentisi olarak erişilebilirlik denetimi.
• Lighthouse Accessibility: Chrome DevTools içinde erişilebilirlik skoru.
• WAVE: Web Accessibility Evaluation Tool.
• Pa11y: CI/CD entegrasyonu için komut satırı erişilebilirlik testi.

// Pa11y ile otomatik erişilebilirlik testi
// package.json
{
  "scripts": {
    "test:a11y": "pa11y-ci --config .pa11yci.json"
  }
}

// .pa11yci.json
{
  "defaults": {
    "standard": "WCAG2AA",
    "timeout": 10000
  },
  "urls": [
    "http://localhost:3000/",
    "http://localhost:3000/blog",
    "http://localhost:3000/about"
  ]
}

Sonuç

Web erişilebilirliği ve SEO, birbirini tamamlayan disiplinlerdir. Semantik HTML, açıklayıcı alt text, doğru heading hiyerarşisi ve anlamlı link metinleri gibi a11y pratikleri, arama motorlarının içeriğinizi daha iyi anlamasını sağlar. Erişilebilir bir web sitesi inşa etmek, sadece etik bir sorumluluk değil, aynı zamanda SEO avantajı ve yasal uyumluluk sağlayan stratejik bir yatırımdır.

Kaynaklar

• W3C - WCAG Guidelines
• web.dev - Accessibility
• MDN - Web Accessibility
• axe DevTools