Kısaca: Web sitesi erişilebilirliği, bir sitenin görme, işitme, hareket ya da bilişsel farklılıkları olan kişiler dahil herkes tarafından algılanabilir, kullanılabilir ve anlaşılabilir olmasıdır. Uluslararası ölçüt olarak W3C'nin yayımladığı WCAG (Web İçeriği Erişilebilirlik Yönergeleri) kullanılır. Yeterli renk kontrastı, görsellerde alt metin, klavyeyle gezinme ve etiketli formlar erişilebilirliğin temel adımlarıdır.
Web sitesi erişilebilirliği, bir sitenin görme, işitme, hareket ya da bilişsel farklılıkları olan kişiler dahil herkes tarafından sorunsuz kullanılabilmesidir. Ekran okuyucuyla gezinen bir kullanıcının görsellerin ne anlattığını duyabilmesi, fare kullanamayan birinin yalnızca klavyeyle form doldurabilmesi ya da renkleri ayırt etmekte zorlanan bir kişinin butonları görebilmesi erişilebilirliğin somut örnekleridir. Bu alanda uluslararası ölçüt, W3C tarafından yayımlanan WCAG (Web Content Accessibility Guidelines) yönergeleridir. Erişilebilir bir site yalnızca engelli bireyler için değil; yaşlı kullanıcılar, güneş altında telefondan bakanlar ve yavaş bağlantıyla gezinenler için de daha iyi bir deneyim sunar.
WCAG nedir, hangi ilkelere dayanır?
WCAG, web içeriğinin erişilebilir olması için test edilebilir başarı ölçütleri tanımlar. Güncel sürümleri WCAG 2.1 ve WCAG 2.2'dir. Yönergeler dört temel ilkeye dayanır:
| İlke | Anlamı | Örnek uygulama |
|---|---|---|
| Algılanabilir | İçerik, kullanıcının algılayabileceği biçimde sunulmalı | Görsellerde alt metin, videolarda altyazı |
| İşletilebilir | Arayüz farklı yollarla kullanılabilmeli | Klavyeyle tüm menü ve formlara erişim |
| Anlaşılabilir | İçerik ve işleyiş açık ve öngörülebilir olmalı | Açık form hata mesajları, tutarlı menü |
| Sağlam | İçerik farklı tarayıcı ve yardımcı teknolojilerle çalışmalı | Doğru HTML yapısı, geçerli etiketler |
Her başarı ölçütü A, AA ya da AAA seviyesinde tanımlanır. Pek çok kurum ve düzenleme AA seviyesini hedef olarak kabul eder; bu seviye, işletme siteleri için de makul ve uygulanabilir bir hedeftir.
Web sitesi erişilebilirliği neden önemli?
- Daha geniş kitle: Erişilebilir bir site, görme ya da hareket kısıtlılığı olan kullanıcıların da ürün ve hizmetlerinize ulaşmasını sağlar.
- Daha iyi kullanıcı deneyimi: Okunaklı yazılar, net butonlar ve anlaşılır formlar herkes için dönüşümü kolaylaştırır.
- Arama motorlarıyla uyum: Anlamlı başlık yapısı, alt metinler ve açıklayıcı bağlantı metinleri, arama motorlarının içeriği anlamasına yardım eder. SEO temelleri için SEO nedir yazımıza göz atabilirsiniz.
- Uluslararası satış: Avrupa Birliği'nde Avrupa Erişilebilirlik Yasası kapsamındaki bazı dijital ürün ve hizmetler için erişilebilirlik gereklilikleri 2025'ten itibaren uygulanmaktadır. AB'ye satış yapan e-ticaret siteleri bu gereklilikleri değerlendirmelidir.
Erişilebilir web tasarımın temel adımları
1. Renk kontrastı
WCAG AA seviyesinde normal metin için metin ile arka plan arasında en az 4.5:1, büyük metin için en az 3:1 kontrast oranı önerilir. Açık gri yazılar ve pastel butonlar en sık rastlanan kontrast hatalarıdır. Ayrıca bilgi yalnızca renkle verilmemelidir; örneğin hatalı form alanı yalnızca kırmızıyla değil, bir metinle de belirtilmelidir.
2. Görsellerde alt metin
Bilgi taşıyan her görselin alt özelliğinde, görselin ne anlattığını kısa ve öz biçimde açıklayan bir metin bulunmalıdır. Yalnızca süs amaçlı görsellerde alt metin boş bırakılarak ekran okuyucunun bunları atlaması sağlanır.
3. Klavye ile gezinme
Menüler, açılır pencereler, kaydırıcılar ve formlar yalnızca klavyeyle (Tab, Enter, ok tuşları) kullanılabilmelidir. Odaklanılan öğe görünür bir çerçeveyle belirtilmeli; tasarım uğruna bu odak göstergesi kaldırılmamalıdır.
4. Anlamlı HTML yapısı
Sayfada tek bir ana başlık, ardından sıralı alt başlıklar kullanılmalıdır. Butonlar için button, bağlantılar için a etiketi tercih edilmeli; sayfanın dili lang özelliğiyle belirtilmelidir. Doğru HTML, ekran okuyucuların sayfayı anlamlı bölümlere ayırmasını sağlar.
5. Erişilebilir formlar
Her form alanının görünür bir etiketi olmalı, zorunlu alanlar açıkça belirtilmeli ve hata mesajları neyin yanlış olduğunu ve nasıl düzeltileceğini anlatmalıdır. Form güvenliği ve aydınlatma metni için KVKK uyumlu web sitesi yazımız yol gösterici olabilir.
6. Medya ve hareket
Videolarda altyazı, ses içeriklerinde metin karşılığı sunulmalıdır. Kendiliğinden oynayan sesler ve durdurulamayan animasyonlardan kaçınılmalı, yanıp sönen içerikler sınırlanmalıdır.
Hızlı erişilebilirlik kontrol listesi
- Sayfadaki tüm işlemleri fare kullanmadan, yalnızca klavyeyle yapabiliyor musunuz?
- Metin ve buton renkleri yeterli kontrasta sahip mi?
- Bilgi taşıyan tüm görsellerde açıklayıcı alt metin var mı?
- Bağlantı metinleri "buraya tıklayın" yerine gideceği sayfayı anlatıyor mu?
- Sayfa yakınlaştırıldığında (yüzde iki yüz) içerik bozulmadan okunabiliyor mu?
- Form alanlarının etiketleri ve hata mesajları açık mı?
- Mobilde dokunma alanları parmakla rahatça seçilebilecek büyüklükte mi?
Mobil kullanılabilirlik erişilebilirliğin önemli bir parçasıdır; bu konuyu mobil uyumlu web tasarım yazımızda ayrıca ele aldık.
Sık yapılan erişilebilirlik hataları
- Metin içeren görseller: Kampanya duyurularını ya da menüleri görsel içine gömülü metinle sunmak, ekran okuyucuların bu bilgiyi okuyamamasına ve arama motorlarının içeriği anlayamamasına yol açar.
- Yalnızca ikonlu butonlar: Arama, sepet ya da menü butonları yalnızca ikonla gösterildiğinde ekran okuyucu kullanıcıları butonun ne işe yaradığını bilemez. Görünmez bir etiket ya da
aria-labeleklenmelidir. - Odak çerçevesini kaldırmak: Tasarım daha temiz görünsün diye CSS ile odak göstergesini kaldırmak, klavye kullanıcılarının sayfada nerede olduklarını kaybetmesine neden olur.
- Otomatik kayan sliderlar: Durdurulamayan, hızlı değişen sliderlar hem okunmayı zorlaştırır hem de dikkat dağıtır.
- Yer tutucuyu etiket yerine kullanmak: Form alanında yalnızca silik bir yer tutucu metin bulunması, kullanıcı yazmaya başladığında alanın ne olduğunun unutulmasına yol açar.
- Açılır pencerelerde odak tuzağı: Klavyeyle kapatılamayan ya da odağı içinde hapsetmeyen açılır pencereler kullanıcıyı sayfada kilitleyebilir.
Bu hataların çoğu, tasarım ve geliştirme aşamasında küçük bir özenle önlenebilir. Sonradan düzeltmek ise genellikle daha fazla zaman alır.
Erişilebilirlik nasıl test edilir?
Otomatik denetim araçları kontrast, eksik alt metin ve etiketsiz form alanları gibi sorunları hızlıca tespit eder; ancak sorunların tamamını yakalayamaz. Bu nedenle otomatik taramayı mutlaka elle yapılan testlerle destekleyin: sayfayı klavyeyle baştan sona gezin, bir ekran okuyucuyla temel sayfaları dinleyin ve tarayıcıyı yakınlaştırarak düzenin bozulup bozulmadığını kontrol edin. Erişilebilirlik bir kerelik bir iş değil; yeni içerik eklendikçe sürdürülmesi gereken bir alışkanlıktır.
Kodifix ile birlikte planlayalım
Mevcut sitenizin erişilebilirlik durumunu birlikte inceleyip öncelikli iyileştirmeleri belirleyebilir, yeni projelerde erişilebilirliği tasarımın ilk gününden itibaren planlayabiliriz. Web tasarım yaklaşımımızı web sitesi hizmet sayfamızda bulabilirsiniz. 2010'dan beri Levent'teki ofisimizden İstanbul ve Türkiye genelindeki işletmelere web tasarım, SEO, e-ticaret ve özel yazılım hizmeti veriyoruz. Önceki çalışmalarımızı referanslar sayfamızda inceleyebilir, projeniz için iletişim sayfamızdan, +90 507 374 61 41 numaralı telefondan ya da info@kodifix.com adresinden bize ulaşabilirsiniz.
Sık Sorulan Sorular
WCAG nedir?
WCAG, W3C bünyesinde hazırlanan Web İçeriği Erişilebilirlik Yönergeleri'dir. Web içeriğinin engelli bireyler dahil herkes için erişilebilir olması için test edilebilir başarı ölçütleri tanımlar ve A, AA, AAA olmak üzere üç uygunluk seviyesi içerir.
Erişilebilirlik SEO'ya katkı sağlar mı?
Doğrudan bir sıralama sinyali olarak ele alınmasa da erişilebilirlik uygulamalarının birçoğu, örneğin anlamlı başlık yapısı, alt metinler ve açık bağlantı metinleri, arama motorlarının içeriği anlamasına ve kullanıcı deneyiminin iyileşmesine yardım eder.
Mevcut sitemi erişilebilir hâle getirebilir miyim?
Evet. Çoğu sitede kontrast, alt metin, form etiketleri ve klavye ile gezinme gibi düzeltmeler mevcut tasarım korunarak yapılabilir. Önce kapsamlı bir denetimle eksikler belirlenir, ardından öncelik sırasına göre iyileştirme yapılır.
Erişilebilirlik eklentileri yeterli mi?
Sayfaya eklenen hazır erişilebilirlik araç çubukları tek başına yeterli değildir. Asıl iyileştirme sitenin kodunda, içeriğinde ve tasarımında yapılmalıdır.
İstanbul’da projeniz için bize ulaşın: Levent’teki ofisimizde ya da online görüşmeyle ihtiyacınızı dinleyip size özel bir yol haritası hazırlayalım. İletişim sayfamızdan ya da +90 507 374 61 41 numaralı telefondan bize ulaşabilirsiniz.