Web erişilebilirliği, bir web sitesinin görme, işitme, hareket veya bilişsel engeli olan kişiler dahil herkes tarafından algılanabilmesi, kullanılabilmesi ve anlaşılabilmesidir. WCAG (Web Content Accessibility Guidelines), bunun nasıl sağlanacağını tanımlayan ve W3C tarafından yayımlanan uluslararası kılavuzdur. Güncel sürümü WCAG 2.2'dir ve 2023'te yayımlanmıştır. Türkiye'de de 21 Haziran 2025 tarihli Resmî Gazete'de yayımlanan 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, kamu kurumlarının yanı sıra bankalar, özel hastaneler, özel okullar ve e-ticaret yapan hizmet sağlayıcıları gibi bazı özel sektör kuruluşlarının web sitelerini ve mobil uygulamalarını WCAG 2.2'ye dayalı bir kontrol listesine göre erişilebilir hâle getirmesini istiyor.
Bu rehberde WCAG'nin dilini sadeleştiriyor, sık geçen kavramları bir sözlük gibi açıklıyor ve bir işletmenin kendi sitesinde bugün kontrol edebileceği pratik maddeleri örneklerle anlatıyoruz.
Erişilebilirlik kimin için?
Erişilebilirlik çoğu zaman yalnızca görme engelli kullanıcılarla ilişkilendirilir. Oysa kapsam çok daha geniştir:
- Ekran okuyucu kullananlar: Sayfadaki metni sesli okuyan ya da Braille ekrana aktaran yazılımlarla gezinen görme engelli kullanıcılar.
- Az görenler ve renk körleri: Ekranı büyüten, yüksek kontrast kullanan ya da bazı renkleri ayırt edemeyen kişiler.
- Fare kullanamayanlar: Yalnızca klavye, anahtar cihazlar veya sesli komutla gezinen kullanıcılar.
- İşitme engelliler: Video ve ses içeriğinde altyazı veya metin dökümüne ihtiyaç duyanlar.
- Bilişsel farklılığı olanlar: Karmaşık dil, ani değişen içerik veya kısa süre sınırları nedeniyle zorlananlar.
- Geçici veya durumsal kısıtlar: Kolu alçıda olan biri, güneş altında telefona bakan biri, sessiz ortamda video izleyen biri ya da yaşla birlikte görme ve hareket kabiliyeti azalan kullanıcılar.
Son madde, erişilebilirliğin aslında bütün kullanıcılar için kaliteyi artırdığını gösterir. Açık etiketli bir form, iyi kontrastlı bir metin ya da klavyeyle kullanılabilen bir menü herkesin işini kolaylaştırır.
WCAG'nin dört ilkesi: POUR
WCAG'deki bütün kurallar dört ilkenin altında toplanır. İngilizce baş harfleriyle POUR olarak bilinirler:
| İlke | Anlamı | Örnek soru |
|---|---|---|
| Algılanabilir (Perceivable) | Bilgi, kullanıcının algılayabileceği bir biçimde sunulmalı | Görseli göremeyen biri, görselin anlattığını öğrenebiliyor mu? |
| Kullanılabilir (Operable) | Arayüz ve gezinme, farklı yöntemlerle çalıştırılabilmeli | Menü, fare olmadan yalnızca klavyeyle açılabiliyor mu? |
| Anlaşılabilir (Understandable) | İçerik ve arayüz davranışı anlaşılır olmalı | Form hata verdiğinde, neyin yanlış olduğu açıkça yazıyor mu? |
| Sağlam (Robust) | İçerik, yardımcı teknolojiler dahil farklı araçlarla güvenilir biçimde çalışmalı | Ekran okuyucu, özel yapılmış bir butonun buton olduğunu anlayabiliyor mu? |
Uygunluk seviyeleri: A, AA ve AAA
WCAG'deki her başarı ölçütü (success criterion) üç seviyeden birine aittir:
- A: En temel gereksinimler. Bunlar karşılanmazsa bazı kullanıcılar içeriğe hiç erişemez. Örnek: Görsellerin metin alternatifi olması, her işlevin klavyeyle kullanılabilmesi.
- AA: Pek çok kurum ve mevzuatın hedef aldığı seviye. Örnek: Normal metinde en az 4,5:1 kontrast oranı, tutarlı gezinme.
- AAA: En yüksek seviye. Bazı içerik türleri için her ölçütü karşılamak mümkün olmayabilir; genellikle tüm site için hedeflenmez.
Türkiye'deki genelge kapsamında Aile ve Sosyal Hizmetler Bakanlığı'nın yayımladığı kontrol listesi "A Seviyesi" olarak adlandırılıyor ve WCAG 2.2 ilkelerine dayanıyor. Yani kapsamdaki kuruluşlar için ilk hedef A seviyesindeki ölçütlerdir. Kapsam dışındaki işletmeler için de A seviyesinden başlayıp AA'ya doğru ilerlemek gerçekçi bir yol haritasıdır.
Türkiye'de durum: 2025/10 sayılı Genelge
Genelge, erişilebilirliği Türkiye'de ilk kez geniş bir özel sektör kesimini de kapsayacak şekilde düzenliyor. Bakanlığın duyurusuna ve Resmî Gazete'deki metne göre öne çıkan noktalar şunlar:
- Kapsam: Kamu kurumları, üniversiteler ve belediyelerin yanı sıra bankalar, özel hastaneler, Millî Eğitim Bakanlığı izniyle açılan özel öğretim kurumları, yolcu taşıma hizmeti sunan bazı kuruluşlar, A Grubu seyahat acenteleri, belirli abone sayısının üzerindeki elektronik haberleşme işletmecileri ve 6563 sayılı Kanun kapsamında elektronik ticaret yapan hizmet sağlayıcıları.
- Standart: "Web Siteleri ve Mobil Uygulamaların Erişilebilirliği Kontrol Listesi – A Seviyesi" ve WCAG 2.2.
- Süre: Kapsamdaki kurumların büyük kısmı için 1 yıl, e-ticaret yapan hizmet sağlayıcıları için 2 yıllık uyum süresi öngörülüyor.
- Süreç: Kuruluşların kendi bünyelerinde bir inceleme komisyonu oluşturup rapor hazırlaması; izleme sonucunda erişilebilir bulunanların belirli bir süre "Erişilebilirlik Logosu" kullanabilmesi.
Kapsamda olup olmadığınızı, hangi süreye tabi olduğunuzu, sürenin nasıl hesaplandığını ve sürecin ayrıntılarını Bakanlığın resmî sayfasından ve genelge metninden kontrol edin. Bu bölüm genel bilgilendirme amaçlıdır, hukuki danışmanlık değildir. Yurt dışına, özellikle Avrupa Birliği'ne ürün veya hizmet satıyorsanız, AB'nin Avrupa Erişilebilirlik Yasası'nın (European Accessibility Act) bazı dijital hizmetler için getirdiği yükümlülükleri de ayrıca değerlendirmeniz gerekebilir.
Erişilebilirlik sözlüğü: Sık geçen terimler
- Alt metin (alt text): Bir görselin, görseli göremeyen kullanıcıya ne anlattığını açıklayan kısa metin. HTML'de
altözniteliğiyle verilir. Süs amaçlı görsellerde boş bırakılır (alt=""), böylece ekran okuyucu onu atlar. - Ekran okuyucu: Sayfadaki içeriği sesli okuyan yazılım. Windows'ta NVDA ve JAWS, Apple cihazlarında VoiceOver, Android'de TalkBack yaygındır.
- Kontrast oranı: Metin rengi ile arka plan rengi arasındaki parlaklık farkı. AA seviyesinde normal metin için en az 4,5:1, büyük metin için 3:1 istenir.
- Klavye odağı (focus): Klavyeyle gezinirken o an hangi öğenin seçili olduğunu gösteren görsel işaret, genellikle bir çerçeve. Tasarım gerekçesiyle kaldırılması en sık yapılan hatalardandır.
- Odak sırası: Tab tuşuyla ilerlerken öğelerin seçilme sırası. Görsel sırayla uyumlu ve mantıklı olmalıdır.
- Anlamsal (semantik) HTML: Öğeleri amacına uygun etiketle işaretlemek: buton için
<button>, başlık için<h2>, liste için<ul>. Yardımcı teknolojiler sayfanın yapısını bu etiketlerden anlar. - ARIA: HTML'in yetmediği durumlarda yardımcı teknolojilere ek bilgi veren öznitelikler (ör.
aria-expanded,aria-label). Kural basit: Doğru HTML öğesi varsa ARIA'ya gerek yoktur; yanlış kullanılan ARIA, hiç kullanılmamasından daha kötü sonuç verir. - Atlama bağlantısı (skip link): Sayfanın en başında, klavye kullanıcısının menüyü atlayıp doğrudan ana içeriğe geçmesini sağlayan bağlantı.
- Form etiketi (label): Bir giriş alanının ne için olduğunu belirten ve alana programatik olarak bağlanan metin.
- Altyazı ve metin dökümü: Videodaki konuşmaların yazılı karşılığı (altyazı) ve ses içeriğinin tamamının metin hâli (transcript).
- Dokunma hedefi boyutu: WCAG 2.2 ile gelen ölçütlerden biri; dokunulabilir öğelerin AA seviyesinde en az 24×24 CSS piksel alan kaplaması ya da yeterli boşlukla ayrılması.
- Erişilebilirlik beyanı: Sitenin hangi standarda ne ölçüde uyduğunu, bilinen eksikleri ve sorun bildirmek için iletişim yolunu açıklayan sayfa.
Pratik kontroller: Sitenizde bugün bakabileceğiniz 8 konu
1. Görseller ve alt metin
Ürün fotoğrafları, grafikler ve bilgi veren görseller anlamlı bir alt metin taşımalı. Örnek: Bir inşaat firmasının proje görselinde alt="proje1.jpg" yerine alt="Bornova'da tamamlanan altı katlı konut projesinin cephesi". Metin içeren görsellerde (kampanya afişi gibi) görseldeki yazı alt metinde de yer almalı. Logo bağlantısının alt metni genellikle "Firma adı – Ana sayfa" şeklinde olur.
2. Renk kontrastı
Açık gri metinler, beyaz zemin üzerindeki sarı butonlar ve fotoğrafın üzerine yazılmış beyaz başlıklar en sık sorun çıkan yerlerdir. WebAIM'in kontrast denetleyicisi gibi ücretsiz araçlarla renk kodlarını girip oranı anında görebilirsiniz.
3. Yalnızca renkle bilgi vermemek
Formda hatalı alanı yalnızca kırmızı çerçeveyle göstermek, renk körü bir kullanıcı için anlamsızdır. Renge ek olarak bir ikon ve açıklayıcı metin kullanın: "E-posta adresi geçerli değil."
4. Klavye ile gezinme
Fareyi bir kenara bırakın ve yalnızca Tab, Shift+Tab, Enter ve boşluk tuşlarıyla sitenizde gezinin. Menü açılıyor mu? Açılır pencere kapatılabiliyor mu? Odak çerçevesi her zaman görünüyor mu? Bir slayt veya modal içinde sıkışıp kalıyor musunuz? Bu test beş dakika sürer ve çoğu zaman en kritik sorunları ortaya çıkarır.
5. Form etiketleri ve hata mesajları
Her giriş alanının görünür ve alana bağlı bir etiketi olmalı. Yalnızca alanın içinde görünen ve yazınca kaybolan açıklama metni etiket yerine geçmez. Hata mesajları neyin yanlış olduğunu ve nasıl düzeltileceğini söylemeli; zorunlu alanlar yalnızca yıldızla değil, metinle de belirtilmeli. Form tasarımının ayrıntılarına dijital form ve onay süreçleri yazımızda da değindik.
6. Başlık yapısı
Ekran okuyucu kullanıcıları sayfayı çoğu zaman başlıklar arasında atlayarak tarar. Başlıklar görsel boyuta göre değil, hiyerarşiye göre seçilmeli: sayfada tek bir ana başlık, altında sırasıyla h2 ve h3'ler. "Büyük ve kalın görünsün" diye paragrafı başlık etiketiyle işaretlemek bu yapıyı bozar.
7. Bağlantı metinleri
"Buraya tıklayın" veya "Devamı" gibi bağlantılar, bağlamından koparıldığında anlamsızdır. Ekran okuyucular sayfadaki bağlantıları liste hâlinde okuyabildiği için bağlantı metni tek başına anlaşılmalı: "Kurumsal web sitesi bakım paketini inceleyin."
8. Dil ve sayfa başlığı
HTML'de sayfanın dili belirtilmeli (lang="tr"); aksi hâlde ekran okuyucu Türkçe metni İngilizce telaffuzla okuyabilir. Her sayfanın tarayıcı sekmesinde görünen başlığı da benzersiz ve açıklayıcı olmalı.
Gerçek kullanım örnekleri
- Kurumsal site: Ana sayfadaki otomatik dönen slayt, durdurma butonu olmadığı için hem ekran okuyucu kullanıcısını hem de bilişsel farklılığı olan ziyaretçiyi zorlar. Çözüm: Otomatik geçişi kapatmak ya da görünür bir durdur/oynat kontrolü eklemek.
- E-ticaret: Ürün varyantı (beden, renk) yalnızca renkli kutucuklarla seçiliyor ve kutucuklar klavyeyle seçilemiyor. Çözüm: Her seçeneğin metin etiketi olan, klavyeyle kullanılabilen radyo butonlarına dönüştürülmesi.
- Klinik veya okul sitesi: Randevu ya da ön kayıt formu yalnızca PDF olarak indirilip doldurulabiliyor. Çözüm: Formun erişilebilir bir HTML formuna dönüştürülmesi.
- Kampanya sayfası: Tüm bilgiler tek bir büyük görselin içine yazılmış. Çözüm: Metinlerin görselden çıkarılıp HTML metni olarak sayfaya yazılması. Bu aynı zamanda arama motorlarının içeriği okumasını da sağlar.
Test yöntemleri ve araçlar
- Otomatik tarama: Chrome'daki Lighthouse'un erişilebilirlik bölümü veya tarayıcı eklentisi olarak çalışan denetim araçları, kontrast, eksik alt metin ve etiketsiz form alanları gibi sorunları hızla bulur. Ancak otomatik araçlar sorunların yalnızca bir kısmını yakalayabilir; alt metnin anlamlı olup olmadığına karar veremezler.
- Manuel kontroller: W3C'nin "Easy Checks" sayfası, teknik bilgi gerektirmeden yapılabilecek ilk kontrolleri adım adım anlatır.
- Ekran okuyucuyla deneme: NVDA (ücretsiz) veya VoiceOver ile ana sayfanızı ve iletişim formunuzu bir kez dinleyin. Deneyim, raporlardan çok daha öğreticidir.
- Kullanıcı testi: Mümkünse yardımcı teknoloji kullanan gerçek kullanıcılarla test yapın. Bu, en değerli ve en çok atlanan adımdır.
Bir uyarı: Sayfaya tek satır kodla eklenen ve "sitenizi otomatik olarak erişilebilir yapan" araç çubukları (overlay) kaynağındaki sorunları çözmez. Yazı büyütme veya kontrast düğmesi sunmaları, eksik etiketleri, bozuk klavye gezinmesini ya da anlamsız alt metinleri düzeltmez. Kalıcı çözüm, sitenin kodunda ve içeriğinde yapılan düzeltmelerdir.
Sık Sorulan Sorular
Erişilebilirlik sadece büyük şirketler için mi zorunlu?
2025/10 sayılı Genelge belirli sektörleri ve kuruluş türlerini sayıyor; e-ticaret yapan hizmet sağlayıcıları da bunlar arasında. Kapsam dışında kalsanız bile erişilebilir bir site daha fazla kişiye ulaşır, daha kolay kullanılır ve arama motorları tarafından daha iyi anlaşılır.
Mevcut siteyi erişilebilir yapmak için baştan mı yazmak gerekir?
Genellikle hayır. Alt metinler, kontrast, form etiketleri ve başlık yapısı gibi düzeltmelerin çoğu mevcut site üzerinde yapılabilir. Ancak menü, slayt ve modal gibi bileşenler klavye ve ekran okuyucu düşünülmeden yazıldıysa bunların yeniden geliştirilmesi gerekebilir.
Erişilebilirlik SEO'ya katkı sağlar mı?
Doğrudan bir sıralama faktörü olarak değil, dolaylı olarak evet. Anlamlı alt metinler, doğru başlık yapısı, açıklayıcı bağlantı metinleri ve görsel yerine HTML metin kullanımı, arama motorlarının sayfayı anlamasına da yardımcı olur.
Erişilebilirlik beyanı sayfası yayımlamalı mıyız?
İyi bir uygulamadır. Hangi standardı hedeflediğinizi, bilinen eksikleri ve kullanıcıların sorun bildirebileceği bir iletişim yolunu açıklamak, şeffaflık sağlar ve geri bildirim almanızı kolaylaştırır.
Mobil uygulamalar da kapsamda mı?
Evet. Genelge hem web sitelerini hem mobil uygulamaları kapsıyor. Uygulamalarda da metin alternatifleri, yeterli dokunma alanı, kontrast ve ekran okuyucu (VoiceOver, TalkBack) uyumu aynı ilkelerle değerlendirilir.
WCAG 2.1'e göre yapılmış bir site yeterli mi?
WCAG 2.2, 2.1'deki ölçütleri büyük ölçüde içerir ve bunlara odak görünürlüğü, dokunma hedefi boyutu ve erişilebilir kimlik doğrulama gibi yeni ölçütler ekler. 2.1'e uygun bir site iyi bir başlangıç noktasıdır ama yeni ölçütlerin ayrıca kontrol edilmesi gerekir.
Nereden başlamalı?
İlk adım olarak yukarıdaki sekiz konuyu ana sayfanızda, en çok ziyaret alan hizmet sayfanızda ve iletişim formunuzda kontrol edin. Bulduğunuz sorunları "herkesi engelleyen" (klavyeyle kullanılamayan menü, etiketsiz form) ve "zorlaştıran" (düşük kontrast, belirsiz bağlantı metni) diye ikiye ayırın ve önce ilk gruptan başlayın. Mobil tarafta dokunma alanları ve okunabilirlik için mobil uyumlu web tasarım rehberimize de göz atabilirsiniz.
Nexova Studio olarak web geliştirme projelerinde erişilebilirliği tasarım aşamasından itibaren ele alıyor, mevcut siteler için de denetim ve düzeltme çalışması yapıyoruz. Sitenizin durumunu birlikte değerlendirmek için bize ulaşın.
