Ziyaretçiniz sitenize girdiğinde yazıları okuyabiliyor mu, butonlara ulaşabiliyor mu, formu doldurabiliyor mu? Bu soruların cevabı bazı kişiler için “hayır” olabilir ve bunun çoğu zaman sebebi tasarımcının kötü niyeti değil, unutulmuş birkaç ayrıntıdır. Web erişilebilirliği tam da bu ayrıntıların toplamıdır.
Bu yazıda erişilebilirliğin ne olduğunu, hangi kullanıcıların sitenizi farklı biçimde kullandığını ve küçük bir işletme sitesinde bugün yapılabilecek kontrolleri anlatıyoruz. Her maddede hangi araçla bakılacağını ve o aracın nerede yetersiz kaldığını da belirttik.
Web erişilebilirliği ne anlama gelir?
Web erişilebilirliği, bir sitenin farklı yeteneklere sahip insanlar tarafından kullanılabilir olmasıdır. Bu yalnızca görme engelli kullanıcılar için geçerli değildir. Ekranı büyüten, klavyeyle gezinen, altyazıya ihtiyaç duyan, gürültülü bir ortamda telefondan bakan ya da karmaşık bir sayfada dikkati zorlanan herkes bu kapsama girer.
Erişilebilirlik bir ek özellik değil, sitenin yapısının bir parçasıdır. Doğru başlık sırası, anlaşılır bağlantı metni ve tutarlı form alanları hem ekran okuyucunun hem de arama motorunun sayfayı doğru okumasını sağlar. Bu yüzden tasarımın baştan düşünülmesi, sonradan yama yapmaktan daha az emek ister.
WCAG nedir ve neden ona bakılır?
WCAG, W3C’nin yayımladığı Web İçerik Erişilebilirlik Yönergeleri’dir ve web erişilebilirliği için uluslararası ölçütleri tanımlar. Yönergeler algılanabilirlik, kullanılabilirlik, anlaşılabilirlik ve sağlamlık olmak üzere dört ilke üzerine kuruludur. Ayrıntılı metni W3C’nin resmî WCAG sayfasında bulabilirsiniz.
Küçük bir işletme için WCAG’nin tamamını uygulamak gerekmez. Ama ölçütlerin neden var olduğunu bilmek, hangi kontrolün önce yapılacağını belirlemeye yardım eder. Yönergelerin dili teknik olduğu için bu yazıda konuyu daha sade anlatıyoruz.
Küçük işletme sitesinde ilk kontrol: metin, renk ve klavye
Üç alan ilk bakılacak yerlerdir.
- Metin kontrastı: Gri üzerine açık gri yazı tasarımda şık görünür ama okunmaz. Metin ile arka plan arasında yeterli kontrast olmalıdır. WCAG bunun için asgari bir oran tanımlar.
- Klavye ile gezinme: Sitenize yalnızca Tab tuşuyla ulaşabiliyor musunuz? Menü, açılır pencere ve butonlar mantıklı bir sırayla odak alıyor mu, odak göstergesi görünüyor mu?
- Yeniden boyutlandırma: Tarayıcıda metni büyüttüğünüzde içerik üst üste binmeden okunabiliyor mu?
Bu üç kontrolü yapmak için ek bir yazılıma ihtiyaç yoktur. Sayfayı yalnızca klavyeyle gezmek ve tarayıcının yakınlaştırma özelliğini kullanmak çoğu sorunu ortaya çıkarır.
Görseller, formlar ve bağlantılar nasıl hazırlanır?
Görsellerin alternatif metni, ekran okuyucunun görseli ne olarak okuyacağını belirler. Dekoratif bir süsleme için metin boş bırakılabilir. Ama bir ürün ya da ekip fotoğrafı için görselin ne gösterdiğini anlatan kısa bir cümle yazılmalıdır.
Formlarda her alanın üstünde ya da yanında açık bir etiket olmalıdır. Yalnızca yer tutucu metnine güvenmek, alana tıklayınca yazının kaybolması nedeniyle kullanıcıyı zor duruma sokar. Hata mesajları da hangi alanın sorunlu olduğunu ve nasıl düzeltileceğini söylemelidir.
Bağlantı metni, bağlantının nereye götürdüğünü tek başına anlatmalıdır. “Buraya tıklayın” yerine “web sitesi teklifi isteyin” gibi bir ifade, bağlantı listesinde tek başına okunduğunda da anlamlıdır.
Erişilebilirlik ve arama motoru görünürlüğü
Erişilebilirlik ile arama görünürlüğü aynı kaynaktan beslenir: düzenli başlık yapısı, açıklayıcı metin ve anlamlı bağlantılar. Google bir sayfanın konusunu anlamak için bu işaretleri okur. Bu yüzden erişilebilir bir sayfa çoğu zaman arama motoru için de daha okunabilirdir.
Bu bir garanti değildir. Erişilebilirlik tek başına sıralama sağlamaz; ama kötü yapılmış bir sayfa iyi içeriği bile dağıtabilir. Sayfa hızı ve mobil deneyim de aynı tasarım kararlarında birlikte ele alınmalıdır. Bu konuda Core Web Vitals nedir yazımıza da bakabilirsiniz.
Hangi araçlarla kontrol edilir?
Kontrolü birkaç araçla birlikte yapmak en sağlıklısıdır. Her aracın gösterdiği ve gösteremediği şeyler farklıdır.
| Araç | Ne gösterir | Sınırı |
|---|---|---|
| Klavye ile gezinme | Odak sırası, erişilemeyen öğeler | Ekran okuyucunun okumasını göstermez |
| Tarayıcı geliştirici araçları | Kontrast ve etiket eksikleri için ipuçları | Anlamlı alternatif metni değerlendiremez |
| Lighthouse erişilebilirlik denetimi | Otomatik tespit edilebilen sorunlar | Sorunların yalnızca bir kısmını yakalar |
| Ekran okuyucu (NVDA gibi) | Sayfanın gerçek kullanıcıya nasıl okunduğu | Öğrenme eğrisi vardır |
Otomatik araçların bulduğu sorunlar bir başlangıçtır. Sayfanın bir insan tarafından da gözden geçirilmesi gerekir.
Önce hangi sayfa, sonra hangi kontrol?
Bütün siteyi tek seferde düzeltmeye çalışmak çoğu zaman yarıda kalır. Daha sağlıklı yol, ziyaretçinin en çok uğradığı sayfalarla başlamaktır: ana sayfa, hizmet sayfaları ve iletişim formu. Bu sayfalarda yukarıdaki üç temel kontrolü yapın, sorunları not edin ve önce kullanıcıyı doğrudan etkileyenleri düzeltin.
Görsel ve metin düzenlemeleri ise sayfa şablonu üzerinden yapıldığında her sayfaya birden yayılır. Bu yüzden tek bir buton ya da menü düzeltmesi, sitenin birçok yerinde aynı anda fayda sağlayabilir. Yeni içerik eklerken de aynı kontrolleri uygulamak, sorunların birikmesini önler.
Kontrol listesi
- Metin ve arka plan arasında yeterli kontrast var mı?
- Sitenin tamamına yalnızca klavyeyle ulaşılabiliyor mu?
- Odak göstergesi her etkileşimli öğede görünüyor mu?
- Tarayıcıda metin büyütüldüğünde içerik bozuluyor mu?
- Anlamlı görsellerde alternatif metin var mı?
- Her form alanının açık bir etiketi var mı?
- Bağlantı metinleri tek başına anlaşılır mı?
- Sayfada tek bir H1 ve mantıklı bir başlık sırası var mı?
Bu listedeki maddelerin çoğuna “evet” diyebiliyorsanız temel adımları atmışsınız demektir. Eksik kalanları önceliklendirmek için sitenizi web tasarım hizmetimiz kapsamında birlikte gözden geçirebiliriz.
