Erişilebilir web tasarımı, sitenizin görme, işitme, hareket ya da bilişsel farklılıkları olan kişiler dâhil herkes tarafından rahatça kullanılabilmesini sağlar. Erişilebilirlik için yapılan her iyileştirme, sitenizi tüm ziyaretçiler için daha anlaşılır, daha kullanışlı ve daha güvenilir hâle getirir.
Erişilebilirlik çoğu zaman yalnızca engelli kullanıcıları ilgilendiren ve projenin sonunda eklenen teknik bir ayrıntı olarak görülür. Oysa iyi kurgulanmış bir site; gözlüğünü evde unutan, güneş altında telefondan bakan, kolu alçıda olduğu için yalnızca klavye kullanabilen ya da videoyu sessiz izlemek zorunda kalan herkesin işini kolaylaştırır.
Bu kullanıcıların kimi siteyi, sayfadaki metni sesli okuyan ekran okuyucu yazılımlarla gezer; kimi yalnızca klavyeyle, kimi de ekranı yakınlaştırarak kullanır. İyi bir tasarım bunların hepsine açık olmalıdır.
WCAG: erişilebilirliğin ortak dili
Web erişilebilirliğinde dünyada referans alınan kaynak, W3C'nin (World Wide Web Consortium) yayımladığı Web İçeriği Erişilebilirlik Yönergeleri, kısa adıyla WCAG'dir. Yönergeler dört temel ilkeye dayanır: İçerik algılanabilir, arayüz işletilebilir, bilgi anlaşılabilir ve kod farklı tarayıcılarla yardımcı teknolojilerde sorunsuz çalışacak kadar sağlam olmalıdır.
Her başarı ölçütü A, AA ve AAA olmak üzere üç düzeyde tanımlanır; kurumsal siteler için genel kabul gören hedef AA düzeyidir. Ekim 2023'te yayımlanan güncel sürüm WCAG 2.2, dokunma hedeflerinin boyutu ve klavye odağının başka öğelerin altında kalmaması gibi konularda yeni ölçütler ekledi. Ayrıntılara W3C'nin WCAG sayfasından ulaşabilirsiniz.
Tasarım aşamasında dikkat edilecekler
- Renk kontrastı: AA düzeyi için normal metinlerde en az 4,5:1, büyük metinlerde en az 3:1 kontrast oranı hedefleyin.
- Rengi tek başına kullanmamak: Bir form hatasını yalnızca kırmızı çerçeveyle göstermek, renkleri ayırt etmekte zorlanan bir kullanıcı için anlamsızdır; renge ek olarak bir simge ya da açıklayıcı metin kullanın.
- Okunabilir tipografi: Metin, sayfa düzeni bozulmadan %200'e kadar büyütülebilmeli; satır aralıkları rahat okumaya izin vermelidir.
- Görünür odak: Klavyeyle gezinen kullanıcının nerede olduğunu görebilmesi için bağlantı ve düğmelerde belirgin bir odak çerçevesi tasarlayın; görüntüyü bozuyor diye bu çerçeveyi kaldırmayın.
- Yeterli dokunma alanı: Mobilde düğme ve bağlantılar parmakla rahatça seçilebilmeli. WCAG 2.2, AA düzeyinde bazı istisnalarla en az 24×24 CSS piksellik bir hedef boyutu tanımlıyor; daha büyüğü her zaman daha rahattır.
- Kontrol edilebilir hareket: Kendiliğinden kayan slaytlar ve animasyonlar durdurulabilmeli; işletim sisteminde hareketi azaltma tercihini açmış kullanıcıların bu tercihine saygı gösterilmelidir.
Kodlama aşamasında dikkat edilecekler
- Anlamlı HTML: Başlıklar başlık etiketiyle, düğmeler düğme olarak kodlanmalı. Ekran okuyucu kullanıcıları sayfayı çoğu zaman başlıklar arasında atlayarak tarar; düzenli bir başlık hiyerarşisi onlar için bir içindekiler tablosudur.
- Alternatif metin: Bilgi taşıyan her görselin ne anlattığını kısa bir alternatif metinle açıklayın. Yalnızca süs amaçlı görsellerde bu alanı boş bırakın ki ekran okuyucu gereksiz yere okumasın.
- Form etiketleri: Her form alanının görünür ve kodda alanla ilişkilendirilmiş bir etiketi olmalı; alanın içindeki silik örnek metin etiket yerine geçmez. Hata mesajları neyin yanlış olduğunu ve nasıl düzeltileceğini açıkça söylemelidir.
- Klavye erişimi: Menüler, açılır pencereler, sekmeler ve kaydırıcılar fareye dokunmadan, yalnızca Tab, Enter ve ok tuşlarıyla kullanılabilmeli; açılan bir pencereden Esc tuşuyla çıkılabilmelidir.
- Dil, altyazı ve döküm: Sayfanın dili kodda doğru belirtilmeli ki ekran okuyucu metni doğru telaffuzla okusun. Videolarda altyazı, ses kayıtlarında metin dökümü sunun; bu içerikler arama motorlarının da işine yarar.
- ARIA'yı ölçülü kullanın: ARIA özellikleri, standart HTML'in yetmediği karmaşık bileşenlerde yardımcı teknolojilere ek bilgi verir; yanlış kullanıldığında ise yarardan çok zarar getirir. Önce doğru HTML öğesini seçin.
Sitenizi nasıl test edersiniz?
Lighthouse, WAVE ya da axe gibi otomatik araçlar düşük kontrast ve eksik alternatif metin gibi sorunları hızla yakalar; ancak bir alternatif metnin görseli doğru anlatıp anlatmadığını değerlendiremez. Otomatik taramayı mutlaka elle yapılan kontrollerle tamamlayın.
- Klavye testi: Fareyi bir kenara bırakın ve sitenizi yalnızca klavyeyle gezin. Her bağlantıya ulaşabiliyor, odağın nerede olduğunu görebiliyor ve formu gönderebiliyor musunuz?
- Ekran okuyucu testi: Windows için ücretsiz NVDA'yı, Mac ve iPhone'larda yerleşik VoiceOver'ı, Android cihazlarda TalkBack'i deneyin.
- Yakınlaştırma testi: Tarayıcıda sayfayı %200 büyütün; içerik üst üste biniyor ya da yatay kaydırma gerekiyorsa düzeni gözden geçirin.
- Gerçek kullanıcı geri bildirimi: Mümkünse yardımcı teknoloji kullanan kişilerin sitenizi denemesini sağlayın; hiçbir araç onların deneyiminin yerini tutmaz.
Yasal boyut ve iş değeri
Erişilebilirlik pek çok ülkede yasal bir gereklilik hâline geliyor. Avrupa Birliği'nin Avrupa Erişilebilirlik Yasası (European Accessibility Act), Haziran 2025'ten itibaren e-ticaret dâhil birçok dijital ürün ve hizmet için erişilebilirlik şartları getiriyor. AB'deki tüketicilere satış yapan ya da hizmet veren işletmelerin durumlarını şimdiden değerlendirmesinde fayda var; kapsam ve istisnalar için hukuk danışmanınızdan görüş almanızı öneririz.
Yasal yükümlülüğün ötesinde erişilebilir bir site daha geniş bir kitleye ulaşır ve markanızın kapsayıcı duruşunu gösterir. Başlık hiyerarşisi, alternatif metin ve anlamlı bağlantı metinleri gibi pek çok erişilebilirlik uygulaması, SEO (arama motoru optimizasyonu) açısından doğru kabul edilen uygulamalarla da örtüşür.
Erişilebilirliği projenin başına koyun
Erişilebilirliği yayındaki bir siteye sonradan eklemek mümkündür ama zahmetlidir; tasarımın ve kodun ilk gününden itibaren düşünmek hem daha kolay hem de daha ekonomiktir. Yeni bir projeye başlarken renk paletinden form yapısına kadar her kararı bu gözle değerlendirmeye özen gösteriyoruz. Yeni bir site planlıyorsanız ya da mevcut sitenizin bu açıdan nerede durduğunu merak ediyorsanız iletişim sayfamızdan bize ulaşın; birlikte gözden geçirelim.
