Web Erisilebilirlik Temelleri — Herkes Icin Web Siteleri Olusturmak

Dunya genelinde bir milyardan fazla insan bir tur engelle yasamaktadir. Bu, dunya nufusunun yaklasik %15'idir. Aralarinda kor olan veya az goren kisiler, sagir veya isitme guclugu ceken kisiler, motor engelli kisiler, bilissel farkliliklari olan kisiler veya kirik bir kol ya da migren gibi gecici durumlari olan kisiler bulunmaktadir.

Web sitelerini bu gercekleri dikkate almadan olusturdugumuzda, sadece isleri rahatsiz hale getirmiyoruz. Insanlari, baskalarinin dogal karsiladigi bilgi, hizmet ve firsatlardan mahrum birakiyoruz. Erisilebilirlik bir ozellik degildir. Bir sorumluluktur.

Web erisilebilirlik ne anlama gelir

Web erisilebilirlik, web sitelerinin engelli kisilerin algilayabilecegi, anlayabilecegi, gezinebilecegi ve etkilesimde bulunabilecegi sekilde tasarlanmasi ve gelistirilmesi anlamina gelir. Ayni zamanda web'e katki saglayabilmeleri anlamina da gelir.

Bu sadece ekran okuyucularla sinirli degildir. Erisilebilirlik sunlari kapsar:

• Gorsel: korluk, az gorme, renk korlugu
• Isitsel: sagirlik, isitme guclugu
• Motor: sinirli ince motor kontrolu, titreme, felc
• Bilissel: disleksi, DEHB, bellek guclugu, ogrenme guclugu
• Gecici ve durumsal: kirik bir bilek, ekranda parlak gunes isigi, gurultulu ortam, yavas internet

Anahtar fikir, erisilebilir tasarimin herkese fayda saglamasidir. Altyazilar gurultulu bir odada yardimci olur. Yuksek kontrast parlak isikta yardimci olur. Klavye navigasyonu ileri duzey kullanicilara yardimci olur. Net bir dil, anadili farkli olanlara yardimci olur. Erisilebilirlik ozel bir mod degildir — iyi tasarimdir.

WCAG standardi

Web Content Accessibility Guidelines (WCAG), W3C tarafindan yayimlanan web erisilebilirligin uluslararasi standardidir. Guncel surum WCAG 2.2 olup, POUR kisaltmasiyla bilinen dort ilke etrafinda duzenlenmistir:

Algilanabilir (Perceivable)

Bilgi, tum kullanicilarin algilayabilecegi sekillerde sunulabilmelidir.

• Metin alternatifleri: her gorsel, icerigini anlatan bir alt ozelligine ihtiyac duyar. Dekoratif gorseller alt="" kullanir.
• Altyazilar ve ceviri yazilari: video icerigi altyazi gerektirir; ses icerigi ceviri yazisi gerektirir.
• Uyarlanabilir yapi: icerik, stiller kaldirildiginda anlamli olmalidir. Semantik HTML (<h1>, <nav>, <main>, <article>) kullanin, sadece gorsel stillendirme degil.
• Ayirt edilebilir icerik: yeterli renk kontrasti, olceklenebilir metin, yalnizca renkle iletilen bilgi olmamasi.

Calistiriilabilir (Operable)

Kullanicilar arayuzu calistiirabilmelidir.

• Klavye ile erisilebilir: her etkilesimli oge, yalnizca klavye ile ulasilabilir ve kullanilabilir olmalidir. Fare tuzagi olmamali.
• Yeterli zaman: icerik zaman sinirlarina sahipse, kullanicilar bunlari uzatabilmeli veya devre disi birakabilmelidir.
• Nobeet tetikleyicisi yok: saniyede ucten fazla yanip sonen icerikten kacinin.
• Gezilebilir: net sayfa basliklari, mantikli baslik yapisi, atlama navigasyon baglantilari, gorunur odak gostergeleri.

Anlasilabilir (Understandable)

Icerik ve arayuz anlasilabilir olmalidir.

• Okunabilir metin: sayfa dilini belirtin (lang ozelligi). Mumkun oldugunda net ve basit dil kullanin.
• Ongourulebilir davranis: navigasyon tutarli olmalidir. Sayfalar beklenmedik sekilde baglam degistirmemelidir.
• Girdi yardimi: form alanlarini net sekilde etiketleyin. Neyin yanlis gittigini ve nasil duzeltilecegini aciklayan yardimci hata mesajlari saglayin.

Saglam (Robust)

Icerik, mevcut ve gelecekteki teknolojilerle calisacak kadar saglam olmalidir.

• Gecerli HTML: yardimci teknolojilerin guvenilir sekilde yorumlayabilecegi dogru semantik isaretleme.
• Ad, rol, deger: ozel bilesenler, amaclarini erisilebilirlik API'lerine acmalidir (gerektiginde ARIA araciligiyla).

Uyumluluk duzeyleri

WCAG uc duzey tanimlar:

Dunya genelinde cogu mevzuat AA duzeyinde uyumluluk gerektirir. Hedeflemeniz gereken duzey budur.

Yaygin engeller ve nasil giderilir

Gorsellerde eksik alt metni

Sorun: ekran okuyucu kullanicilari "gorsel" veya hicbir sey duyar.

Cozum: her bilgilendirici gorsele aciklayici alt metni ekleyin. Dekoratif gorseller icin ekran okuyucularin onlari atlamasi icin alt="" kullanin.

<!-- Iyi -->
<img
  src="chart.png"
  alt="Ocak'tan Haziran 2025'e satislarda %40'lik artisi gosteren cubuk grafik"
/>

<!-- Dekoratif -->
<img src="divider.svg" alt="" />

Yetersiz renk kontrasti

Sorun: az goren veya renk korluegu olan kisiler metni okuyamaz.

Cozum: normal metin icin minimum 4,5:1 ve buyuk metin icin 3:1 (18px+ veya 14px kalin) kontrast orani saglayin. Renk kombinasyonlarinizi dogrulamak icin bir kontrast kontrol araci kullanin.

Eksik form etiketleri

Sorun: ekran okuyucu kullanicilari bir form alaninin ne icin oldugunu bilmez.

Cozum: her girdi alaninin for ozelligi araciligiyla baglanan gorunur bir <label> ogesine ihtiyaci vardir.

<!-- Iyi -->
<label for="email">E-posta adresi</label>
<input type="email" id="email" name="email" />

<!-- Kotu: yer tutucu bir etiket degildir -->
<input type="email" placeholder="E-posta adresi" />

Klavye navigasyonu yok

Sorun: fare kullanamayan kullanicilar sikisilip kalir.

Cozum: varsayilan olarak klavye ile erisilebilir olan yerel HTML ogelerini (<button>, <a>, <select>) kullanin. Ozel bilesenler olusturuyorsaniz, odaklanabilir olduklarindan ve klavye olaylarina yanit verdiklerinden emin olun. Bir alternatif saglamadan odak ana hatlarini asla kaldirmayin.

Eksik sayfa yapisi

Sorun: ekran okuyucu kullanicilari verimli sekilde gezinemez.

Cozum: semantik HTML kullanin. Sayfa basina bir <h1>, mantikli baslik hiyerarsisi (duzey atlamayin), yer isaretleri (<nav>, <main>, <footer>).

Otomatik oynatilan medya

Sorun: beklenmeyen ses, ekran okuyucu kullanicilarini rahatsiz eder. Otomatik oynatilan video nobetleri tetikleyebilir veya sikinti yaratabilir.

Cozum: sesi asla otomatik oynatmayin. Video otomatik oynatiliyorsa, varsayilan olarak sessiz oldgundan ve duraklatma kontrolleri sagladigindan emin olun.

Renk yeterli degil

Bilgi iletmenin tek yolu olarak renge asla guvenmeyin. Sunu dusunun:

• Hatalar icin kirmizi kenarlikli bir form alani ayrica bir hata simgesi veya metin mesaji gerektirir
• Renkli cizgilere sahip bir grafik ayrica desenler, etiketler veya bir aciklama gerektirir
• Devam eden metin icindeki bir baglanti, yalnizca renk degisikligi degil, bir alt cizgi veya baska bir gorsel ipucu gerektirir

Erkeklerin yaklasik %8'i ve kadinlarin %0,5'i bir tur renk gorme bozukluguna sahiptir. Bunu goz onunde bulundurarak tasarim yapmak ozel bir durum degildir — temel kapsayiciliktir.

Erisilebilirlik testi

Otomatik test

Otomatik araclar, erisilebilirlik sorunlarinin yaklasik %30-40'ini yakalar. Iyi bir ilk adimdir, eksiksiz bir cozum degildir.

• axe DevTools (tarayici eklentisi) — bir sayfayi tarar ve WCAG ihlallerini raporlar
• Lighthouse (Chrome DevTools'a yerlesik) — bir erisilebilirlik denetimi icerir
• WAVE (web tabanli arac) — sorunlari gosteren gorsel katman

Manuel test

Bircok erisilebilirlik sorunu insan muhakemesi gerektirir:

• Klavye testi: farenizi cikarin ve tum sitenizde Tab, Enter, Escape ve ok tuslariyla gezinin. Her yere ulasabiliyor musunuz? Odak sirasi mantikli mi?
• Ekran okuyucu testi: VoiceOver (Mac), NVDA (Windows, ucretsiz) veya TalkBack (Android) deneyin. Icerik sesli okunduunda anlamli mi?
• Yakinlastirma testi: tarayicinizi %200'e yakinlastirin. Duzeen hala calisiyor mu? Herhangi bir icerik kesilmis veya ust uste binmis mi?
• Azaltilmis hareket: isletim sistemi ayarlarinizda "hareketi azalt" secenegini etkinlestirin. Animasyonlar bu tercihe saygi gosteriyor mu?

Kullanici testi

En degerli geri bildirim, gunluk yasamlarinda yardimci teknolojileri gercekten kullanan kisilerden gelir. Butceniz izin veriyorsa, test suRecinize engelli kullanicilari dahil edin.

Erisilebilirlik bir spektrumdur, onay kutusu degil

Erisilebilirlik, bir bitis cizgisi olan tek seferlik bir proje degildir. Surekli bir pratiktir. Web siteleri degisir, icerik eklenir ve her guncellemey yeni engeller ortaya cikabilir.

Amac mukemmellik degildir. Amac, surekli iyilestirme ve olusturdgunuz seyi kullanan insanlara gercek ilgidir. En etkili degisikliklerle baslayin — renk kontrasti, alt metni, klavye navigasyonu, form etiketleri — ve oradan devam edin.

Kaldirdiginiz her engel, actiginiz bir kapidir.

Hizli kontrol listesi

• Tum gorsellerin anlamli alt metni var (veya dekoratifse alt="")
• Renk kontrasti WCAG AA'yi karsilar (metin icin 4,5:1, buyuk metin icin 3:1)
• Tum form alanlarinin gorunur etiketleri var
• Site tamamen klavye ile gezilebilir
• Basliklar mantikli bir hiyerarsiyi izler
• Odak gostergeleri gorunur
• Sayfa dili ayarlanmis (<html> uzerinde lang ozelligi)
• Hicbir bilgi yalnizca renkle iletilmez
• Videolarin altyazilari var
• Animasyonlar prefers-reduced-motion tercihine saygi gosterir