Web erişilebilirlik (Accessibility): WCAG standartları ve pratik uygulamalar

Web Erişilebilirliği (Accessibility): WCAG Standartları ve Pratik Uygulamalar

Erişilebilirlik, web'in herkes için erişilebilir olmasını sağlayan temel bir prensiptir. WCAG (Web Content Accessibility Guidelines) standartları, dünya genelinde kabul görmüş ve yasal olarak dayanak alınan bir rehberdir. Bu yazıda, WCAG 2.1'in detaylarına inecek, ARIA etiketlerini ve pratik uygulama örneklerini ele alacağız.

WCAG 2.1 Seviyeleri

WCAG üç farklı uyumluluk seviyesi belirler:

Seviye A (Minimum)

Temel erişilebilirlik gereksinimlerini karşılar. Birçok yasal düzenlemenin minimum beklentisidir:

• Tüm görüntü için alternatif metin
• Video için altyazı
• Klavye ile erişilebilirlik
• Sayfa başlık yapısı
• Link metninin anlamlı olması

Seviye AA (Önerilen)

Çoğu kurumsal web sitesinin hedeflemesi gereken seviyedir:

• Yeterli renk kontrastı (4.5:1)
• Metin yeniden boyutlandırma (%200'e kadar)
• İçerik sırası ve düzeni
• Dil belirleme
• Tekrarlayan içeriğin atlanması

Seviye AAA (En Yüksek)

Tam erişilebilirlik hedefleyen projeler için:

• 7:1 kontrast oranı
• İşaret dili çevirisi
• Gelişmiş timing seçenekleri
• Düşük okuma seviyesinde içerik

WCAG İlkelerinin Pratik Uygulamaları

1. Alternatif Metin (Alt Text) Oluşturma

Her anlamlı görüntü için açıklayıcı bir alt text yazın:

```html

<!-- İyi: Açıklayıcı ve kısa -->

<img src="grafik.jpg" alt="2025 yılında satışların %40 arttığını gösteren çubuk grafiği">

<!-- Kötü: Çok uzun veya gereksiz -->

<img src="grafik.jpg" alt="Grafik görseli resim jpg grafik satış grafiği 2025 yılı"> ```

İyi bir alt text yazmanın kuralları:

• Görüntünün amacını açıkça belirtin
• "Görüntü", "fotoğraf" gibi gereksiz kelimeler kullanmayın
• 125 karakteri aşmamaya çalışın
• Dekoratif görüntüler için boş alt text kullanın

2. Video ve Multimedya Erişilebilirliği

Video içerikler için kapsamlı bir erişilebilirlik stratejisi:

```html <video controls> <source src="egitim.mp4" type="video/mp4">

<track kind="subtitles" src="tr.vtt" srclang="tr" label="Türkçe"> <track kind="captions" src="tr-captions.vtt" srclang="tr" label="Türkçe altyazı"> <track kind="descriptions" src="tr-desc.vtt" srclang="tr" label="Sesli anlatım"> </video> \`\`\`

Multimedya için gerekli olanlar:

• Altyazılar (subtitles): Diyalogların metin karşılığı
• Açıklamalı altyazılar (captions): Ses efektlerini de içerir
• Sesli anlatım (audio description): Görüntüdeki eylemleri tarif eder
• Transkript: Tam metin versiyonu

3. Form Erişilebilirliği

Form alanları, erişilebilirliğin en sık ihmal edilen alanlarından biridir:

```html

<form> <div class="form-group"> <label for="email">E-posta Adresi <span aria-hidden="true">*</span> <span class="sr-only">(zorunlu alan)</span> </label> <input type="email" id="email" name="email" required aria-describedby="email-help email-error" aria-invalid="false" > <span id="email-help" class="help-text"> Sizi asla spam iletmeyiz </span> <span id="email-error" class="error" role="alert" hidden> Geçerli bir e-posta adresi girin </span> </div>

<button type="submit">Gönder</button>

</form> \`\`\`

Form erişilebilirliği için temel kurallar:

• Her input alanı için label etiketi
• Hata mesajları için role="alert" veya aria-live
• Zorunlu alanları belirtmek için required niteliği ve görsel göstergeler
• Yardımcı metinler için aria-describedby

4. Tablo Erişilebilirliği

Veri tabloları doğru yapılandırıldığında ekran okuyucular tarafından anlaşılabilir:

```html

<table> <caption>2025 Yılı Satış Raporu</caption> <thead> <tr> <th scope="col">Ay</th> <th scope="col">Gelir</th> <th scope="col">Müşteri Sayısı</th> </tr> </thead> <tbody> <tr> <th scope="row">Ocak</th> <td>150.000 TL</td> <td>245</td> </tr> <tr> <th scope="row">Şubat</th> <td>180.000 TL</td> <td>312</td> </tr> </tbody> </table> \`\`\`

5. Gezinti ve Yapı

Tutarlı ve öngörülebilir bir gezinti yapısı:

```html

<!-- Ana gezinti --> <nav aria-label="Ana menü"> <ul> <li><a href="/" aria-current="page">Ana Sayfa</a></li> <li><a href="/hakkimizda">Hakkımızda</a></li> <li> <a href="/hizmetler" aria-expanded="false" aria-controls="services-menu"> Hizmetler </a> <ul id="services-menu" hidden> <li><a href="/web-tasarim">Web Tasarım</a></li> <li><a href="/mobil-gelistirme">Mobil Geliştirme</a></li> </ul> </li> </ul> </nav> <!-- Breadcrumb --> <nav aria-label="Breadcrumb"> <ol> <li><a href="/">Ana Sayfa</a></li> <li><a href="/blog">Blog</a></li> <li aria-current="page">WCAG Rehberi</li> </ol> </nav> <!-- Ana içeriğe atla -->

<a href="#main-content" class="skip-link">Ana içeriğe geç</a>

<main id="main-content"> <!-- İçerik burada --> </main> \`\`\`

ARIA (Accessible Rich Internet Applications)

ARIA, dinamik ve karmaşık arayüzler için ek erişilebilirlik bilgisi sağlar.

ARIA Roller

İki temel rol kategorisi vardır:

WAI-ARIA rolleri:

• role="banner": Sayfa başlığı
• role="navigation": Gezinti alanı
• role="main": Ana içerik
• role="complementary": Yardımcı içerik
• role="contentinfo": Sayfa bilgi alanı
• role="search": Arama alanı

Widget rolleri:

• role="tab", role="tablist", role="tabpanel": Sekme arayüzleri
• role="dialog", role="alertdialog": Pencere açılır kutuları
• role="menu", role="menuitem": Menüler
• role="progressbar": İlerleme çubuğu

ARIA Durumları ve Özellikleri

```html

<!-- Açılır menü -->

<button aria-haspopup="true" aria-expanded="false" id="menu-button"

Seçenekler </button>

<div role="menu" aria-labelledby="menu-button" hidden > <div role="menuitem" tabindex="-1">Seçenek 1</div> <div role="menuitem" tabindex="-1">Seçenek 2</div> </div> <!-- Arama kutusu -->

<input type="search" aria-label="Site ara" aria-autocomplete="list" aria-controls="search-results" aria-activedescendant=""

<!-- Yükleme durumu --> <div aria-live="polite" aria-busy="false"> Sonuçlar yükleniyor... </div> \`\`\`

ARIA'nın Altın Kuralı

ARIA'yı yalnızca native HTML yeterli olmadığında kullanın. Doğru HTML etiketleri her zaman ARIA'dan tercih edilir.

```html

<!-- Kötü: role eklemeye gerek yok --> <div role="button" onclick="submit()">Gönder</div> <!-- İyi: native button kullanın -->

<button type="submit">Gönder</button> ```

Mobil Erişilebilirlik

Mobil cihazlarda ek erişilebilirlik hususları:

• Dokunma hedef boyutu: Minimum 44x44 piksel
• Yakınlaştırma: %200'e kadar yakınlaştırmaya izin verin
• Otomatik oynatma: Video ve ses otomatik başlatılmamalı
• Yatay kaydırma: İçerik yatay kaydırma gerektirmemeli

```css /* Dokunma hedef boyutu */ button, a, input[type="submit"] { min-height: 44px; min-width: 44px; }

/* Yakınlaştırmaya izin ver */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Yatay kaydırma engelleme */ img, video { max-width: 100%; height: auto; } ```

Test ve Doğrulama

Otomatik Testler

Otomatik araçlar %30-40 oranında erişilebilirlik sorunlarını tespit edebilir:

• axe-core: En kapsamlı otomatik test kütüphanesi
• Lighthouse: Chrome DevTools erişilebilirlik denetimi
• WAVE: Tarayıcı eklentisi ile görsel gösterim

Manuel Testler

Kalan %60-70 için manuel test gereklidir:

• Klavye testi: Tüm işlevler klavye ile yapılmalı
• Ekran okuyucu testi: NVDA veya VoiceOver ile test
• Yakınlaştırma testi: %400'e kadar yakınlaştırma
• Renk kontrastı testi: Tüm metinlerde yeterli kontrast

Gerçek Kullanıcı Testi

Engelli kullanıcıların katılımıyla testler, en değerli geri bildirimi sağlar. Bu testler için:

• Farklı engel türlerinden kullanıcılar dahil edin
• Gerçek görevler verin, senaryo-based test yapın
• Engellik durumunu değil, deneyimi test edin

Sonuç

WCAG standartlarına uyum, yalnızca yasal bir zorunluluk değil, etik bir sorumluluktur. Doğru HTML yapısı, ARIA nitelikleri ve kapsamlı testlerle, herkes için erişilebilir web deneyimleri oluşturabilirsiniz. Erişilebilirlik, tasarım sürecinin başından itibaren düşünülmesi gereken bir yaklaşımdır.