Erişilebilirlik, uzun süre “isteğe bağlı bir iyilik” gibi ele alındı. Oysa mesele, sitenizi kullanmak isteyen ama mevcut tasarımınızla kullanamayan insanlar. Görme güçlüğü çeken, fare kullanamayan, ekran okuyucuyla gezinen, renk ayrımında zorlanan veya yaşa bağlı olarak küçük yazıları okuyamayan ziyaretçiler.
Ayrıca erişilebilirlik iyileştirmeleri, herkesin deneyimini iyileştirir. Yeterli kontrast, güneş altında telefonuna bakan herkese yarar. Altyazılı video, sessiz ortamda izleyen herkese. Net başlık yapısı, sayfayı tarayan herkese. Erişilebilir tasarım, iyi tasarımın bir alt kümesi değil, tanımının parçasıdır.
Bu yazıda WordPress sitenizde uygulayabileceğiniz somut erişilebilirlik adımlarını anlatacağım.
Dört Temel İlke
Uluslararası erişilebilirlik standartları (WCAG) dört ilke etrafında kuruludur:
Algılanabilir. İçerik, kullanıcının algılayabileceği biçimde sunulmalı. Görsellerin metin karşılığı, videoların altyazısı olmalı.
Kullanılabilir. Arayüz bileşenleri kullanılabilir olmalı. Her işlev klavyeyle erişilebilmeli, zaman sınırı dayatılmamalı.
Anlaşılabilir. Bilgi ve arayüz işleyişi anlaşılır olmalı. Hata mesajları açık, gezinme tutarlı olmalı.
Sağlam. İçerik, farklı yardımcı teknolojilerle güvenilir biçimde yorumlanabilmeli.
Bu dört ilkeyi akılda tutmak, karşılaştığınız her tasarım kararında doğru soruyu sormanızı sağlar.
Renk ve Kontrast
En sık karşılaşılan erişilebilirlik sorunu, yetersiz kontrasttır. Açık gri zemin üzerine açık gri metin, tasarım sunumlarında zarif görünür ama gerçek kullanımda okunmaz.
Uygulanması gerekenler: gövde metni ile arka plan arasında yeterli kontrast oranı sağlayın, büyük başlıklarda eşik biraz esner ama yine de kontrol edin, buton metni ile buton zemini arasındaki kontrastı unutmayın, form alanı kenarlıklarının görünür olduğundan emin olun.
Bir başka kritik nokta: bilgiyi yalnızca renkle iletmeyin. “Kırmızı alanlar zorunludur” ifadesi, renk ayrımında zorlanan kullanıcı için anlamsızdır. Renge ek olarak ikon, metin veya desen kullanın.
Klavye Erişimi
Fare kullanamayan kullanıcılar siteyi klavyeyle gezer. Bunu test etmek çok kolaydır: farenize dokunmadan, yalnızca Tab tuşuyla sitenizde gezinmeyi deneyin.
Kontrol edilmesi gerekenler:
- Tab tuşuyla tüm bağlantılara, butonlara ve form alanlarına ulaşabiliyor musunuz?
- Odaklanılan öğe görsel olarak belirgin biçimde işaretleniyor mu? Pek çok tema, estetik gerekçesiyle odak halkasını kaldırır — bu, erişilebilirliği tek hamlede yok eden bir müdahaledir.
- Sıralama mantıklı mı? Odak, sayfada görsel olarak beklenen sırayla ilerlemeli.
- Açılır menüler klavyeyle açılıp kapanabiliyor mu?
- Açılan pencerelerde odak, pencere içinde kalıyor mu ve Esc tuşuyla kapatılabiliyor mu?
- İçeriğe atlama bağlantısı var mı? Her sayfada menüyü atlayıp doğrudan içeriğe geçmeyi sağlayan bir bağlantı, klavye kullanıcıları için büyük kolaylıktır.
Başlık Yapısı ve Anlamsal İşaretleme
Ekran okuyucu kullanan bir kişi, sayfayı baştan sona dinlemez; başlıklar arasında gezinerek aradığını bulur. Bu yüzden başlık hiyerarşisi bir stil aracı değil, gezinme aracıdır.
Kurallar: her sayfada tek bir H1 bulunmalı, başlık seviyeleri atlanmamalı (H2’den doğrudan H4’e geçilmemeli), başlıklar görsel boyut için değil yapı için kullanılmalı.
Aynı şekilde, sayfanın bölümlerini anlamlı HTML etiketleriyle işaretleyin: gezinme alanı, ana içerik, yan alan ve altbilgi için uygun etiketler kullanıldığında, ekran okuyucu kullanıcısı bölümler arasında doğrudan atlayabilir.
Görseller ve Alternatif Metin
Her anlamlı görselin alternatif metni olmalıdır. İyi bir alternatif metin, görselin içeriğini ve bağlamdaki işlevini anlatır.
Pratik kurallar: dekoratif görsellerde alternatif metni boş bırakın (silmeyin, boş bırakın) — böylece ekran okuyucu atlar. Bilgi taşıyan görsellerde bilgiyi metne dökün. “Görsel” veya “resim” kelimesiyle başlamayın; ekran okuyucu bunu zaten belirtir. Metin içeren görsellerde, o metni alternatif metne aktarın.
İnfografik gibi karmaşık görsellerde, alternatif metin yeterli olmaz; içeriği sayfa metninde veya ayrı bir açıklamada sunun.
Formlar
Formlar, erişilebilirlik sorunlarının yoğunlaştığı alandır.
Her alanın görünür ve kalıcı bir etiketi olmalı. Yalnızca yer tutucu metin (placeholder) kullanmak yaygın bir hatadır: kullanıcı yazmaya başladığında etiket kaybolur ve ne yazdığını unutan kişi geri dönemez.
Etiketler alanlarla programatik olarak ilişkilendirilmeli, böylece ekran okuyucu doğru okuyabilsin.
Hata mesajları alanın yanında görünmeli, sorunu ve çözümü açıklamalı. “Geçersiz giriş” yerine “Telefon numarasını 10 haneli olarak, başında sıfır olmadan yazın” yazın.
Zorunlu alanlar yalnızca yıldız işaretiyle değil, metinle de belirtilmeli.
Video ve Hareketli İçerik
Video içeriklerde altyazı sağlayın. Bu yalnızca işitme güçlüğü olan kullanıcılar için değil; sessiz ortamda izleyen, ana dili farklı olan veya sesli anlatımı takip etmekte zorlanan herkes için faydalıdır.
Otomatik oynayan içeriklerden kaçının. Otomatik oynayan bir video veya kayan bir slider, bazı kullanıcılar için rahatsız edici, bazıları için ise okuma engelidir. Kullanacaksanız durdurma kontrolü sunun.
Aşırı animasyondan kaçının. İşletim sistemi düzeyinde “hareketi azalt” tercihi yapan kullanıcılar için animasyonları devre dışı bırakan bir CSS kuralı ekleyin.
WordPress’te Uygulama
WordPress ekosisteminde erişilebilirliği kolaylaştıran birkaç pratik yol var.
Tema seçerken erişilebilirlik etiketine bakın; resmi tema dizininde bu kriteri karşılayan temalar işaretlenir. Blok editörün varsayılan blokları genellikle anlamsal olarak doğru HTML üretir; sayfa oluşturucuların ürettiği iç içe kapsayıcı yapıları ise daha dikkatli kontrol gerektirir.
Menü ve buton metinlerini bağlamdan bağımsız anlaşılır yazın. “Devamını oku” bağlantıları, ekran okuyucuda arka arkaya dinlendiğinde hiçbir şey ifade etmez; “Web sitesi maliyeti yazısının devamını oku” biçiminde yazın veya gizli açıklayıcı metin ekleyin.
Test Etme
Otomatik test araçları hızlı bir tarama sağlar ve kontrast, eksik alternatif metin, etiket eksikliği gibi sorunları yakalar. Ancak otomatik araçlar sorunların yalnızca bir kısmını bulabilir.
Manuel testler şart: klavyeyle baştan sona gezinin, tarayıcı yakınlaştırmasını yüzde iki yüze çıkarıp düzenin bozulmadığını kontrol edin, sayfayı bir ekran okuyucuyla dinleyin, renkleri gri tonlamaya çevirip bilginin hâlâ anlaşılıp anlaşılmadığına bakın.
Bu testleri yeni bir sayfa yayınladığınızda değil, tasarım aşamasında yapmaya başlayın. Sonradan eklenen erişilebilirlik, her zaman baştan tasarlanandan daha maliyetlidir.
Erişilebilirlik Katmanı Eklentileri
Piyasada “tek satır kodla sitenizi erişilebilir yapın” vaadiyle satılan araçlar var. Bunlar sayfaya bir katman ekler ve kullanıcıya yazı boyutu büyütme, kontrast artırma gibi seçenekler sunar.
Bu araçların sınırlarını bilmek önemlidir. Sitenin altyapısındaki yapısal sorunları çözmezler: yanlış başlık hiyerarşisini düzeltmezler, eksik alternatif metni yazmazlar, klavyeyle erişilemeyen bir menüyü erişilebilir kılmazlar. Yaptıkları şey, mevcut yapının üzerine bazı görsel tercihler eklemektir.
Ayrıca bu katmanlar bazen yardımcı teknolojilerle çakışır. Ekran okuyucu kullanan bir kişi zaten kendi aracına sahiptir; araya giren ek bir katman deneyimi iyileştirmek yerine karmaşıklaştırabilir.
Doğru yaklaşım, erişilebilirliği yapının kendisinde çözmektir. Bu araçları tamamlayıcı bir kolaylık olarak düşünebilirsiniz, ancak asıl işin yerine geçen bir çözüm olarak değil.
Nereden Başlamalı?
Mevcut bir sitede erişilebilirliği baştan sona ele almak kapsamlı bir iş. Sınırlı zamanla en yüksek etkiyi elde etmek için şu sırayı öneriyorum.
Önce kontrast sorunlarını düzeltin. Genellikle birkaç renk değeri değişikliğiyle çözülür ve etkisi her sayfada hissedilir.
Sonra klavye erişimini kontrol edin. Özellikle odak göstergesinin kaldırılmış olup olmadığına bakın; geri getirmek çoğu zaman birkaç satır CSS meselesidir.
Ardından başlık hiyerarşisini düzeltin. En çok trafik alan sayfalardan başlayın.
Sonra alternatif metinleri tamamlayın. Medya kütüphanesindeki tüm görselleri tek seferde yapmaya çalışmayın; yayında olan sayfalardaki görsellerle başlayın.
En son formları ele alın. Etiketleri kalıcı hale getirmek ve hata mesajlarını iyileştirmek, hem erişilebilirliği hem dönüşüm oranını birlikte artırır.
Bu beş adım, çoğu sitede karşılaşılan sorunların büyük kısmını kapatır ve sonraki iyileştirmeler için sağlam bir zemin bırakır.
Erişilebilirliğin İş Tarafı
Erişilebilirlik yatırımının karşılığı yalnızca etik değil, ölçülebilir de. Daha net başlık yapısı, daha okunabilir metin ve daha iyi form tasarımı, tüm ziyaretçilerin deneyimini iyileştirir ve dönüşüm oranına yansır.
Ayrıca erişilebilir bir sitenin teknik yapısı, arama motorları için de daha anlaşılırdır. Anlamsal HTML, doğru başlık hiyerarşisi ve açıklayıcı bağlantı metinleri, hem ekran okuyucunun hem tarayıcı botunun işini kolaylaştırır.
Kurumsal müşteriyle çalışan işletmeler için ek bir boyut daha var: büyük kurumlar tedarikçi seçerken giderek daha sık erişilebilirlik kriterine bakıyor.
Bu nedenle erişilebilirliği bir maliyet kalemi olarak değil, sitenizin kaç kişiye ulaşabildiğini belirleyen bir kalite ölçütü olarak görmek daha doğru. İyi yapılmış bir erişilebilirlik çalışması, aynı zamanda daha temiz kod, daha tutarlı tasarım ve daha kolay bakım anlamına gelir. Bu kazançların hepsi, uzun vadede sitenizin toplam sahip olma maliyetini düşürür.
Sonuç
Erişilebilirlik, ek bir özellik değil; sitenizin kaç kişi tarafından kullanılabildiğinin ölçüsü. Yeterli kontrast, çalışan klavye erişimi, doğru başlık yapısı ve anlamlı alternatif metinler — bu dördü, çoğu sitedeki sorunların büyük kısmını çözer ve deneyimi herkes için iyileştirir.
Sitenizin erişilebilirlik durumunu değerlendirip iyileştirme planı çıkarmamı isterseniz iletişime geçebilirsiniz.