Web Sitelerinde 7 Yaygın Erişilebilirlik Hatası (ve Nasıl Düzeltilir)

Dijital erişilebilirlik, yalnızca “iyi niyet” konusu değil; kullanıcı deneyimi, marka güveni ve birçok sektörde yasal uyumluluk açısından kritik bir gereklilik. Buna rağmen web sitelerinde hâlâ tekrar eden bazı hatalar yüzünden ekran okuyucu kullanan kişiler, klavyeyle gezinen kullanıcılar, düşük görme yaşayanlar veya bilişsel farklılıkları olan kişiler temel işlemleri bile tamamlamakta zorlanabiliyor.

Bu yazıda, WCAG 2.2 Nedir ve Neden Önemlidir? içeriğinde anlatılan prensipler (Algılanabilir, Kullanılabilir, Anlaşılabilir, Sağlam) ışığında web sitelerinde en sık karşılaşılan 7 erişilebilirlik hatasını ve pratik çözüm önerilerini bulacaksınız.

1) Görseller için alt metin (alt) eksikliği veya hatalı alt metin

Görsellerin alt metni yoksa ekran okuyucu kullanıcıları önemli bağlamı kaçırır. Daha kötüsü, her görsele “image” gibi anlamsız alt metinler yazılması, bilgi kirliliği yaratır.

Nasıl düzeltilir?

• Bilgi taşıyan görsellere kısa ve açıklayıcı alt metin yazın.
• Dekoratif görseller için boş alt kullanın: alt="" (ekran okuyucu atlar).
• Buton gibi işlevsel görsellerde işlevi yazın: “Sepete ekle”, “PDF indir” gibi.

2) Yetersiz renk kontrastı ve yalnızca renkle bilgi verme

Kontrast yetersiz olduğunda özellikle düşük görme yaşayan kullanıcılar metni okuyamaz. Ayrıca “Hatalı alanlar kırmızıyla işaretlendi” gibi yalnızca renge dayalı ipuçları renk körlüğü olan kullanıcılar için erişilebilir değildir.

Nasıl düzeltilir?

• Normal metin için en az 4.5:1, büyük metin için en az 3:1 kontrast hedefleyin (WCAG AA).
• Durumları sadece renkle değil; ikon, desen, metin etiketi ve açıklayıcı mesajla da belirtin.
• Hover/focus durumlarının da yeterli kontrastla görülebildiğinden emin olun.

3) Klavye ile gezinmenin bozulması (odak tuzağı, görünmeyen odak)

Birçok kullanıcı mouse kullanmaz; klavye, anahtar (switch) cihazlar veya sesle kontrol gibi alternatif yöntemlerle gezinebilir. Menülerin açılmaması, modal pencereden çıkılamaması (odak tuzağı) ya da odak göstergesinin CSS ile kapatılması en yaygın sorunlardandır.

Nasıl düzeltilir?

• Sayfanın tüm etkileşimli öğelerinde Tab ile erişim ve mantıklı odak sırası sağlayın.
• :focus stilini kaldırmayın; belirgin bir odak halkası tasarlayın.
• Modal açıldığında odağı modal içine alın, kapanınca odağı tetikleyen öğeye geri verin.

Bu tür sorunlar düzenli test gerektirir. Corpowid (corpowid.ai) gibi otomatik denetim ve izleme araçları, klavye erişimi ve odak problemlerini tespit etmenize ve önceliklendirmenize yardımcı olabilir.

4) Form etiketlerinin eksik olması ve belirsiz hata mesajları

Formlar; üyelik, satın alma, randevu alma ve başvuru gibi kritik akışların merkezindedir. Ancak “placeholder” metninin etiket yerine kullanılması, alanın ne olduğunu ekran okuyucuya doğru aktarmayabilir. Ayrıca hata mesajları sadece “Hata oluştu” gibi genel olursa kullanıcı neyi düzelteceğini anlayamaz.

Nasıl düzeltilir?

• Her form alanı için görünür <label> kullanın ve ilgili girişle ilişkilendirin (for/id).
• Hata mesajını alanla ilişkilendirin (ör. aria-describedby) ve net yönlendirin: “Telefon numarası 10 haneli olmalıdır.”
• Zorunlu alanları yalnızca “*” ile değil metinsel olarak da belirtin.

5) Başlık hiyerarşisinin bozuk olması ve semantik HTML eksikliği

Başlıklar (h1-h6) sayfanın iskeletidir. Tasarım uğruna başlıkların atlanması (ör. h2’den h4’e geçmek), her şeyi div ile yapmak veya buton yerine tıklanabilir span kullanmak ekran okuyucu ve yardımcı teknolojiler için sayfayı “anlamsız” hale getirir.

Nasıl düzeltilir?

• Tek bir h1 ile başlayın; ardından mantıklı sırayla h2, h3… kullanın.
• Buton için <button>, bağlantı için <a> kullanın; rol eklemek son çare olmalıdır.
• Navigasyon, ana içerik ve alt bilgi için semantik bölgelerden yararlanın: <nav>, <main>, <footer>.

6) Bağlantı metinlerinin anlamsız olması (“tıklayın”, “burada”)

Ekran okuyucu kullanıcıları çoğu zaman sayfadaki linkleri listeleyerek gezinir. “Buraya tıklayın” gibi metinler bağlamdan koparıldığında hiçbir şey ifade etmez. Bu aynı zamanda SEO açısından da zayıf bir pratiktir.

Nasıl düzeltilir?

• Bağlantı metnini hedefi anlatacak şekilde yazın: “Erişilebilirlik beyanını görüntüleyin”, “Kargo koşullarını okuyun”.
• Aynı sayfada birden fazla “Detay” linki varsa, her birini ayırt edici hale getirin.

Uyumluluk tarafında da bu detaylar önemlidir. Özellikle farklı ülkelerdeki gereklilikleri takip etmek için Küresel Regülasyon Kıskacında Dijital Erişilebilirlik yazısındaki çerçeve, kurumların riskleri anlamasına yardımcı olur.

7) Otomatik oynayan hareketli içerikler ve durdurma seçeneği olmaması

Otomatik başlayan videolar, kaydırılan banner’lar, parlayan animasyonlar ve sık güncellenen alanlar dikkat dağınıklığına ve bazı kullanıcılar için fiziksel rahatsızlığa yol açabilir. Ayrıca klavye ile kontrol edilemiyorsa erişilebilirlik ciddi şekilde zarar görür.

Nasıl düzeltilir?

• Otomatik oynatmayı varsayılan yapmayın; kullanıcı başlatsın.
• Hareketli içerik için “Durdur / Duraklat / Gizle” kontrolü sağlayın.
• Video içeriklerinde altyazı ve mümkünse transkript sunun.

Sektörel not: Erişilebilirlik “nice to have” değil

Erişilebilirlik hatalarının etkisi sektörlere göre büyüyebilir. Örneğin sağlıkta, çevrimiçi hizmetlere erişememek doğrudan mağduriyet yaratır; bu nedenle Sağlık hizmetleri neden erişilebilir olmalıdır? içeriğinde vurgulanan konular özellikle randevu, sonuç görüntüleme ve bilgilendirme sayfaları için kritik.

Eğitim tarafında ise kayıt, ders içerikleri ve duyuruların erişilebilir olmaması öğrencilerin eşit katılımını engeller; bu bağlamda Üniversiteler için erişilebilirlik yazısı yol gösterici olabilir. Ayrıca farklı pazarlara açılan markalar için bölgesel gereklilikler önem kazanır; örneğin Vizyon 2030: Suudi Arabistan’ın Yeni Erişilebilirlik Zorunluluğu gibi düzenlemeler, erişilebilirliği stratejik bir konu haline getiriyor.

Bu hataları sistematik olarak nasıl azaltırsınız?

• Tasarım aşamasında kapsayıcı düşünün: Renk, tipografi, odak göstergesi, hata durumları en baştan tasarlanmalı.
• Geliştirmede semantiği koruyun: Doğru HTML öğeleri, ARIA’nın doğru ve ölçülü kullanımı.
• Testi rutin hale getirin: Klavye testi, ekran okuyucu ile temel akışlar, kontrast ve form doğrulama kontrolleri.
• Sürekli izleyin: Yeni içerikler ve bileşen güncellemeleri eski sorunları geri getirebilir. Corpowid (corpowid.ai), otomatik erişilebilirlik denetimleri ve düzenli izleme ile tekrar eden hataları erken yakalamanıza yardımcı olur.

Sonuç

Web sitelerindeki erişilebilirlik sorunları çoğu zaman “küçük detaylar” gibi görünür: bir etiket, bir odak stili, bir kontrast ayarı… Ancak bu detaylar, milyonlarca insanın siteyi kullanıp kullanamamasını belirler. Yukarıdaki 7 hatayı kontrol listesi olarak ele alıp, tasarım-geliştirme-test döngüsüne yerleştirerek hem daha kapsayıcı bir deneyim sunabilir hem de WCAG uyumluluğu yolunda sağlam bir temel oluşturabilirsiniz.