Web Erişilebilirliği (WCAG): Herkes İçin Tasarım

Web Erişilebilirliği Nedir?

Web erişilebilirliği, web sitelerinin ve uygulamaların engelli bireyler dahil herkes tarafından kullanılabilir olmasını sağlayan tasarım ve geliştirme yaklaşımıdır. Dünya genelinde bir milyardan fazla insan bir tür engelle yaşamaktadır. Görme, işitme, motor ve bilişsel engeller, kullanıcıların dijital içeriklere erişimini ciddi şekilde kısıtlayabilir.

Erişilebilir bir web sitesi yalnızca engelli kullanıcılara değil, tüm kullanıcılara daha iyi bir deneyim sunar. Yaşlı bireyler, geçici engeli olanlar, yavaş internet bağlantısı kullananlar ve farklı cihazlardan erişen herkes erişilebilir tasarımdan faydalanır. Bu nedenle erişilebilirlik, modern web geliştirmenin temel taşlarından biridir.

WCAG Standartları ve İlkeleri

Web Content Accessibility Guidelines (WCAG), World Wide Web Consortium (W3C) tarafından geliştirilen ve web erişilebilirliği için uluslararası standart kabul edilen bir kılavuzdur. WCAG 2.1 ve güncel WCAG 2.2 sürümleri dört temel ilke üzerine inşa edilmiştir.

Algılanabilirlik (Perceivable)

Bilgi ve kullanıcı arayüzü bileşenleri, kullanıcıların algılayabileceği şekilde sunulmalıdır. Bu ilke kapsamında görseller için alternatif metin sağlanması, videolar için altyazı eklenmesi ve içeriğin farklı yollarla sunulabilmesi yer alır.

• Tüm görsellere anlamlı alt metin eklenmesi
• Video ve ses içerikleri için altyazı ve transkript sağlanması
• İçeriğin bilgi kaybı olmadan farklı şekillerde sunulabilmesi
• Ön plan ve arka plan arasında yeterli renk kontrastı

Çalıştırılabilirlik (Operable)

Kullanıcı arayüzü bileşenleri ve navigasyon çalıştırılabilir olmalıdır. Tüm işlevler yalnızca fare ile değil, klavye ile de erişilebilir olmalıdır.

• Tüm etkileşimli öğelerin klavye ile kullanılabilmesi
• Kullanıcılara içeriği okumak ve kullanmak için yeterli süre tanınması
• Nöbet tetikleyici içeriklerden kaçınılması
• Kullanıcıların içeriği bulmalarına ve konumlarını bilmelerine yardımcı olunması

Anlaşılabilirlik (Understandable)

Bilgi ve kullanıcı arayüzünün işleyişi anlaşılabilir olmalıdır. Metin okunabilir olmalı, sayfalar tahmin edilebilir şekilde çalışmalı ve kullanıcılara hata yapmalarını önlemede yardımcı olunmalıdır.

• Sayfa dilinin belirtilmesi
• Navigasyonun tutarlı olması
• Form hatalarının açıkça tanımlanması ve düzeltme önerilerinin sunulması
• Kısaltmaların ve teknik terimlerin açıklanması

Sağlamlık (Robust)

İçerik, yardımcı teknolojiler dahil çeşitli kullanıcı araçları tarafından güvenilir şekilde yorumlanabilecek kadar sağlam olmalıdır.

• Geçerli ve standartlara uygun HTML kullanılması
• Özel bileşenler için uygun ARIA rolleri ve özellikleri
• Farklı tarayıcı ve yardımcı teknolojilerle uyumluluk

WCAG Uyumluluk Seviyeleri

WCAG standartları üç uyumluluk seviyesi tanımlar. Her seviye bir öncekinin gereksinimlerini kapsar ve ek kriterler ekler.

1. Seviye A: En temel erişilebilirlik gereksinimleri. Bu seviyeyi karşılamayan siteler birçok kullanıcı için tamamen erişilemez olabilir.
2. Seviye AA: Çoğu yasal düzenlemenin ve en iyi uygulamaların hedeflediği seviye. Renk kontrastı oranları, metin boyutlandırma ve tutarlı navigasyon gibi kriterleri içerir.
3. Seviye AAA: En yüksek erişilebilirlik seviyesi. Tüm içerik için bu seviyeye ulaşmak genellikle mümkün olmasa da mümkün olan yerlerde hedeflenmelidir.

Çoğu kuruluş için WCAG 2.2 Seviye AA uyumluluğu, erişilebilirlik hedefi olarak önerilmektedir. Bu seviye, kullanıcı deneyimini önemli ölçüde iyileştirirken uygulanabilir bir hedef sunar.

ARIA Etiketleri ve Semantik HTML

Accessible Rich Internet Applications (ARIA), HTML öğelerine erişilebilirlik bilgisi ekleyen bir özelliktir. Ancak ARIA kullanmadan önce semantik HTML kullanmak her zaman tercih edilmelidir. Doğru HTML öğeleri zaten yerleşik erişilebilirlik bilgisi taşır.

Semantik HTML Kullanımı

Semantik HTML etiketleri, içeriğin anlamını ve yapısını yardımcı teknolojilere doğru şekilde iletir. Bir düğme için div yerine button etiketi kullanmak, ekran okuyucuların bu öğeyi doğru tanımlamasını sağlar.

• Navigasyon için nav etiketi kullanılması
• Ana içerik için main etiketi kullanılması
• Başlık hiyerarşisinin doğru şekilde oluşturulması (h1 ile h6 arası)
• Listeler için ul, ol ve li etiketlerinin kullanılması
• Formlar için label etiketlerinin ilgili input öğeleriyle ilişkilendirilmesi

ARIA Rolleri ve Özellikleri

Semantik HTML yeterli olmadığında ARIA devreye girer. Özel bileşenler, dinamik içerik güncellemeleri ve karmaşık arayüz desenleri için ARIA rolleri, durumları ve özellikleri kullanılır.

• aria-label: Görünür etiketi olmayan öğelere erişilebilir ad sağlar
• aria-describedby: Ek açıklama metniyle öğeyi ilişkilendirir
• aria-live: Dinamik olarak güncellenen içerikleri ekran okuyuculara bildirir
• aria-expanded: Açılır menü ve akordeon gibi öğelerin durumunu belirtir
• role: Öğenin işlevini tanımlar (tab, tabpanel, alert gibi)

ARIA kullanımında altın kural: Eğer yerel bir HTML öğesi veya özelliği ihtiyacınızı karşılıyorsa, ARIA kullanmayın. ARIA yanlış kullanıldığında erişilebilirliği iyileştirmek yerine bozabilir.

Klavye Navigasyonu

Birçok kullanıcı fare kullanma imkanına sahip değildir. Motor engelli bireyler, ekran okuyucu kullananlar ve ileri düzey kullanıcılar klavye navigasyonuna güvenir. Bu nedenle tüm etkileşimli öğelerin klavye ile erişilebilir olması zorunludur.

Temel Klavye Navigasyonu İlkeleri

• Tab tuşu ile tüm etkileşimli öğeler arasında gezinebilme
• Shift+Tab ile geriye doğru gezinebilme
• Enter ve Space tuşları ile öğeleri etkinleştirebilme
• Escape tuşu ile açılır pencereleri ve menüleri kapatabilme
• Ok tuşları ile menüler, sekmeler ve listeler içinde gezinebilme

Odak Yönetimi

Klavye odağının görünür olması ve mantıklı bir sıra izlemesi kritik öneme sahiptir. Odak göstergesi gizlenmemeli, özel bileşenlerde odak tuzaklarından kaçınılmalıdır. Modal pencereler açıldığında odak modal içine taşınmalı ve modal kapatıldığında tetikleyici öğeye geri dönmelidir.

Renk Kontrastı ve Görsel Tasarım

Renk kontrastı, düşük görme keskinliğine sahip kullanıcılar ve renk körlüğü olan bireyler için hayati önem taşır. WCAG 2.2, metin ve arka plan arasında belirli kontrast oranları gerektirir.

• Normal metin için en az 4.5:1 kontrast oranı (AA seviyesi)
• Büyük metin (18pt veya 14pt kalın) için en az 3:1 kontrast oranı
• Grafik öğeler ve kullanıcı arayüzü bileşenleri için en az 3:1 kontrast oranı
• Bilgiyi yalnızca renkle iletmekten kaçınma; ek göstergeler (simge, metin, desen) kullanma

Renk kontrastı kontrol araçları arasında WebAIM Contrast Checker, Chrome DevTools renk seçici ve Colour Contrast Analyser gibi araçlar yer almaktadır.

Form Erişilebilirliği

Formlar web uygulamalarının en kritik etkileşim noktalarından biridir. Erişilebilir formlar tasarlamak, tüm kullanıcıların bilgi gönderebilmesini ve işlem yapabilmesini sağlar.

• Her form alanı için açıklayıcı bir label öğesi kullanma
• Zorunlu alanları hem görsel hem de programatik olarak belirtme
• Hata mesajlarını açık ve anlaşılır şekilde sunma
• Hata mesajlarını ilgili form alanıyla ilişkilendirme
• Form gönderiminden önce kullanıcıya bilgilerini gözden geçirme imkanı sunma
• Otomatik tamamlama özelliklerini uygun şekilde yapılandırma

Erişilebilirlik Test Araçları

Erişilebilirlik testleri otomatik ve manuel yöntemlerin birleşimini gerektirir. Otomatik araçlar sorunların yaklaşık yüzde otuzunu tespit edebilirken, manuel testler gerçek kullanıcı deneyimini değerlendirmek için vazgeçilmezdir.

Otomatik Test Araçları

• axe DevTools: Tarayıcı uzantısı olarak çalışan kapsamlı erişilebilirlik test aracı
• Lighthouse: Chrome DevTools içinde yerleşik olarak gelen performans ve erişilebilirlik denetim aracı
• WAVE: Web sayfalarını görsel olarak değerlendiren erişilebilirlik aracı
• Pa11y: Komut satırından çalışan ve CI/CD süreçlerine entegre edilebilen otomasyon aracı

Manuel Test Yöntemleri

• Tüm sayfada yalnızca klavye kullanarak gezinme testi
• Ekran okuyucu ile sayfa içeriğini dinleme (NVDA, JAWS, VoiceOver)
• Tarayıcı yakınlaştırmasını yüzde iki yüze çıkararak düzenin bozulup bozulmadığını kontrol etme
• Renk filtresi simülatörleri ile renk körlüğü testleri
• Engelli kullanıcılarla gerçek kullanıcı testleri yapma

Erişilebilirlik Geliştirme Süreci

Erişilebilirlik, projenin sonunda eklenen bir özellik değil, baştan sona tüm geliştirme sürecine entegre edilmesi gereken bir yaklaşımdır.

1. Tasarım aşaması: Renk kontrastı, yazı tipi boyutu ve düzen kararlarında erişilebilirliği göz önünde bulundurma
2. Geliştirme aşaması: Semantik HTML kullanma, ARIA özelliklerini doğru uygulama ve klavye desteği sağlama
3. Test aşaması: Otomatik araçlarla tarama yapma ve manuel testler gerçekleştirme
4. Bakım aşaması: Her güncelleme sonrasında erişilebilirlik testlerini tekrarlama ve regresyonları önleme

Yasal Düzenlemeler ve Uyumluluk

Birçok ülkede web erişilebilirliği yasal bir gerekliliktir. Avrupa Birliği Erişilebilirlik Direktifi, ABD'deki ADA ve Section 508, Türkiye'deki Bilgi Toplumu gereklilikleri gibi düzenlemeler kuruluşları web erişilebilirliğine uyum sağlamaya yönlendirmektedir.

Yasal uyumluluk dışında erişilebilirlik, daha geniş bir kitleye ulaşma, SEO avantajı ve marka itibarı gibi iş değeri de sunar. Erişilebilir web siteleri genellikle daha iyi yapılandırılmış olduğundan arama motorları tarafından daha kolay dizinlenir.

Sonuç

Web erişilebilirliği yalnızca teknik bir gereklilik değil, dijital eşitliğin temel bir parçasıdır. WCAG standartlarına uyum sağlamak, semantik HTML ve ARIA etiketlerini doğru kullanmak, klavye navigasyonunu desteklemek ve düzenli testler yapmak erişilebilir bir web deneyimi oluşturmanın temel adımlarıdır. Erişilebilirliği geliştirme sürecinin başından itibaren benimsemek, hem kullanıcılar hem de işletmeler için uzun vadeli değer yaratır. Herkes için tasarlamak, herkes için daha iyi bir web demektir.