Web erişilebilirliği denince birçok işletme sahibinin aklına binalardaki rampa gibi bir şey gelir: iyi niyetli ama kendi müşteri kitlesiyle pek ilgisi olmayan ek bir iş. Oysa erişilebilir bir sitenin kurallarının büyük kısmı, herkes için daha rahat okunan, daha kolay doldurulan ve Google'ın daha iyi anladığı bir site anlamına geliyor.
Aşağıdaki kuralların hiçbiri büyük bir bütçe gerektirmiyor. Çoğu, tasarım ve kodlama sırasında doğru karar vermekten ibaret.
Erişilebilirlik kimin için?
İlk akla gelenler ekran okuyucu kullanan görme engelliler, renk ayrımında zorlanan kişiler ve fare kullanamayıp klavyeyle gezinenler. İşitme kaybı olanlar için de videolarda altyazı aynı rolü oynar.
Ama liste burada bitmiyor. Güneş altında telefondan sitenize bakan biri, gözlüğünü evde unutmuş 60 yaşındaki bir müşteri, kolu alçıda olduğu için tek eliyle telefon kullanan bir başkası da aynı kurallardan faydalanır. Erişilebilirlik bir azınlık özelliği değil, geniş bir kullanım koşulları yelpazesi.
Uluslararası referans, W3C'nin Web İçeriği Erişilebilirlik Yönergeleri, kısaca WCAG. Güncel sürüm 2.2 ve A, AA, AAA olmak üzere üç uyum seviyesi tanımlıyor. Birçok kurum AA seviyesini hedef alır; bu yazıdaki ölçüler de o seviyeye göre.
Yasal yükümlülük tarafı ülkeye ve sektöre göre değişiyor. Avrupa Birliği'nde Avrupa Erişilebilirlik Yasası yürürlükte ve AB'deki tüketicilere satış yapan bazı e-ticaret sitelerini de kapsayabiliyor. Yurt dışına satış yapıyorsanız kapsamda olup olmadığınızı bir uzmanla netleştirin. Türkiye'deki düzenlemeler için de güncel mevzuatı kontrol etmek gerekiyor.
Renk kontrastı ve yazı boyutu
En sık karşılaştığımız sorunlardan biri bu. Beyaz zemin üzerinde açık gri metin şık görünür, ama okunmaz.
WCAG AA seviyesinde normal metin ile arka plan arasındaki kontrast oranı en az 4,5:1, büyük başlıklarda en az 3:1 olmalı. Somut bir örnek vereyim: Beyaz zemin üzerinde #999999 gri yaklaşık 2,8:1 oranla bu sınırın altında kalıyor. Beyaz üzerinde 4,5:1'i geçen en açık gri tonu #767676 civarı. Tasarımcınızın sevdiği o yumuşak gri, büyük ihtimalle bundan açıktır.
Yazı boyutu için mobilde gövde metnini 16 pikselin altına indirmeyin ve satır yüksekliğini 1,5 civarında tutun. Paragraflar ekranın bir ucundan öbür ucuna uzanmasın; masaüstünde satır başına 60 ila 80 karakter rahat okunur.
Bir de renkle tek başına bilgi vermemek var. Form hatasını yalnızca alanın etrafını kırmızı yaparak göstermek, kırmızı ile yeşili ayırt edemeyen biri için hiçbir şey ifade etmez. Hatanın yanına “Telefon numarası 10 haneli olmalı” gibi bir metin ekleyin. Aynı şekilde metin içindeki linkleri yalnızca renkle değil, alt çizgiyle de ayırın.
Kurumsal renkleriniz düşük kontrastlıysa logoyu değiştirmeniz gerekmiyor. Ana rengin daha koyu bir tonunu metin ve buton için türetmek çoğu zaman yeterli olur. Kurumsal kimliği siteye taşırken renk paletinin nasıl genişletileceğini ayrı bir yazıda anlattık.
Görseller ve alt metin
Alt metin, görselin ne gösterdiğini anlatan kısa açıklamadır. Ekran okuyucu bunu sesli okur, görsel yüklenemezse yerinde görünür ve Google görseli anlamak için onu kullanır. Yani tek bir alan üç işe yarıyor.
“resim1”, “banner” ya da anahtar kelime yığını iyi alt metin değildir. “Moda'daki salonumuzda saç boyama yapan kuaför” iyi bir alt metindir. Görsel tamamen dekoratifse, mesela arka plandaki bir desen, alt metni boş bırakmak doğru olandır; ekran okuyucu onu atlar.
Kampanya bilgisini görselin içine yazı olarak gömmek de sık yapılan bir hata. “Eylül'e özel yüzde 20 indirim” yazan bir banner'ı ekran okuyucu metin olarak okuyamaz, Google da her zaman doğru anlamayabilir. Bu bilgiyi gerçek metin olarak yazın. Dosya adı, format ve alt metin pratiklerini görsel SEO yazımızda daha ayrıntılı ele aldık.
Klavye ve ekran okuyucu
Fareyi bir kenara bırakıp sitenizi yalnızca Tab tuşuyla gezmeyi deneyin. Üç şeye dikkat edin: Odaklanılan öğe görünüyor mu, sıra mantıklı mı, her şeye ulaşılabiliyor mu?
Birçok tasarımda tarayıcının varsayılan odak çerçevesi “çirkin” bulunduğu için kaldırılır. Sonuç, klavye kullanıcısının sayfada nerede olduğunu bilmemesidir. Çerçeveyi kaldırmak yerine marka rengine uygun bir odak stili tasarlayın.
Açılır menüler, pop-up'lar ve çerez banner'ları klavyeyle açılıp kapanabilmeli, Esc tuşuyla kapanmalı. Kapatılamayan bir pop-up, klavye kullanıcısı için sitenin sonu demek.
Formlarda her alanın görünür bir etiketi olmalı. Alanın içindeki soluk örnek yazı (placeholder) etiketin yerini tutmaz, çünkü yazmaya başlayınca kaybolur ve kullanıcı hangi alanı doldurduğunu unutur. Bu, engelli olmayan kullanıcılar için de form terkini artırabilen bir sorun.
Ekran okuyucu kullanıcıları sayfayı başlıklar arasında atlayarak tarar. Bu yüzden sayfada tek bir H1 olması ve başlıkların sırayla (H2, sonra H3) kullanılması önemli. Bağlantı metinleri de tek başına anlam taşımalı: Ekran okuyucu bir sayfadaki linkleri liste hâlinde okuduğunda art arda beş tane “buraya tıklayın” duymak kimsenin işine yaramaz.
Küçük ama etkili bir ayrıntı daha: Sayfanın dil ayarının (HTML'deki lang özniteliği) Türkçe olarak tanımlanması. Bu yapılmazsa bazı ekran okuyucular Türkçe metni İngilizce telaffuzla okur ve anlaşılmaz hâle getirir.
Hızlı kontrol araçları
Otomatik araçlarla başlayabilirsiniz:
- Chrome geliştirici araçlarındaki Lighthouse, erişilebilirlik için 100 üzerinden bir puan ve sorun listesi verir
- WAVE ve axe DevTools tarayıcı eklentileri sorunları sayfa üzerinde işaretler
- WebAIM Contrast Checker, iki rengin kontrast oranını saniyeler içinde hesaplar
Otomatik araçlar sorunların ancak bir kısmını yakalar. Alt metnin anlamlı olup olmadığını ya da Tab sırasının mantıklı olup olmadığını bir yazılım tam olarak değerlendiremez. Bu yüzden yaklaşık 10 dakikalık bir elle kontrol de yapın: Siteyi yalnızca klavyeyle gezin, telefonunuzun yazı boyutunu en büyüğe çekip sayfanın bozulup bozulmadığına bakın, iPhone'da VoiceOver'ı ya da Android'de TalkBack'i açıp ana sayfanızı bir kez dinleyin.
O son test genellikle en öğretici olanıdır. Sitenizi gözünüz kapalı dinlediğinizde, ziyaretçinin nerede takıldığını çok net duyarsınız.
Sıkça Sorulan Sorular
Erişilebilirlik SEO'yu doğrudan etkiler mi?
Google erişilebilirliği tek başına bir sıralama faktörü olarak tanımlamıyor. Ancak alt metin, düzgün başlık yapısı, anlamlı bağlantı metinleri ve doğru dil ayarı Google'ın sayfayı anlamasını kolaylaştırır. Okunabilir metin ve rahat doldurulan formlar da ziyaretçinin sitede kalmasına ve dönüşüme katkı sağlayabilir.
Blog yazıları genel bilgilendirme amaçlıdır; hukuki, mali veya teknik danışmanlık yerine geçmez.