En sık 10 erişilebilirlik hatası ve kodla düzeltme
Yayımlandı: 9 dk okumaAccessibleOrNot ekibi
En sık görülen erişilebilirlik hataları düşük kontrastlı metin, eksik alt metin, etiketsiz form alanı, boş bağlantı, boş buton ve tanımsız sayfa dilidir. WebAIM'in Şubat 2026'da bir milyon ana sayfayı taradığı çalışmada bu altı tür, bulunan tüm hataların %96'sını oluşturdu. Altısı da otomatik bulunur ve çoğu tema dosyasında tek bir değişiklikle düzelir. Bu yazıda bu altısını ve klavye ile yakınlaştırma kullanıcısını doğrudan engelleyen dört hatayı, önce ve sonra koduyla anlatıyoruz.
Kısaca
- WebAIM Million 2026'ya göre ana sayfaların %95,9'unda otomatik bulunabilen WCAG hatası var; sayfa başına ortalama 56,1 hata.
- En sık altı hata (düşük kontrast %83,9, eksik alt metin %53,1, etiketsiz form alanı %51, boş bağlantı %46,3, boş buton %30,6, tanımsız dil %13,5) tüm hataların %96'sı.
- Bu hataların çoğu şablondan gelir: ürün kartındaki tek bir ikon butonu düzeltildiğinde binlerce sayfa birden düzelir.
- Kontrast eşiği normal metinde 4,5:1, büyük metinde 3:1; WCAG 2.2'de tıklama hedefi en az 24×24 CSS pikseli.
- Bu hataları düzeltmek otomatik bulunabilen kısmı kapatır; klavye akışı ve hata mesajları için elle test yine gerekir.
En sık 10 erişilebilirlik hatası hangileri?
İlk altı satır WebAIM'in sıklık verisi. Son dördü sıklık verisi olmadan, üç ölçüte göre seçildi: otomatik bulunabiliyor, birkaç satırla düzeliyor ve klavye ya da yakınlaştırma kullanan kişiyi doğrudan engelliyor. Parantezdeki adlar axe-core kural kimlikleri; tarama raporlarında bu adlarla görürsünüz.
| # | Hata (axe kuralı) | WCAG | Ana sayfalarda sıklık (WebAIM 2026) | Süre |
|---|---|---|---|---|
| 1 | Düşük kontrastlı metin (color-contrast) | 1.4.3 AA | %83,9 | Saatler |
| 2 | Eksik alt metin (image-alt) | 1.1.1 A | %53,1 | Saatler |
| 3 | Etiketsiz form alanı (label) | 1.3.1, 4.1.2 A | %51 | Saatler |
| 4 | Boş bağlantı (link-name) | 2.4.4, 4.1.2 A | %46,3 | Saatler |
| 5 | Boş buton (button-name) | 4.1.2 A | %30,6 | Saatler |
| 6 | Sayfa dili yok (html-has-lang) | 3.1.1 A | %13,5 | Dakikalar |
| 7 | Yakınlaştırma kapatılmış (meta-viewport) | 1.4.4 AA | Veri yok | Dakikalar |
| 8 | Atlama bağlantısı ve ana bölge yok (bypass) | 2.4.1 A | Veri yok | Dakikalar |
| 9 | Başlıksız iframe (frame-title) | 4.1.2 A | Veri yok | Dakikalar |
| 10 | Gizli ama odaklanabilen öğe (aria-hidden-focus) | 4.1.2 A | Veri yok | Saatler |
Kaynak: WebAIM, Deque Systems, GitHub
1. Düşük kontrastlı metin nasıl düzeltilir?
Normal metinde metin ile arka plan arasında en az 4,5:1, büyük metinde (24 piksel ve üstü ya da yaklaşık 18,7 piksel kalın) en az 3:1 kontrast sağlayın. En sık sorunlu yerler: üstü çizili eski fiyat, açık gri yer tutucu metin, açık renkli banner üstündeki beyaz yazı. Rengi tek tek değil, tema renk değişkenlerinden düzeltin. Örnekteki #aaaaaa beyaz zeminde 2,3:1; #767676 ise 4,5:1'i geçiyor.
| Kod | |
|---|---|
| Önce | <s class="price-old" style="color:#aaaaaa">1.299 TL</s> |
| Sonra | <s class="price-old" style="color:#767676">1.299 TL</s> |
Shopify'ın tema ilkeleri aynı eşikleri istiyor: küçük metin 4,5:1, büyük metin ve ikon/kenarlık 3:1.
2. Eksik alt metin nasıl düzeltilir?
Her <img> öğesine alt niteliği ekleyin. Ürün görselinde ürünü ve ayırt edici özelliğini yazın (renk, açı, model); yalnız süs amaçlı görsellerde alt="" kullanın. Alt metin dosya adı ya da "görsel", "resim" gibi boş bir kelime olmasın. Lazy-load betiği görseli değiştiriyorsa alt niteliğinin de taşındığını kontrol edin.
| Kod | |
|---|---|
| Önce | <img src="/urun/kaban-lacivert-1.jpg"> |
| Sonra | <img src="/urun/kaban-lacivert-1.jpg" alt="Lacivert yün kaban, önden görünüm"> |
Kodu değil paneli düzenliyorsanız: Shopify'da Products > ürün > medya öğesi > Add alt text; WooCommerce'te Medya > Kütüphane > "Alternatif metin"; Ticimax'te Ürün Yönetimi'ndeki görsel düzenleme bölümünde alt etiket. Ürün kartında görsel ve ürün adı aynı bağlantıdaysa görsele alt="" verin, yoksa ekran okuyucu adı iki kez okur.
Kaynak: W3C, Deque Systems, GitHub
3. Etiketsiz form alanı nasıl düzeltilir?
Her form alanına görünür bir <label for="..."> bağlayın. Yer tutucu (placeholder) metin etiket yerine geçmez; yazmaya başlayınca kaybolur. Görsel tasarım etiket istemiyorsa (ör. üstteki arama kutusu) aria-label kullanın. Beden, renk ve adet seçicileri de aynı kurala tabi.
| Kod | |
|---|---|
| Önce | <input type="email" name="email" placeholder="E-posta adresiniz"> |
| Sonra | <label for="bulten-eposta">E-posta adresiniz</label> <input type="email" id="bulten-eposta" name="email"> |
4. Boş bağlantı nasıl düzeltilir?
İçinde yalnız ikon ya da görsel olan bağlantılara bir ad verin: aria-label, görsel gizli bir metin (sr-only sınıfı) ya da bağlantıdaki görselin alt metni. İkonu aria-hidden="true" ile gizleyin. Ad, bağlantının nereye gittiğini söylesin: "Sepet", "Instagram hesabımız". Sepet, favoriler, sosyal medya ve logo bağlantıları en sık sorunlu yerler.
| Kod | |
|---|---|
| Önce | <a href="/sepet"><svg class="icon-bag">...</svg></a> |
| Sonra | <a href="/sepet" aria-label="Sepet (2 ürün)"><svg class="icon-bag" aria-hidden="true">...</svg></a> |
Kaynak: Deque Systems, GitHub
5. Boş buton nasıl düzeltilir?
İkon butonlarına (sepete ekle, menü, kapat, favori) aria-label ya da görsel gizli metin ekleyin; ikonu aria-hidden="true" ile gizleyin. Ürün listesinde aynı adlı çok sayıda buton varsa ürünü de ada katın. Ekran okuyucu kullanan bir müşteri, 24 tane "Sepete ekle" duyduğunda hangisinin hangi ürüne ait olduğunu bilemez.
| Kod | |
|---|---|
| Önce | <button class="add-to-cart"><i class="icon-cart"></i></button> |
| Sonra | <button class="add-to-cart" aria-label="Lacivert kabanı sepete ekle"><i class="icon-cart" aria-hidden="true"></i></button> |
Kaynak: Deque Systems, GitHub
6. Sayfa dili tanımsızsa ne yapmalı?
<html> öğesine sayfanın dilini ekleyin: Türkçe sayfalarda lang="tr". Dil tanımsızsa ekran okuyucu Türkçe metni başka bir dilin telaffuzuyla okuyabilir. Çok dilli sitede değer, o anki dile göre şablondan basılmalı. Değer geçerli bir dil kodu olmalı: "tr" ya da "tr-TR"; "tr_TR" ve "turkish" geçersiz.
| Kod | |
|---|---|
| Önce | <html> |
| Sonra | <html lang="tr"> |
Shopify'da layout/theme.liquid içinde <html lang="{{ request.locale.iso_code }}">; WordPress temalarında header.php içinde <html <?php language_attributes(); ?>>, değer Ayarlar > Genel > Site dili'nden gelir.
Kaynak: Shopify, WordPress Developer Resources
7. Yakınlaştırma kapatılmışsa ne yapmalı?
viewport meta etiketinden user-scalable=no ve maximum-scale değerlerini kaldırın. Az gören bir müşteri telefonda iki parmakla yakınlaştıramazsa fiyatı ve beden tablosunu okuyamaz. Bu değerler çoğu zaman, form alanına odaklanınca iOS'un otomatik yakınlaştırmasını engellemek için eklenir; bunun doğru çözümü alanların yazı boyutunu 16 piksel yapmak.
| Kod | |
|---|---|
| Önce | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
| Sonra | <meta name="viewport" content="width=device-width, initial-scale=1"> |
Kaynak: Shopify, Deque Systems, GitHub
8. "İçeriğe atla" bağlantısı ve ana bölge nasıl eklenir?
Sayfanın en başına, odaklanınca görünen bir "İçeriğe atla" bağlantısı ekleyin ve ana içeriği <main> ile işaretleyin. Klavyeyle gezinen bir müşteri, her sayfada 40 menü bağlantısını tek tek geçmek yerine tek tuşla ürüne iner. Bağlantının href değerindeki kimlik sayfada gerçekten bulunmalı; odağın taşınması için ana içeriğe tabindex="-1" verin.
| Kod | |
|---|---|
| Önce | <body><header>...</header><div class="content">...</div> |
| Sonra | <body><a class="skip-link" href="#icerik">İçeriğe atla</a> <header>...</header><main id="icerik" tabindex="-1">...</main> |
9. Başlıksız iframe nasıl düzeltilir?
Her <iframe> öğesine içeriğini söyleyen bir title niteliği verin: "Mağaza konumu haritası", "Ürün tanıtım videosu", "Kart bilgileri". YouTube, harita ve canlı destek gibi üçüncü taraf gömme kodlarında title genelde eksik gelir; kodu sayfaya eklerken siz ekleyin. Ödeme sayfasındaki kart formu çoğu zaman bir iframe'dir; adı yoksa ekran okuyucu yalnız "çerçeve" der.
| Kod | |
|---|---|
| Önce | <iframe src="https://www.youtube.com/embed/abc123"></iframe> |
| Sonra | <iframe src="https://www.youtube.com/embed/abc123" title="Kabanın kumaş ve dikiş detayları videosu"></iframe> |
Kaynak: Deque Systems, GitHub
10. Gizli ama odaklanabilen öğe nasıl düzeltilir?
aria-hidden="true" verilen bir bölümün içindeki bağlantı ve butonlar klavyeyle odaklanamamalı. Kapalı sepet çekmecesi ve modallerde sık görülür: klavye kullanıcısı Tab'a bastıkça görünmeyen "Ödemeye geç" bağlantısına gider, ekran okuyucu ise hiçbir şey söylemez. Kapalı çekmece ve modallerde aria-hidden yerine inert niteliği ya da hidden/display:none kullanın.
| Kod | |
|---|---|
| Önce | <div class="cart-drawer" aria-hidden="true"><a href="/odeme">Ödemeye geç</a></div> |
| Sonra | <div class="cart-drawer" inert><a href="/odeme">Ödemeye geç</a></div> |
Kaynak: Deque Systems, GitHub
Bu 10 hatayı düzelttikten sonra ne kalıyor?
Otomatik bulunabilen kısmı kapatmış olursunuz; erişilebilir bir site için bu gerekli ama yeterli değil. Deque'nin çalışmasına göre otomatik test sorunların hacim olarak yaklaşık %57'sini buluyor. Kalan kısım için ana akışınızı (ürün, sepet, ödeme) yalnız klavyeyle ve bir ekran okuyucuyla tamamlayın; odağın görünüp görünmediğine, pop-up'larda sıkışıp sıkışmadığınıza ve hata mesajlarının metinle söylenip söylenmediğine bakın. 20 dakikalık protokol otomatik test yazımızda, platforma göre adımlar kontrol listelerimizde.
Kaynak: Deque Systems
Sık sorulan sorular
En sık görülen erişilebilirlik hatası hangisi?
Düşük kontrastlı metin. WebAIM Million 2026'ya göre ana sayfaların %83,9'unda var. Normal metinde 4,5:1, büyük metinde 3:1 kontrast gerekir.
Boş buton hatası ne demek?
Butonun ekran okuyucuya söyleyebileceği bir adı yok; genelde içinde yalnız ikon olan sepet, menü ya da kapat butonlarında görülür. aria-label ya da görsel gizli metinle düzelir.
Bu hataları bir eklenti ya da widget düzeltebilir mi?
Güvenilir biçimde hayır. Widget sitenin kaynak kodunu değiştirmez; alt metnin ya da buton adının ne olması gerektiğini sayfanın sahibi bilir. Düzeltmeyi temada ve içerikte yapın.
Düzeltmeleri tek tek sayfalarda mı yapmalıyım?
Hayır, önce şablonda. Ürün kartı, üst menü ve alt bilgi gibi tekrar eden bileşenlerdeki tek bir düzeltme binlerce sayfayı birden düzeltir. Sayfa düzeyinde kalanlar çoğunlukla içerik (alt metin) işidir.
Kaynaklar
- The WebAIM Million, 2026 raporu · WebAIM · Şubat 2026
- axe-core kural listesi · Deque Systems, GitHub · güncel
- WCAG 2.2 · W3C · 5 Ekim 2023 (güncel sürüm)
- Shopify tema erişilebilirlik ilkeleri · Shopify · Ekim 2026'da erişildi
- language_attributes() işlev başvurusu · WordPress Developer Resources · Ekim 2026'da erişildi
- Automated testing study identifies 57 percent of digital accessibility issues · Deque Systems · 10 Mart 2021
İlgili yazılar
Bu 10 hatadan hangileri sizde var?
Adresinizi girin. Hataları şablona göre gruplayıp önce/sonra koduyla ve platformunuzun panel adımlarıyla listeleyelim.