Web Sitesi Erişilebilirliği Nedir? WCAG İlkelerine Göre Tasarım Kontrol Listesi
Web sitesinin erişilebilir olması, farklı yeteneklere ve kullanım koşullarına sahip kişilerin sayfaları anlayabilmesi ve işlemlerini tamamlayabilmesi demektir. Erişilebilirlik yalnızca görme veya işitme engeli bulunan ziyaretçiler için düşünülmemelidir. Klavye kullananlar, geçici bir sakatlık yaşayanlar, küçük ekran veya düşük bağlantı üzerinden siteye girenler de tasarım kararlarından etkilenir. Bu nedenle erişilebilirlik, web tasarımının sonradan eklenen bir ayrıntısı değil, en baştan dikkate alınması gereken bir kalite ölçütüdür.
WCAG nedir ve neden kullanılır?
WCAG, W3C tarafından yayımlanan Web Content Accessibility Guidelines yani Web İçeriği Erişilebilirlik Rehberi’dir. Web sayfaları ve dijital içeriklerin daha erişilebilir hazırlanması için test edilebilir başarı ölçütleri sunar. WCAG 2.2, önceki 2.x sürümlerindeki ölçütleri koruyup yeni ölçütler ekleyen güncel sürümlerden biridir. W3C standardı dört ana ilke etrafında toplar: algılanabilir, kullanılabilir, anlaşılabilir ve sağlam olmak. Resmî kaynak için WCAG 2.2 standardına ve W3C WCAG genel açıklamasına bakılabilir.
1. Algılanabilir içerik hazırlayın
İçerik, ziyaretçinin kullandığı duyusal kanallardan en az biriyle algılanabilir olmalıdır. Görsel bilgiye alternatif metin eklemek, video içeriğinde altyazı sağlamak ve renkleri tek başına anlam taşıyan unsur olarak kullanmamak bu ilkenin temel örnekleridir.
- Görseller: İçeriğe katkı sağlayan görselleri açıklayan alternatif metinler kullanın. Süs amaçlı görselleri ekran okuyucuların gereksiz yere okumasını önleyecek şekilde işaretleyin.
- Renk ve kontrast: Metin ile arka plan arasında yeterli kontrast sağlayın. Hata veya başarı durumunu yalnızca kırmızı ve yeşil renkle anlatmayın; simge veya metin etiketi de ekleyin.
- Video ve ses: Konuşmaları altyazıyla, önemli sesli bilgileri metin karşılığıyla destekleyin. Video içeriğinin anlamı yalnızca görsel hareketle aktarılıyorsa açıklayıcı metin veya sesli betimleme ihtiyacını değerlendirin.
- Yakınlaştırma: Kullanıcı metni büyüttüğünde içerik kaybolmamalı, yatay kaydırma zorunluluğu temel metni okumayı engellememelidir.
2. Klavye ile kullanılabilir bir arayüz oluşturun
Her ziyaretçi fare veya dokunmatik ekran kullanamayabilir. Menü, bağlantı, form, açılır pencere ve diğer etkileşimli alanlar klavyeyle erişilebilir olmalıdır. Klavyede Tab ve Shift+Tab ile sayfa boyunca mantıklı sırada ilerlenebilmeli; Enter veya Space gibi uygun tuşlarla kontrol çalıştırılabilmelidir.
Odak göstergesini (focus) tasarım uğruna kaldırmayın. Kullanıcı hangi öğede olduğunu kolayca görebilmelidir. Açılan bir modal pencerede odak yönetimi doğru yapılmalı, pencere kapatıldığında odak anlamlı bir noktaya dönmelidir. WCAG 2.2, odaklanan öğenin sabit başlık veya benzeri içeriklerin arkasında tamamen kapanmaması gibi konuları da kapsar.
3. İçeriği ve işlemleri anlaşılır kılın
Sayfa başlıkları açık olmalı, içerik başlık seviyeleri mantıklı sırayla kullanılmalıdır. Bir başlığı yalnızca daha büyük görünmesi için seçmek yerine semantik HTML başlık etiketlerini tercih edin. Bağlantı metni “buraya tıklayın” gibi bağlamdan kopuk ifadeler yerine, bağlantının nereye gittiğini açıklamalıdır.
Formlarda alan etiketlerini görünür tutun. Yer tutucu metin (placeholder), form etiketi yerine geçmemelidir. Zorunlu alanları belirtin, beklenen veri biçimini açıklayın ve hata mesajında sorunun nasıl düzeltileceğini söyleyin. Kullanıcı bir formu yanlış doldurduğunda yalnızca alanı kırmızı yapmak yerine metinle açıklama verin.
4. Sağlam ve uyumlu teknik altyapı kullanın
Semantik HTML kullanmak, erişilebilirliğin teknik temelini güçlendirir. Gerçek bir bağlantı için a, işlem başlatan kontrol için button kullanın. Tıklanabilir div öğeleri üretmek, klavye davranışlarını ve ekran okuyucu yorumunu ayrıca geliştirmeyi gerektirir. Form alanlarının etiketleri, hata açıklamaları ve durum değişiklikleri programatik olarak ilişkilendirilmelidir.
Özel arayüz bileşenleri geliştiriyorsanız ARIA özniteliklerini doğru ve gerektiği kadar kullanın. ARIA, hatalı HTML kullanımını otomatik olarak düzeltmez. Önce yerel HTML öğesinin sunduğu davranışlardan yararlanın; özel bileşen için ek erişilebilirlik gereksinimi varsa WAI-ARIA örüntülerini uygulayın.
Web sitesi için pratik erişilebilirlik kontrol listesi
- Sayfadaki tüm işlevleri yalnızca klavye ile kullanmayı deneyin.
- Odak göstergesinin açıkça görüldüğünü ve ekranda kapanmadığını doğrulayın.
- Görsellere amacına uygun alternatif metin ekleyin.
- Başlık seviyelerini hiyerarşik kullanın; sayfa başına açık bir ana başlık belirleyin.
- Form alanlarına görünür etiket, talimat ve anlaşılır hata mesajı ekleyin.
- Metin ve arka plan kontrastını otomatik araçlarla ölçün; kritik alanları manuel kontrol edin.
- Sayfayı ekran okuyucuyla ve mobil yakınlaştırmayla test edin.
- Video ve ses içerikleri için uygun metin alternatifleri sağlayın.
- Menü, açılır pencere, sekme ve özel bileşenleri gerçek kullanım senaryolarında sınayın.
Otomatik test araçları tek başına yeterli midir?
Otomatik erişilebilirlik tarayıcıları kontrast, eksik etiket veya bazı HTML sorunlarını hızlıca bulabilir. Ancak bir görselin alternatif metninin gerçekten anlamlı olup olmadığını, klavye sırasının mantıklı ilerleyip ilerlemediğini veya hata mesajının kullanıcıya yeterli bilgi verip vermediğini her zaman anlayamaz. Bu nedenle otomatik tarama, manuel test ve gerçek kullanıcı senaryoları birlikte kullanılmalıdır.
Erişilebilirlik iyileştirmeleri diğer kalite başlıklarıyla da ilişkilidir. Daha anlaşılır sayfa yapısı ve doğru semantik etiketler bakım ve geliştirme süreçlerini kolaylaştırabilir. Mobil kullanılabilirlik ve hız için Core Web Vitals rehberimizi, kurumsal sayfa yapısı için de kurumsal web sitesi tasarımı yazımızı inceleyebilirsiniz.
Sonuç
Erişilebilir web tasarımı, ziyaretçilerin içeriğe ulaşmasını ve formları, menüleri veya diğer işlevleri bağımsız biçimde kullanmasını kolaylaştırır. WCAG 2.2 kontrol listesi başlangıç için iyi bir çerçeve sunar; ancak tek bir otomatik test veya eklentiyle tam uyumluluk sağlandığı varsayılmamalıdır. Tasarım, içerik ve yazılım ekipleri erişilebilirliği tüm geliştirme sürecine dahil etmeli, değişikliklerden sonra düzenli test yapmalıdır. Yasal yükümlülüklerin kapsamı ülke, sektör ve hizmet türüne göre ayrıca değerlendirilmelidir.
