Skip to main content
Erişilebilirlik

Erişilebilir Web Sitesi Nasıl Yapılır? 10 Adımda Rehber

Web sitenizi erişilebilir hale getirmek için 10 pratik adım. Alt metin, klavye navigasyonu, renk kontrastı, semantik HTML ve daha fazlası ile engelsiz web rehberi.

Erişilebilir bir web sitesi oluşturmak, sadece engelli kullanıcılar için değil, tüm kullanıcılar için daha iyi bir deneyim sağlar. Bu rehberde, web sitenizi WCAG 2.1 AA standartlarına uygun hale getirmek için atmanız gereken 10 temel adımı paylaşıyoruz.

1. Tüm Görsellere Alt Metin Ekleyin

Her görselin bir alt (alternatif) metin özelliği olmalıdır. Alt metin, görsel yüklenemediğinde veya ekran okuyucu kullanıldığında görselin içeriğini açıklar. Dekoratif görseller için boş alt metin (alt="") kullanın.

2. Klavye Navigasyonunu Sağlayın

Web sitenizin tüm işlevleri yalnızca klavye kullanarak erişilebilir olmalıdır. Tab tuşu ile navigasyon, Enter ile aktivasyon ve Escape ile kapatılma işlemleri çalışmalıdır. Odak göstergesi (focus indicator) her zaman görünür olmalıdır.

3. Yeterli Renk Kontrastı Sağlayın

Metin ve arka plan arasındaki renk kontrast oranı en az 4.5:1 olmalıdır (WCAG AA). Büyük metinler (18pt veya 14pt kalın) için minimum 3:1 oranı yeterlidir. Renk kontrastını kontrol etmek için çeşitli çevrimiçi araçlar mevcuttur.

4. Semantik HTML Kullanın

Doğru HTML etiketlerini kullanmak, yardımcı teknolojilerin sayfanızı doğru yorumlamasını sağlar. Başlıklar için h1-h6 etiketlerini hiyerarşik sırayla, navigasyon için nav, ana içerik için main, yan içerik için aside etiketlerini kullanın.

5. Form Etiketlerini Doğru Kullanın

Her form alanının bir label etiketi ile ilişkilendirilmesi gerekir. Placeholder metin, label yerine kullanılmamalıdır. Hata mesajları açık ve yardımcı olmalı, hatayı nasıl düzelteceğini kullanıcıya belirtmelidir.

6. Video ve Ses İçeriklere Altyazı Ekleyin

Tüm video içeriklerde altyazı bulunmalıdır. Ses içerikleri için metin transkripsiyonu sağlanmalıdır. Bu, işitme engelli kullanıcıların yanı sıra, sessiz ortamda içerik tüketen tüm kullanıcılara fayda sağlar.

7. Sayfa Başlıklarını ve Yapıyı Düzenleyin

Her sayfanın benzersiz ve açıklayıcı bir title etiketi olmalıdır. Başlık hiyerarşisi (h1, h2, h3...) mantıksal sırayı takip etmeli, seviye atlamamalıdır. Bu yapı, ekran okuyucu kullanıcıların sayfayı hızlıca taramalarını sağlar.

8. Bağlantı Metinlerini Açıklayıcı Yapın

"Buraya tıklayın" veya "devamını oku" gibi belirsiz bağlantı metinlerinden kaçının. Bağlantı metni, hedef sayfayı açıkça tanımlamalıdır. Örneğin: "WCAG uyumluluk rehberimizi okuyun" gibi.

9. Responsive ve Esnek Tasarım Oluşturun

Web siteniz farklı ekran boyutlarında ve büyütme seviyelerinde düzgün çalışmalıdır. Metin %200'e kadar büyütüldüğünde içerik kaybolmamalı veya örtüşmemelidir. Yatay kaydırma gerektirmemelidir.

10. Düzenli Erişilebilirlik Testleri Yapın

Erişilebilirlik tek seferlik bir iş değildir. Web sitenizi düzenli olarak test edin. Otomatik test araçları (inculva gibi) ve manuel testler (klavye navigasyonu, ekran okuyucu testi) kombinasyonu en iyi sonuçları verir. inculva, WCAG 2.1 kurallarına göre sürekli izleme ve raporlama sunar. Detaylı bilgi için inculva.com/tr/features sayfasını ziyaret edin.

erişilebilir web sitesiengelsiz webweb erişilebilirlik rehberialt metinklavye navigasyonusemantik HTMLalt text