Icon of a person inside a circle with a checkmark badge, representing accessible and WCAG-compliant website design
Icon of a person inside a circle with a checkmark badge, representing accessible and WCAG-compliant website design

Web Sitesi Erişilebilirliği (WCAG) Rehberi: Erişilebilir Tasarım Neden İyi Bir İş Kararıdır?

Web erişilebilirliği, yetenekleri ne olursa olsun herkesin kullanabileceği siteler kurmak demektir. Bu rehberde WCAG ilkelerini ve erişilebilirliği iyi bir iş kararına dönüştüren pratik adımları anlatıyoruz.

Burak Kumaş

Web Sitesi Erişilebilirliği (WCAG) Rehberi: Erişilebilir Tasarım Neden İyi Bir İş Kararıdır?

Web erişilebilirliği, yetenekleri ne olursa olsun herkesin kullanabileceği siteler kurmak demektir. Bu rehberde WCAG ilkelerini ve erişilebilirliği iyi bir iş kararına dönüştüren pratik adımları anlatıyoruz.

Burak Kumaş

Erişilebilir web siteleri herkes için daha iyi çalışır.

Web Erişilebilirliği Nedir, Neden Önemlidir?

Web erişilebilirliği; görme, işitme, motor veya bilişsel engeli olan insanların da web sitelerini algılayabilmesi, sitede gezinebilmesi ve siteyle etkileşim kurabilmesi için tasarım ve geliştirme yapma pratiğidir. W3C tarafından yayımlanan Web İçeriği Erişilebilirlik Yönergeleri (WCAG), erişilebilir bir web sitesinin pratikte nasıl görünmesi gerektiğini tanımlayan, uluslararası kabul görmüş standarttır.

Dünya nüfusunun önemli bir bölümü bir tür engelle yaşıyor. Üstelik çok daha fazla insan geçici ya da duruma bağlı kısıtlamalar yaşıyor: kırık bir kol, güneş altında parlayan bir ekran veya sesin hiçbir işe yaramadığı gürültülü bir ortam gibi. Erişilebilirliği görmezden gelen bir web sitesi, gerçek ziyaretçileri ve gerçek müşterileri sessizce kapıdan çeviriyor demektir. Erişilebilirliği benimseyen bir site ise herkes için daha kolay kullanılır hale gelir. Erişilebilir tasarımın yalnızca bir uyumluluk maddesi değil, gerçek bir iş avantajı olmasının nedeni de tam olarak budur.

Dört WCAG İlkesi: POUR

WCAG, gereksinimlerini genellikle POUR kısaltmasıyla anılan dört ilke etrafında düzenler. Her erişilebilirlik yönergesi bu ilkelerden birine dayanır.

Algılanabilir (Perceivable)

Bilgi, kullanıcıların algılayabileceği biçimlerde sunulabilmelidir. Görsellerin metin alternatifine, videoların altyazıya ihtiyacı vardır; içerik asla tek bir duyuya bel bağlamamalıdır. Örneğin bir hatayı yalnızca renkle işaretlemek, o rengi ayırt edemeyen kullanıcıları dışarıda bırakır.

Kullanılabilir (Operable)

Kullanıcılar arayüzü kullanabilmelidir. Bağlantılar, düğmeler, menüler ve formlar dahil her etkileşimli öğe yalnızca fare veya dokunmatik ekranla değil, tek başına klavyeyle de çalışmalıdır. Kullanıcılara işlemlerini tamamlamaları için yeterli süre tanınmalı ve sayfadaki hiçbir öğe, yanıp sönen içerikle nöbet tetiklememelidir.

Anlaşılabilir (Understandable)

İçerik ve kontroller anlaşılır olmalıdır. Bu; okunabilir bir dil, sayfalar arasında tutarlı davranan öngörülebilir bir gezinme yapısı ve kullanıcıdan ne beklendiğini açıkça anlatıp hata yapıldığında toparlanmaya yardımcı olan formlar anlamına gelir.

Sağlam (Robust)

İçerik; tarayıcılar, cihazlar ve ekran okuyucular gibi yardımcı teknolojilerde güvenilir biçimde çalışacak kadar sağlam olmalıdır. Pratikte bu, temiz ve semantik HTML demektir: etkileşimli görünmesi için stillendirilmiş jenerik kutular yerine gerçek başlıklar, listeler, düğmeler ve sayfa bölgeleri kullanmak gerekir.

Pratikte Erişilebilirliğin Temelleri

Renk Kontrastı

Metnin okunabilmesi için arka planıyla arasında yeterli kontrast olması gerekir. WCAG bunun için asgari kontrast oranları tanımlar: AA seviyesinde normal metin için genellikle 4.5:1, büyük metin için 3:1. Beyaz üzerine soluk gri tipografi taslakta şık durabilir; ama az gören kullanıcılar için işlevsizdir, loş veya parlamalı bir ekranda ise herkesi yorar. Ücretsiz kontrast kontrol araçları sayesinde bu, tasarım aşamasında en erken yakalanabilecek sorunlardan biridir.

Klavye ile Gezinme

Birçok kullanıcı, motor kısıtlamalar nedeniyle ya da sadece tercih ettiği için sitede tamamen klavyeyle gezinir. Sitenizi Tab tuşuyla sayfada ilerleyerek test edin: her bağlantıya, düğmeye ve form alanına mantıklı bir sırayla ulaşılabilmeli, görünür bir odak göstergesi de nerede olduğunuzu her an göstermelidir. Klavye erişiminin en sık koptuğu yerler açılır menüler, modallar ve carousel bileşenleridir; bunların fare olmadan da açılabildiğinden, kullanılabildiğinden ve kapatılabildiğinden emin olun.

Görseller için Alt Metin

Alternatif metin, bir görseli göremeyen kullanıcılar için tarif eder; ekran okuyucular görselin yerine bu metni seslendirir. İyi bir alt metin kısadır ve görselin yalnızca neye benzediğini değil, ne işe yaradığını anlatır. Bilgi taşımayan dekoratif görsellerin alt özniteliği boş bırakılmalıdır ki yardımcı teknolojiler onları atlayabilsin. Üstelik açıklayıcı alt metinler, arama motorlarının görsel içeriğinizi anlamasına da yardımcı olur.

Form Etiketleri ve Hata Mesajları

Her form alanının doğru şekilde ilişkilendirilmiş bir etikete ihtiyacı vardır. Tek başına placeholder metni yeterli değildir; kullanıcı yazmaya başlar başlamaz kaybolur ve ekran okuyucular tarafından çoğu zaman atlanır. Zorunlu alanlar açıkça işaretlenmeli, hata mesajları ise neyin yanlış gittiğini ve nasıl düzeltileceğini somut biçimde söylemeli, ilgili alanın hemen yanında yer almalıdır. Erişilebilir formlar tüm kullanıcılarda daha iyi dönüşüm sağlar; bu da onu bir web sitesinde yapılabilecek en yüksek etkili iyileştirmelerden biri yapar.

Ekran Okuyucu Uyumluluğu

Ekran okuyucular, bir sayfayı anlamlandırmak için HTML yapınıza güvenir. Mantıklı bir başlık hiyerarşisi; gezinme ve ana içerik gibi semantik sayfa bölgeleri; açıklayıcı bağlantı metinleri ("buraya tıklayın" ifadesinden kaçının) ve native HTML'in yetersiz kaldığı yerlerde doğru kullanılan ARIA öznitelikleri, ekran okuyucu kullanıcılarının sitenizde verimli hareket etmesini sağlar. Altın kural şudur: önce native HTML öğelerini kullanın, ARIA'yı yalnızca gerektiğinde ekleyin.

Erişilebilirlik, SEO ve Kullanılabilirlik İçin de İyidir

Erişilebilirlik ile SEO aynı temele dayanır. Arama motoru tarayıcıları da tıpkı ekran okuyucular gibi semantik yapıya ihtiyaç duyar: net başlıklar, alt metinler, açıklayıcı bağlantılar ve hızlı, düzgün kurulmuş sayfalar. Erişilebilirliği iyileştirmek, neredeyse her zaman arama motorlarının içeriğinizi anlamasını ve dizine eklemesini de kolaylaştırır.

Kullanılabilirlik kazanımları ise her ziyaretçiye dokunur. Yüksek kontrast, dışarıda telefonundan okuyanların işini kolaylaştırır. Altyazılar, sessiz bir ofiste video izleyenlere yardımcı olur. Net form etiketleri ve hata mesajları, herkes için terk oranını düşürür. Erişilebilir tasarım kararları, iyi UI/UX tasarımının temel ilkeleriyle sürekli örtüşür; erişilebilirliği ciddiye alan ekiplerin genel olarak daha iyi ürünler çıkarmasının nedeni de budur.

Hukuki ve Uyumluluk Boyutu

Dünya genelinde dijital ürünlerin erişilebilir olmasını zorunlu kılan mevzuat giderek genişliyor ve bu yasaların çoğunun referans aldığı teknik ölçüt WCAG. Erişilebilirliği göz ardı eden işletmeler giderek daha sık hukuki şikayetlerle, düzeltme maliyetleriyle ve itibar kaybıyla karşılaşıyor. Baştan erişilebilir kuran işletmeler ise erişilemez bir siteyi sonradan elden geçirmenin çok daha yüksek maliyetinden kurtuluyor. WCAG uyumunu sonradan akla gelen bir detay olarak değil, temel bir gereksinim olarak ele almak, en basit haliyle akıllıca bir risk yönetimidir.

Nereden Başlamalı?

İşe bir denetimle başlayın: Lighthouse veya axe gibi otomatik araçlar, eksik alt metin ve düşük kontrast gibi yaygın sorunları işaretleyebilir; ancak sorunların yalnızca bir kısmını yakalarlar. Bunları manuel testlerle birleştirin: sitenizde klavyeyle gezinin, bir ekran okuyucuyla deneyin, formlarınızı ve hata durumlarınızı gözden geçirin. Düzeltmeleri etkiye göre önceliklendirin; en büyük kazanımı genellikle önce kontrast, klavye erişimi, alt metinler ve form etiketleri sağlar.

En etkili yaklaşım ise erişilebilirliği ilk günden işin içine katmaktır. Erişilebilirlik tasarım sisteminin, bileşen kütüphanesinin ve geliştirme akışının bir parçası olduğunda neredeyse hiçbir ek maliyet getirmez; sitenin doğal yapım şekli haline gelir. Yeni bir site ya da yeniden tasarım planlıyorsanız, web tasarım ve geliştirme ekibimiz WCAG bilinciyle sıfırdan web siteleri kurar. Böylece erişilebilirlik, kullanılabilirlik ve arama performansı sonradan yamanmak yerine baştan birlikte çalışır.

Erişilebilir tasarım yaratıcılığı kısıtlamaz; aksine, iyi işçiliğin göstergesidir. Herkes için kurulan web siteleri daha çok insana ulaşır, daha iyi sıralanır, daha iyi dönüşüm sağlar ve hukuken çok daha sağlam bir zeminde durur. Erişilebilirliği iyi bir iş kararı yapan da tam olarak budur.

Bağlantıda kalarak devam edelim.

Yüksek performanslı web tasarımı hakkında daha fazlasını keşfedin. Bizi Twitter ve Instagram’da takip edin.