Web erişilebilirliği, web içeriğinin engelli kullanıcılar da dahil herkes tarafından kullanılabilmesini sağlar.

Semantic HTML Kullanın

Anlamlı HTML elementleri kullanın:

<!-- ✅ İyi -->
<header>
  <nav>
    <ul>
      <li><a href="/">Ana Sayfa</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Başlık</h1>
    <p>İçerik</p>
  </article>
</main>
<footer>
  <p>&copy; 2024</p>
</footer>

<!-- ❌ Kötü -->
<div class="header">
  <div class="nav">
    <span onclick="navigate()">Ana Sayfa</span>
  </div>
</div>

ARIA Attributes

Screen reader’lar için ARIA kullanın:

<button 
  aria-label="Menüyü aç"
  aria-expanded="false"
  aria-controls="menu">
  <span aria-hidden="true">☰</span>
</button>

<div 
  role="alert" 
  aria-live="polite">
  Form başarıyla gönderildi
</div>

Klavye Navigasyonu

Tüm interaktif elementler klavye ile erişilebilir olmalı:

/* Focus state'leri gösterin */
button:focus,
a:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Skip to content linki */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
}

.skip-link:focus {
  top: 0;
}

Renk Kontrastı

WCAG AA standardına uygun kontrast:

/* ✅ İyi - 4.5:1 kontrast oranı */
.text {
  color: #333;
  background: #fff;
}

/* ❌ Kötü - Düşük kontrast */
.text {
  color: #ccc;
  background: #fff;
}

Alt Text’ler

Görseller için açıklayıcı alt text:

<!-- ✅ İyi -->
<img 
  src="chart.png" 
  alt="2024 satış grafiği, önceki yıla göre %15 artış gösteriyor">

<!-- ❌ Kötü -->
<img src="chart.png" alt="grafik">
<img src="chart.png" alt="">

Form Erişilebilirliği

<form>
  <label for="email">
    E-posta Adresi
    <span aria-label="zorunlu">*</span>
  </label>
  <input 
    type="email" 
    id="email" 
    name="email"
    required
    aria-required="true"
    aria-describedby="email-error">
  <span 
    id="email-error" 
    role="alert"
    class="error">
    Geçerli bir e-posta adresi giriniz
  </span>
</form>

Test Araçları

• axe DevTools: Browser extension
• WAVE: Web accessibility evaluation tool
• Lighthouse: Chrome DevTools’da built-in
• Screen reader test: NVDA, JAWS, VoiceOver

Erişilebilir web siteleri, daha fazla kullanıcıya ulaşır ve SEO’yu iyileştirir!