Web sitenizi kimler kullanıyor? Gözlüğünü evde unutan bir ziyaretçi, güneş altında telefondan bakan bir müşteri, eli alçıda olduğu için sadece klavye kullanabilen biri, ekran okuyucu ile internette gezinen görme engelli bir kullanıcı ya da teknolojiyle arası pek iyi olmayan yaşlı bir müşteri. Hepsi potansiyel müşterinizdir.
Erişilebilir web sitesi tasarımı, sitenizin bu kişilerin tamamı tarafından kullanılabilmesini hedefler. Üstelik erişilebilirlik için yapılan iyileştirmelerin çoğu, sitenin herkes için daha kolay kullanılmasını ve arama motorları tarafından daha iyi anlaşılmasını da sağlar. Bu yazıda erişilebilir tasarımın temel ilkelerini pratik örneklerle anlatıyoruz.
Erişilebilirlik Neden Önemli?
- Daha fazla müşteri: Görme, işitme, hareket ya da bilişsel güçlüğü olan kişiler ve yaşlı kullanıcılar, nüfusun azımsanmayacak bir bölümünü oluşturur. Kullanamadıkları bir site, kaybedilen müşteri demektir.
- Daha iyi kullanıcı deneyimi: Net kontrast, büyük dokunma alanları ve anlaşılır formlar herkes için kolaylık sağlar.
- Arama motoru uyumu: Doğru başlık yapısı, anlamlı bağlantı metinleri ve görsel açıklamaları, arama motorlarının sayfayı anlamasına yardımcı olur.
- Kurumsal sorumluluk: Erişilebilir bir site, markanın kapsayıcı olduğunu gösterir. Bazı sektörlerde ve kurumlarda erişilebilirlik konusunda düzenlemeler de bulunabilir; işletmenizin tabi olduğu kuralları güncel mevzuattan teyit etmeniz önerilir.
Uluslararası alanda en yaygın referans, W3C tarafından yayımlanan Web İçeriği Erişilebilirlik Yönergeleri (WCAG)dir. Aşağıdaki ilkeler büyük ölçüde bu yönergelere dayanır.
1. Yeterli Renk Kontrastı
Metin ile arka plan arasındaki kontrast, okunabilirliğin temelidir. WCAG, normal metinler için en az 4.5:1, büyük metinler için en az 3:1 kontrast oranı önerir. Açık gri metinler, fotoğraf üzerine yerleştirilmiş ince yazılar ve pastel düğmeler en sık karşılaşılan sorunlardır. Kontrast oranını ölçen ücretsiz araçlarla tasarım aşamasında kontrol yapmak kolaydır.
Ayrıca bilgi yalnızca renkle verilmemelidir. "Kırmızı alanları doldurun" gibi bir yönerge, renk körlüğü olan bir kullanıcı için anlamsızdır. Zorunlu alanlar bir yıldız işareti ya da "zorunlu" ifadesiyle de belirtilmelidir.
2. Görseller İçin Alternatif Metin
Ekran okuyucu kullanan bir ziyaretçi görselleri göremez; ekran okuyucu ona görselin alt metnini okur. Bu yüzden:
- Bilgi taşıyan görsellere kısa ve açıklayıcı alternatif metin yazılmalıdır. Örneğin "Gelibolu sahilinde 3+1 satılık daire, deniz manzaralı salon".
- Sadece süs amaçlı görsellerin alternatif metni boş bırakılmalıdır; böylece ekran okuyucu gereksiz bilgi okumaz.
- Görselin içinde önemli bir metin varsa (örneğin kampanya duyurusu), bu metin alternatif metinde ya da sayfada metin olarak da yer almalıdır.
Doğru yazılmış alternatif metinler, görsellerinizin Google Görseller'de bulunmasına da katkı sağlar. Görsel kullanımına dair diğer ipuçlarını site hızı yazımızda da ele aldık.
3. Klavye ile Kullanılabilirlik
Bazı kullanıcılar fare kullanamaz; siteyi Tab, Enter ve ok tuşlarıyla gezer. Sitenizi bir de bu şekilde test edin:
- Tab tuşuyla menüye, bağlantılara, düğmelere ve form alanlarına sırayla ulaşılabiliyor mu?
- Hangi öğenin seçili olduğu (odak göstergesi) açıkça görünüyor mu? Tasarım uğruna odak çerçevesini tamamen kaldırmak, klavye kullanıcıları için siteyi kullanılamaz hâle getirir.
- Açılır menüler ve pencereler (modal) klavyeyle açılıp kapanabiliyor mu? Esc tuşu pencereyi kapatıyor mu?
- Kullanıcı bir pencerenin içinde sıkışıp kalıyor mu?
4. Anlamlı Başlık Yapısı
Ekran okuyucu kullanıcıları sayfada başlıklar arasında atlayarak gezinir. Bu yüzden sayfada tek bir ana başlık (H1) bulunmalı, alt bölümler H2 ve H3 başlıklarıyla mantıklı bir hiyerarşi içinde düzenlenmelidir. Başlıklar, yalnızca büyük ve kalın yazı görüntüsü elde etmek için kullanılmamalıdır. Bu yapı, aynı zamanda arama motorlarının sayfanızın konusunu anlamasına yardımcı olur.
5. Anlaşılır Bağlantı Metinleri
"Buraya tıklayın" ya da "devamı" gibi bağlantı metinleri, bağlamından koparıldığında anlamsızdır. Ekran okuyucular bağlantıları liste hâlinde okuyabilir; bu listede on tane "devamı" bağlantısı kullanıcıya hiçbir şey söylemez. Bunun yerine "kurumsal web sitesi özellikleri" gibi bağlantının nereye gittiğini anlatan metinler kullanılmalıdır.
6. Erişilebilir Formlar
- Her form alanının görünür ve alana bağlı bir etiketi olmalıdır. Sadece alanın içinde silik bir örnek yazı (placeholder) bulunması yeterli değildir; kullanıcı yazmaya başlayınca bu yazı kaybolur.
- Hata mesajları, hangi alanda neyin yanlış olduğunu açıkça söylemelidir: "Telefon numarası 10 haneli olmalıdır" gibi.
- Form gönderildiğinde başarı mesajı görünür ve anlaşılır olmalıdır.
- Robot doğrulamaları, erişilebilir alternatifler sunmalıdır.
7. Dokunma Alanları ve Mobil Kullanım
Telefonda küçük ve birbirine çok yakın düğmeler, yanlış dokunmalara yol açar. Bu sorun ince motor becerisi zayıf kullanıcılar için daha da büyüktür. Düğmelerin ve bağlantıların yeterince büyük ve aralarında boşluk olacak şekilde tasarlanması gerekir. Ayrıca kullanıcının sayfayı yakınlaştırmasını engelleyen ayarlar kullanılmamalıdır. Mobil uyumlu web sitesi yazımız bu konuda ek ipuçları içeriyor.
8. Video, Ses ve Hareket
- Videolarda altyazı bulunması, hem işitme engelli kullanıcılar hem de sesi kapalı izleyenler için önemlidir.
- Otomatik çalan sesli içerikler rahatsız edicidir; durdurulabilmelidir.
- Sürekli kayan slaytlar ve yoğun animasyonlar bazı kullanıcılarda dikkat dağınıklığına ya da baş dönmesine yol açabilir. İşletim sisteminde "hareketi azalt" tercihini açmış kullanıcılar için animasyonların azaltılması iyi bir uygulamadır.
9. Sade Dil
Erişilebilirlik yalnızca teknik bir konu değildir. Kısa cümleler, açık başlıklar, gereksiz jargondan kaçınan bir dil ve mantıklı bir sayfa düzeni; okuma güçlüğü olan kullanıcılar başta olmak üzere herkesin işini kolaylaştırır.
Hızlı Erişilebilirlik Kontrol Listesi
- Metin kontrastı yeterli mi?
- Tüm anlamlı görsellerde alternatif metin var mı?
- Site sadece klavyeyle gezilebiliyor mu, odak görünüyor mu?
- Başlık yapısı mantıklı mı?
- Bağlantı metinleri anlamlı mı?
- Form alanlarının etiketleri var mı, hata mesajları açık mı?
- Sayfa dili (Türkçe) HTML'de tanımlı mı?
- Telefonda yakınlaştırma yapılabiliyor mu?
Sık Sorulan Sorular
Erişilebilirlik eklentisi kurmak yeterli mi?
Sitenin köşesine eklenen erişilebilirlik araç çubukları bazı kullanıcılara yardımcı olabilir; ama sitenin kendi yapısındaki sorunları çözmez. Kalıcı çözüm, erişilebilirliğin tasarım ve kodlama aşamasında baştan düşünülmesidir.
Mevcut sitem erişilebilir hâle getirilebilir mi?
Evet. Kontrast, alternatif metin, başlık yapısı ve form etiketleri gibi birçok iyileştirme mevcut siteye uygulanabilir. Kapsamlı sorunlar varsa, site yenileme sürecinde erişilebilirliği baştan planlamak daha verimli olabilir.
Sonuç
Erişilebilir web sitesi tasarımı, sitenizin kapılarını herkese açmak demektir. Yeterli kontrast, anlamlı görsel açıklamaları, klavyeyle kullanım, düzgün başlık yapısı ve anlaşılır formlar; hem daha fazla kişiye ulaşmanızı hem de herkes için daha iyi bir deneyim sunmanızı sağlar.
Erişilebilirlik ilkelerini baştan gözeten bir site için web sitesi tasarımı hizmetimizi inceleyebilir ya da bizimle iletişime geçebilirsiniz.
