Erişilebilirlik (a11y) Rehberi: WCAG'ı Günlük Tasarım Kararlarına Dönüştürmek

Erişilebilirlik çoğu ekipte projenin sonuna bırakılan bir denetim maddesine indirgenir. Oysa erişilebilirlik (a11y), engelli kullanıcıların yanı sıra parlak güneşte telefon kullanan, tek eliyle gezinen ya da yaşlı gözlerle okuyan herkesin deneyimini iyileştirir. Bu yazıda WCAG standartlarını soyut kurallar olmaktan çıkarıp somut tasarım kararlarına nasıl çevireceğinizi anlatıyoruz.

Renk Kontrastı ve Okunabilirlik

Metin ile arka plan arasındaki kontrast oranı, en sık ihlal edilen kuraldır. WCAG AA seviyesi, normal metin için en az 4.5:1, büyük metin için 3:1 kontrast ister. Açık gri üzerine daha açık gri gibi "şık" görünen kombinasyonlar, kullanıcıların önemli bir kısmı için okunamaz.

• Rengi tek başına anlam taşıyıcı olarak kullanmayın; hata durumunu yalnızca kırmızıyla değil, ikon ve metinle de belirtin.
• Kontrastı tasarım aşamasında, teslimden sonra değil, kontrol edin.

Klavye Navigasyonu ve Odak Yönetimi

Birçok kullanıcı fareyi hiç kullanmaz. Tüm etkileşimli öğeler yalnızca klavye ile erişilebilir olmalıdır. Tab sırası mantıklı ve öngörülebilir olmalı, görünür bir odak halkası (focus ring) her zaman bulunmalıdır.

Modal açıldığında odağı içine hapsedin (focus trap), kapandığında tetikleyen öğeye geri döndürün. Odak halkasını estetik kaygıyla kaldırmak, klavye kullanıcısını kaybolmuş bir imleçle baş başa bırakır.

Anlamsal HTML ve Ekran Okuyucular

Ekran okuyucular arayüzü görsel değil yapısal olarak okur. Anlamsal HTML kullanmak, doğru bir başlık hiyerarşisi (h1-h2-h3) ve gerçek buton/liste etiketleri, erişilebilirliğin temelidir. Bir div'i butona benzetmek yerine gerçek button öğesi kullanın.

Görsel olmayan bağlam için ARIA niteliklerini yalnızca gerektiğinde ekleyin; yanlış ARIA, hiç ARIA olmamasından kötüdür. Kural: "Önce doğru HTML, sonra gerekirse ARIA."

Form Tasarımında Erişilebilirlik

Formlar erişilebilirliğin en kritik alanıdır. Her giriş alanının kalıcı bir label etiketi olmalı, sadece placeholder ile yetinilmemelidir. Hata mesajları alanla programatik olarak ilişkilendirilmeli ve ne yapılması gerektiğini net anlatmalıdır.

• Zorunlu alanları yalnızca yıldızla değil, metinle de belirtin.
• Dokunma hedeflerini en az 44x44 piksel yapın.

Hareket, Animasyon ve Hassasiyet

Bazı kullanıcılar için ani hareketler baş dönmesi ve rahatsızlık yaratır. prefers-reduced-motion ayarını dinleyerek animasyonları azaltın. Otomatik oynayan videolar ve kayan içerikler için durdurma kontrolü sunun. Titreşen ya da hızlı yanıp sönen efektlerden kaçının; bunlar nöbet tetikleyebilir.

Erişilebilirliği Sürece Gömmek

Erişilebilirlik bir kişinin sorumluluğu olarak kaldığında sürdürülemez. Tasarım sistemine erişilebilir bileşenler gömün, tasarım incelemelerine a11y kontrol listesi ekleyin ve otomatik denetim araçlarını (axe, Lighthouse) sürece dahil edin. Otomatik araçlar sorunların yaklaşık yarısını yakalar; gerisi için gerçek klavye ve ekran okuyucu testi şarttır.

Erişilebilirlik bir kısıtlama değil, tasarım kalitesinin ölçütüdür. Herkes için çalışan bir arayüz kurmak, aynı zamanda daha net, daha sağlam ve yasal olarak da güvenli bir ürün üretmek demektir. En iyi yaklaşım, erişilebilirliği baştan düşünmek; sonradan eklenen erişilebilirlik her zaman daha pahalıya mal olur.