Web Erişilebilirliği Temelleri: Herkes İçin Daha İyi Bir Web

Web Erişilebilirliği Temelleri: Herkes İçin Daha İyi Bir Web

Web erişilebilirliği, web sitelerinin ve uygulamalarının herkes tarafından --engellilik durumuna bakılmaksızın- kullanılabilir olmasını sağlamaktır. Bu, görme engelli kullanıcıların ekran okuyucu kullanarak web sitenize erişebilmesi, işitme engelli kullanıcıların video içeriklerin altyazısını okuyabilmesi ve motor engelli kullanıcıların klavye ile gezinebilmesi anlamına gelir.

Erişilebilirlik Neden Önemlidir?

Yasal Gereklilikler

Birçok ülkede web erişilebilirliği yasal bir zorunluluk haline gelmiştir. Avrupa'da European Accessibility Act (EAA), Amerika'da Section 508, Türkiye'de ise Engelli Hakları Kanunu kapsamında dijital ürünlerin erişilebilir olması beklenmektedir. Uyumsuzluk, para cezaları ve yasal yaptırımlara yol açabilir.

Geniş Kitlelere Ulaşma

Dünya genelinde yaklaşık 1 milyar engelli bulunmaktadır. Erişilebilir bir web sitesi, bu büyük kitlenin size ulaşmasını sağlar. Ayrıca yaşlı nüfus, geçici engeli olan kişiler ve farklı cihazlar kullananlar da erişilebilirlikten faydalanır.

SEO İyileştirmesi

Erişilebilirlik uygulamaları doğrudan SEO performansınıza da olumlu etki eder. Semantic HTML, alternatif metinler ve yapılandırılmış içerik, arama motorlarının web sitenizi daha iyi anlamasını sağlar.

WCAG Nedir?

Web Content Accessibility Guidelines (WCAG), web içeriğinin erişilebilirliği için uluslararası standartları belirleyen bir rehberdir. W3C (World Wide Web Consortium) tarafından yayınlanan WCAG 2.1, dört temel ilkeye dayanır:

1. Algılanabilirlik (Perceivable)

Kullanıcılar bilgiyi algılayabilmelidir. Bu ilke şunları kapsar:

• Metin alternatifleri: Görüntülü içerikler için alternatif metin (alt text) sağlanmalı
• Altyazılar ve sesli anlatım: Video ve ses içerikleri için altyazı veya transkript eklenmeli
• İçerik sunumu: İçerik, farklı sunum şekillerine adapte edilebilmeli
• Renk bağımsızlığı: Bilgi yalnızca renk kullanılarak aktarılmamalı

2. Kullanılabilirlik (Operable)

Kullanıcılar arayüzü kullanabilmelidir:

• Klavye erişilebilirliği: Tüm işlevler klavye ile yapılabilmeli
• Yeterli süre: İçerik, okunması ve kullanılması için yeterli süreye sahip olmalı
• Nöbettetrisk içeriği: Parlak ışıklı veya hareketli içerikler nöbettetriske yol açmamalı
• Kolay navigasyon: İçerik arasında kolayca gezinebilmeli

3. Anlaşılabilirlik (Understandable)

Kullanıcılar bilgiyi anlayabilmelidir:

• Okunabilirlik: İçerik, anlaşılabilir dilde yazılmalı
• Tahmin edilebilirlik: Arayüz, tutarlı ve öngörülebilir olmalı
• Hata yardımı: Kullanıcılara hatalarında rehberlik edilmeli

4. Güvenilirlik (Robust)

İçerik, çeşitli kullanıcı araçları tarafından yorumlanabilmeli:

• Uyumluluk: Gelecekteki tarayıcı ve teknolojilere uyumlu olmalı
• Standartlara uygunluk: Geçerli HTML ve CSS kullanılmalı

Semantic HTML Kullanımı

Semantic HTML, anlam taşıyan HTML etiketlerini kullanmaktır. Bu, hem erişilebilirlik hem de SEO için hayati önem taşır.

Doğru Etiket Seçimi

```html

<!-- Kötü: div'lerle yapı --> <div class="header"> <div class="nav"> <div class="link">Ana Sayfa</div> </div> </div> <!-- İyi: semantic etiketler --> <header> <nav aria-label="Ana menü"> <a href="/">Ana Sayfa</a> </nav> </header> \`\`\`

Başlık Hiyerarşisi

Başlık etiketleri (h1-h6), içeriğin hiyerarşik yapısını gösterir. Ekran okuyucu kullanıcıları bu yapıya göre sayfada gezinir.

```html

<h1>Ana Sayfa Başlığı</h1> <h2>Bölüm Başlığı</h2> <h3>Alt Bölüm Başlığı</h3> \`\`\`

Form Erişilebilirliği

Form alanları için label etiketi kullanımı zorunludur:

```html

<!-- Kötü --> <input type="text" placeholder="Adınız"> <!-- İyi -->

<label for="name">Adınız</label> <input type="text" id="name" name="name" required> ```

Renk Kontrastı

Yeterli renk kontrastı, düşük görüş açısına sahip kullanıcılar için kritiktir. WCAG 2.1'e göre:

• Normal metin: Minimum 4.5:1 kontrast oranı
• Büyük metin (18pt ve üzeri veya bold 14pt ve üzeri): Minimum 3:1 kontrast oranı

Kontrast oranını araçlarla test edin:

• WebAIM Contrast Checker: Çevrimiçi kontrast kontrol aracı
• Lighthouse: Chrome DevTools içinde yerleşik erişilebilirlik denetimi
• Stark: Figma ve Sketch eklentisi

Klavye Navigasyonu

Birçok engelli kullanıcı fare yerine klavye kullanarak web'de gezinir. İyi bir klavye navigasyonu şu unsurları içerir:

Focus Göstergesi

Klavye ile gezinirken, kullanıcının nerede olduğunu görmesi gerekir. outline özelliğini kaldırmayın:

```css /* Kötü - focus outline'ı kaldırma */ *:focus { outline: none; }

/* İyi - özelleştirilmiş focus göstergesi */ *:focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; } ```

Tab Sırası

HTML'deki doğal tab sırası, genellikle doğru sırada olacaktır. Ancak bazen tabindex ile düzeltme yapmanız gerekebilir:

```html

<!-- Olumsuz tabindex: element tab sırasının dışında --> <div tabindex="-1">Bu alan tab ile erişilemez</div> <!-- Sıfır tabindex: doğal sırayı korur --> <div tabindex="0">Bu alan tab ile erişilebilir, doğal sırayla</div> <!-- Pozitif tabindex: kaçınmalısınız --> <div tabindex="3">Bu alan öncelikli, ama bakım zahmetlidir</div> \`\`\`

Ekran Okuyucu Uyumluluğu

Ekran okuyucu kullanıcıları için içeriğin doğru yorumlanması gerekir:

Alternatif Metinler

Her anlamlı görüntü için alt niteliği kullanın. Dekoratif görüntüler için boş alt kullanın:

```html

<!-- Anlamlı görüntü --> <img src="urun.jpg" alt="Kırmızı renkli, 250 ml kapasiteli termos"> <!-- Dekoratif görüntü --> <img src="dekor.png" alt="" role="presentation"> \`\`\`

ARIA Nitelikleri

ARIA (Accessible Rich Internet Applications), dinamik içerik için ek erişilebilirlik bilgileri sağlar:

```html

<!-- Durum bildirimi --> <div aria-live="polite"> Sepetinize ürün eklendi. Toplam: 3 ürün </div> <!-- Yükleniyor göstergesi --> <div aria-busy="true" aria-label="Sayfa yükleniyor"> <span class="spinner"></span> </div> <!-- Açılır menü --> <button aria-expanded="false" aria-controls="menu-content"> Menü </button> \`\`\`

Erişilebilirlik Test Araçları

Otomatik test araçları, erişilebilirlik sorunlarının çoğunu tespit edebilir:

• axe DevTools: Tarayıcı eklentisi, kapsamlı otomatik denetimler
• Lighthouse: Chrome DevTools içinde yerleşik
• WAVE: Çevrimiçi erişilebilirlik denetim aracı
• Pa11y: CI/CD entegrasyonu için komut satırı aracı

Ancak otomatik testler %100 doğru sonuç vermez. Manuel test ve gerçek kullanıcı testleri mutlaka yapılmalıdır.

Sonuç

Web erişilebilirliği, etik bir yaklaşım olmanın yanı sıra, yasal bir zorunluluk ve iş avantajıdır. Semantic HTML kullanımı, yeterli renk kontrastı, klavye navigasyonu ve ekran okuyucu uyumluluğu temel adımlardır. Erişilebilirlik bir projenin sonunda eklenen bir özellik değil, tasarım sürecinin başından itibaren dikkate alınması gereken bir yaklaşımdır.