Erişilebilirlik, sitenize sonradan takılan bir eklenti değil, doğru HTML yazma disiplinidir. İşin güzel yanı, gerçek kullanıcıları durduran engellerin büyük bölümünün bir günlük düzeltmelerle kalkmasıdır: başlık sırası, alternatif metin, odak görünürlüğü, kontrast. Aşağıda teknik jargona boğulmadan, sıradan bir KOBİ sitesinde bugün uygulayabileceğiniz temeller var.
Dört ilke, tek cümlelik karşılıkları
WCAG dört ilkeye dayanır ve her biri aslında çok basit bir soru sorar:
- Algılanabilir: İçerik göremeyene, duyamayana da ulaşıyor mu? (Alternatif metin, altyazı, yeterli kontrast.)
- İşletilebilir: Fare olmadan her şey yapılabiliyor mu? (Klavye erişimi, yeterli süre, güvenli hareket.)
- Anlaşılabilir: Arayüz tahmin edilebilir mi? (Tutarlı gezinme, açık hata mesajları, sade dil.)
- Sağlam: Yardımcı teknolojiler kodu doğru okuyabiliyor mu? (Geçerli, anlamlı HTML.)
Uyum seviyelerinde A, AA ve AAA vardır. Kurumsal projelerde referans alınan pratik hedef genellikle AA seviyesidir; AAA her içerik türü için gerçekçi bir hedef değildir. Kamu ihalesi ya da büyük müşteri sözleşmesi varsa, hangi seviyenin sözleşmede yazdığını işe başlamadan teyit edin: sonradan AA'dan AAA'ya geçmek tasarımın yeniden yazılması demektir.
Bir günde bitecek sekiz düzeltme
- Her sayfada tek bir ana başlık bulunsun ve alt başlıklar seviye atlamadan sıralansın: h1'den sonra h3'e atlamayın.
- Sayfa dilini belirtin: dil özniteliği eksikse ekran okuyucu Türkçe metni İngilizce telaffuzla okumaya çalışır.
- Bilgi taşıyan her görsele alternatif metin yazın; dekoratif görsellerin alternatif metnini boş bırakın.
- Her form alanının etiketi olsun ve etiket tıklandığında ilgili alan odaklansın. Yalnızca yer tutucu metin, etiket yerine geçmez; kullanıcı yazmaya başlayınca kaybolur.
- Bağlantı metinlerini anlamlı yapın: "buraya tıklayın" yerine "fiyat listesini indir".
- Odak halkasını geri getirin; tasarıma uymuyorsa kaldırmak yerine kendi belirgin halkanızı çizin.
- Metin kontrastlarını ölçün; WCAG AA normal metinde 4,5:1, büyük metinde 3:1 oranını ister. Büyük metin, kalın yazıda 18,66 piksel, normal kalınlıkta 24 piksel ve üzeridir.
- Otomatik oynayan ses ve videoyu durdurun ya da en azından ilk ekranda görünen bir durdurma düğmesi koyun.
Bu sekiz maddenin tamamı içerik yönetim panelinden veya tek bir şablon dosyasından çözülebilir; hiçbiri altyapı değişikliği gerektirmez.
On dakikalık klavye testi
Faresi olmayan bir kullanıcı gibi davranın. Sekme tuşuyla sayfayı baştan sona gezin ve şunları kontrol edin: her adımda hangi öğede olduğunuz görünüyor mu, sıralama görsel düzenle aynı mı, menüler klavyeyle açılıp kapanıyor mu, açılan pencereden Esc ile çıkabiliyor musunuz, çıktığınızda odak geldiğiniz butona dönüyor mu?
İki klasik sorun genellikle burada yakalanır: odak, görünmeyen bir açılır menünün içine düşer ve kaybolur; ya da pencere açıldığında odak arkadaki sayfada gezinmeye devam eder. Her ikisi de klavye kullanıcısı için sitenin bittiği andır. Testi ana sayfa, ürün/hizmet sayfası, iletişim formu ve varsa sepet-ödeme adımı olmak üzere dört şablonda yapın; kalan sayfalar bu şablonların türevidir.
Atlama bağlantısı
Sayfanın en başına, ilk sekmede görünen "İçeriğe atla" bağlantısı ekleyin. Menüsü otuz maddelik bir sitede bu küçük bağlantı, klavye kullanıcısını her sayfada onlarca tuş vuruşundan kurtarır. Bağlantının yalnızca odaklanınca görünmesi yeterlidir; tasarımı bozmaz.
Anlamlı HTML, az ARIA
Ekran okuyucular sizin gördüğünüz görseli değil, kodun anlamını okur. Tıklanabilir bir div, tarayıcı için tıklanabilir değildir. Kural basittir: buton için buton, bağlantı için bağlantı, liste için liste etiketi kullanın. Başlık, gezinme ve ana içerik alanlarını anlamlı bölge etiketleriyle işaretleyin.
ARIA öznitelikleri eksik anlamı tamamlamak içindir, süs değildir. Yanlış kullanılan bir ARIA rolü, hiç kullanılmamasından daha zararlıdır: doğru çalışan bir butona yanlış rol vermek onu erişilemez hale getirebilir. Pratik ölçü şudur: yazacağınız ARIA özniteliğinin ne işe yaradığını bir cümleyle anlatamıyorsanız, o özniteliği yazmayın.
Yaygın hatalar ve karşılıkları
| Hata | Kimi etkiler | Düzeltme |
|---|---|---|
| Alternatif metni "resim1.jpg" yazmak | Ekran okuyucu kullananlar | Görselin taşıdığı bilgiyi bir cümlede anlatın |
| Yalnızca renkle durum bildirmek | Renk körlüğü olanlar | Renge ikon veya kelime ekleyin |
| Görsel içine gömülü metin | Büyüteç ve okuyucu kullananlar | Metni HTML olarak yazın, görsel arkada kalsın |
| 12 piksel açık gri dipnot | Yaşa bağlı görme kaybı yaşayanlar | En az 16 piksel gövde metni, yeterli kontrast |
| Kaydırınca kendiliğinden oynayan animasyon | Vestibüler rahatsızlığı olanlar | Azaltılmış hareket tercihine saygı gösterin |
| Zaman aşımına uğrayan form | Yavaş yazan herkes | Süreyi uzatın veya uyarıp uzatma seçeneği verin |
Kaçınılması gereken beş yaklaşım
- Erişilebilirlik eklentisine güvenmek: Sayfaya "erişilebilirlik butonu" ekleyen üçüncü parti katmanlar altta yatan kodu düzeltmez; yanlış etiketlenmiş bir formu bu katmanların hiçbiri düzeltmez.
- Sadece otomatik test yapmak: Otomatik araçlar sorunların ancak bir bölümünü yakalar. Alternatif metnin doğru bilgiyi verip vermediğini yalnızca insan anlar.
- Erişilebilirliği en sona bırakmak: Yayına bir hafta kala eklenen erişilebilirlik, yeniden yazım demektir; kontrast ve odak kararlarını tasarım aşamasında verin.
- Fazla ARIA: Her öğeye rol yazmak "erişilebilir yaptık" anlamına gelmez, çoğu zaman tersini yapar.
- Yalnızca körlüğü düşünmek: Kullanıcılar düşük görme, motor beceri kaybı, disleksi veya geçici kısıtlarla (kırık kol, güneş altındaki ekran) da gelir.
Uygulama özeti
- Bugün başlık sırası, sayfa dili, alternatif metin ve form etiketlerini düzeltin.
- Dört ana şablonda klavyeyle on dakikalık tur atın; odak kaybolan her noktayı not edip kapatın.
- Kontrast ölçümlerini tasarım aşamasında yapın, yayından sonra değil.
- Tarayıcının yerleşik erişilebilirlik denetimini her sürümden önce çalıştırın, sonucunu insan gözüyle doğrulayın.
- Yeni geliştirilen her ekranda "fare olmadan yapılabiliyor mu" sorusunu kabul kriteri haline getirin.
