Web Sitesi Erişilebilirliği Neden Önemli?

Web sitesi erişilebilirliği, sitenizi ziyaret eden herkesin onu gerçekten kullanabilmesini sağlar. Görselleri okuyamayan, fare kullanamayan, küçük metni seçemeyen ya da formu tamamlayamayan biri için yalnızca iyi görünen bir site yeterli değildir.

Erişilebilirlik, engelli kullanıcılar için hazırlanmış teknik bir kontrol listesi değildir. İçeriğin açık olması, formların anlaşılması, başlıkların düzenli kullanılması ve navigasyonun kolay olmasıdır. Böylece ziyaretçiler aradıklarını daha hızlı bulur.

Pek çok işletme erişilebilirliği site yayına çıktıktan sonra düşünür. Oysa alt metin, klavye kullanımı, kontrast ve form etiketleri son rötuş değildir. Bunlar sitenin nasıl çalıştığını belirleyen temel parçalardır. Bu rehber, erişilebilirliğin ne olduğunu, işletmeniz için neden önemli olduğunu ve nereden başlayabileceğinizi anlatır.

Öne Çıkanlar

• Web sitesi erişilebilirliği, görme, işitme ve motor beceri farklılıkları olan ziyaretçilerin sitenizi kullanabilmesini sağlar.
• WCAG; algılanabilir, işletilebilir, anlaşılabilir ve sağlam içerik için temel çerçevedir.
• Alt metin, başlık hiyerarşisi, klavye navigasyonu ve form etiketleri hem erişilebilirliği hem içerik düzenini iyileştirir.
• Erişilebilirlik sorunları, ziyaretçinin teklif formuna veya satın alma adımına ulaşamadan ayrılmasına neden olabilir.
• Erişilebilir bir site, sonradan eklenen bir eklenti değil; doğru kurulan tasarım ve kod yapısının sonucudur.

Web sitesi erişilebilirliği nedir?

Web sitesi erişilebilirliği, farklı ihtiyaçları olan kullanıcıların bir siteyi algılayıp kullanabilmesidir. Görme veya işitme engeli olan kişiler, klavyeyle gezinmek zorunda kalan kullanıcılar, yaşlılar ve geçici engeli bulunan ziyaretçiler buna dahildir.

Kolu kırık bir kişi fareyi rahat kullanamayabilir. Parlak güneş altında telefon ekranına bakan biri düşük kontrastlı metni okumakta zorlanabilir. Gürültülü bir yerde video izleyen kişi ise altyazıya ihtiyaç duyabilir.

Bunlar istisnai durumlar değildir. Bir site yalnızca ideal koşullarda, büyük ekranda ve fareyle çalışıyorsa iyi bir kullanıcı deneyimi sunmaz.

Erişilebilir web içeriği için en bilinen çerçeve WCAG’dir. Web Content Accessibility Guidelines, web içeriğinin daha geniş bir kullanıcı kitlesi tarafından kullanılabilmesi için dört temel ilke tanımlar:

• Algılanabilir: Kullanıcı, içerikteki bilgiyi görebilmeli, duyabilmeli veya farklı bir yolla algılayabilmelidir. Görsellere açıklayıcı alt metin eklemek buna örnektir.
• İşletilebilir: Menü, form, buton ve diğer arayüz öğeleri kullanılabilmelidir. Klavyeyle gezinme bu başlık altında değerlendirilir.
• Anlaşılabilir: İçerik, form alanları ve hata mesajları açık olmalıdır. Kullanıcı ne yapacağını tahmin etmek zorunda kalmamalıdır.
• Sağlam: Sayfa yapısı, ekran okuyucu gibi yardımcı teknolojiler tarafından doğru yorumlanabilmelidir.

Bu dört ilke yalnızca teknik ekip için yazılmış kurallar değildir. Ziyaretçinin sitenizden teklif alabilmesi, ürün bulabilmesi ya da rezervasyonunu tamamlayabilmesiyle doğrudan ilgilidir.

Erişilebilirlik kimleri etkiler?

Erişilebilirlik denince çoğu kişinin aklına yalnızca kalıcı engeller gelir. Kapsam daha geniştir. Web sitenizi kullanmak isteyen herkes, cihazı, bulunduğu ortam veya fiziksel koşulları nedeniyle erişim sorunu yaşayabilir.

Türkiye’de yaklaşık 8,5 milyon engelli bireyin yaşadığı belirtiliyor. Bu sayı, erişilebilirliğin küçük bir kullanıcı grubuna yönelik olmadığını gösterir. Dünya Sağlık Örgütü verisine göre dünya nüfusunun %16’sı bir tür engelle yaşıyor.

Konu yalnızca sayılardan ibaret değildir. İnternet kullanımı farklı yaş gruplarında yaygınlaştıkça okunabilir metinler, açık butonlar ve sade navigasyon daha fazla kişi için gerekli hale gelir.

Erişilebilir olmayan bir sayfada sık görülen sorunlar şunlardır:

• Açık gri zemin üzerinde zor okunan gri metinler
• Sadece ikonla anlatılan, etiketi olmayan butonlar
• Klavyeyle ulaşılamayan menüler ve açılır pencereler
• İçeriği açıklamayan görseller
• Placeholder dışında etiketi olmayan form alanları
• Otomatik başlayan ve durdurulamayan video veya hareketli öğeler
• Başlık sırası bozuk, uzun ve bölünmemiş içerikler

Bu sorunların çoğu, ziyaretçinin neden ayrıldığını analiz ekranında açıkça göstermez. Kullanıcı sayfayı kapatır. Siz ise yalnızca form dönüşümünün düşük olduğunu görürsünüz.

Web sitesi erişilebilirliği işletmeniz için neden önemlidir?

Erişilebilirlik doğru uygulandığında kullanıcı deneyimini ve sitenin çalışma kalitesini iyileştirir. Bu nedenle konuyu yalnızca yasal risk veya teknik denetim olarak ele almamak gerekir.

Daha fazla ziyaretçi sitenizi kullanabilir

Bir ziyaretçi ürününüzü beğenmiş, hizmetinize ihtiyaç duymuş ya da iletişime geçmeye hazır olabilir. Ancak metni okuyamıyor, form alanlarını anlayamıyor veya ödeme sırasında klavyeyle ilerleyemiyorsa satın alma niyeti tek başına yetmez.

Bir online butik düşünün. Ürün fotoğraflarında alt metin yoktur, kategori filtreleri klavyeyle çalışmaz ve ürün varyasyonları yalnızca renklerle ayrılır. Görme sorunu yaşayan ziyaretçi doğru ürünü seçemeden ayrılır. Aynı sayfa, telefondan aceleyle alışveriş yapan başka biri için de gereksiz biçimde zor olabilir.

Erişilebilirlik burada teorik bir ilke değildir. Satış akışındaki engeli kaldırmaktır.

Daha net yapı, daha az sürtünme yaratır

Erişilebilirlik için yapılan pek çok düzenleme herkesin işini kolaylaştırır. Açıklayıcı buton metinleri, okunabilir fontlar, net hata mesajları ve düzenli başlıklar daha iyi bir kullanım deneyimi sağlar.

Örneğin “Gönder” yerine “Teklif talebini gönder” yazan bir buton daha açıktır. Form alanında yalnızca “E-posta” placeholder’ı kullanmak yerine görünür bir etiket eklemek, kullanıcı yazmaya başladıktan sonra da alanın ne olduğunu anlaşılır kılar.

Bu ayrıntılar tasarım aşamasında küçük görünebilir. Ancak ziyaretçinin karar verdiği anlarda belirsizliği azaltırlar.

SEO ile ortak teknik zemini vardır

Erişilebilirlik ve SEO aynı şey değildir. Yine de ikisi de düzenli bir içerik ve kod yapısı ister.

Arama motorlarının ve ekran okuyucuların sayfayı anlayabilmesi için içerik yapısının açık olması gerekir. Anlamlı HTML, doğru başlık hiyerarşisi ve bilgi taşıyan görseller için yazılmış alt metin bu yüzden önemlidir.

Ortak iyileştirme alanları şunlardır:

• Alt metin: Ekran okuyucu kullanan kişiye görselin ne anlattığını aktarır. Arama motorlarının görsel bağlamını anlamasına da yardımcı olur.
• Başlık hiyerarşisi: İçeriği bölümlere ayırır. Okuyucu, ekran okuyucu ve arama motoru sayfanın yapısını daha kolay takip eder.
• Anlamlı bağlantılar: “Daha fazla” gibi belirsiz bağlantılar yerine bağlantının nereye götürdüğünü açıklayan metinler kullanılmalıdır.
• Sayfa hızı: Ağır, geç açılan sayfalar herkes için sorun yaratır. Yardımcı teknoloji kullanan ziyaretçiler için de bekleme ve gezinme sürecini zorlaştırır.
• Mobil kullanım: Küçük ekranda okunmayan metin veya birbirine çok yakın butonlar, erişilebilirlik ve dönüşüm sorunudur.

İyi bir SEO yapısı erişilebilirliğin yerini tutmaz. Ancak dağınık, anlamsız ve yalnızca görsel efektlerle oluşturulmuş bir sayfa iki konuda da zayıf kalır.

Yasal ve ticari risk büyüyebilir

Türkiye’de özel sektör için web erişilebilirliğine yönelik genel bir zorunluluk olmadığı belirtiliyor. Kamu web siteleri ise erişilebilirlik standartları kapsamında değerlendirilir.

Yurt dışına satış yapan ya da uluslararası müşterilere hizmet veren işletmelerde konu daha erken gündeme gelebilir. Erişilebilirlik düzenlemeleri ülkeden ülkeye farklı uygulanır. Bu yüzden erişilebilirliği son dakika düzeltmesi olarak görmek yerine siteyi en baştan doğru kurmak daha mantıklıdır.

Bir diğer konu itibardır. Ziyaretçi sitenizde temel bir işlemi tamamlayamazsa teknik nedenini araştırmaz. Markanızın kendisine hizmet veremediğini düşünür.

Erişilebilir web sitesi için 7 temel adım

Erişilebilirlik denetimi geniş bir konudur. Yine de çoğu işletme sitesi aşağıdaki temel alanları düzelterek iyi bir başlangıç yapabilir.

1. Görsellere anlamlı alt metin ekleyin

İçerik taşıyan her görselin alt özelliği olmalıdır. Alt metin, görselin dosya adı değildir. Görselin sayfadaki anlamını kısa ve net biçimde açıklar.

“urun-gorsel-2.jpg” erişilebilir bir açıklama değildir. “Bodrum’da deniz manzaralı butik otel odası” ise görselin bağlamını anlatır.

Dekoratif bir görsel içerik taşımıyorsa boş alt metin kullanılabilir: alt="". Ekran okuyucu kullanan kişinin yalnızca tasarım amacıyla eklenmiş her görseli dinlemek zorunda kalmaması gerekir.

Alt metni anahtar kelimelerle doldurmak da doğru değildir. Görsel ne anlatıyorsa alt metin de onu anlatmalıdır.

2. Klavye navigasyonunu test edin

Sitenizdeki her kritik işlem yalnızca klavyeyle yapılabilmelidir. Kullanıcı Tab, Enter ve yön tuşlarıyla menüye ulaşabilmeli, form doldurabilmeli ve açılır pencereleri kapatabilmelidir.

Bunu test etmek için fareyi bırakın. Ana sayfadan teklif formuna ya da satın alma adımına yalnızca klavyeyle ulaşmayı deneyin.

Şunları kontrol edin:

• Klavye odağının hangi öğede olduğu görünür mü?
• Menü bağlantılarına sırayla ulaşılabiliyor mu?
• Açılan pencere içinde sıkışıp kalıyor musunuz?
• Form alanlarının sırası mantıklı mı?
• Butonlar Enter tuşuyla çalışıyor mu?
• Kapatma ikonu veya menü kontrolü klavyeyle erişilebilir mi?

Bir muhasebe ofisinin teklif formunda alan etiketleri görünmüyor ve klavye sırası bozuksa ziyaretçi iletişim bilgilerini giremeden ayrılabilir. Formun sayfada bulunması, tek başına çalıştığı anlamına gelmez.

3. Renk kontrastını yeterli tutun

Düşük kontrast, özellikle küçük metinleri okunamaz hale getirir. Açık gri bir metin, beyaza yakın bir arka planda tasarım ekranında zarif görünebilir. Gerçek kullanımda ise metin kaybolur.

WCAG AA standardı normal metin için en az 4,5:1 kontrast oranı önerir. Bu oran, renk seçiminin yalnızca estetik bir karar olmadığını gösterir.

Renk tek başına bilgi vermemelidir. Örneğin form hatasını yalnızca kırmızı çerçeveyle belirtmek yeterli değildir. Hata mesajı da açıkça yazılmalıdır: “E-posta adresini girin” gibi.

Bu yaklaşım, renk algısı farklı kullanıcılar ve hızlı hareket eden diğer ziyaretçiler için daha anlaşılırdır.

4. Video içeriklerine altyazı ekleyin

Video sayfada bilgi veriyorsa altyazı da olmalıdır. Bu, işitme engeli olan kullanıcılar için temel bir ihtiyaçtır. Sessiz bir ortamda video izleyen, sesi açmak istemeyen ya da içeriği metin olarak taramak isteyen ziyaretçilere de yardımcı olur.

Altyazı, videodaki konuşmayı anlaşılır biçimde aktarmalıdır. Önemli sesli uyarılar veya bağlam veren sesler varsa bunlar da gerektiğinde belirtilmelidir.

Otomatik başlayan videolar ayrı bir risk oluşturur. Kullanıcı videoyu durduramıyor, sesi kapatamıyor veya hareketli içeriği kontrol edemiyorsa sayfayı kullanmak zorlaşır.

5. Okunabilir font boyutu ve esnek ölçüler kullanın

Küçük metin, özellikle mobil ekranda kullanıcıyı yakınlaştırmaya zorlar. Temel metin boyutunda en az 16px, okunabilirlik için yaygın bir başlangıç noktasıdır.

Ancak yalnızca font boyutu yeterli değildir. Kullanıcı tarayıcı ayarlarından metni büyüttüğünde sayfa yapısı bozulmamalıdır. Bu nedenle sabit ölçüler yerine rem ve em gibi göreli birimler kullanmak daha sağlıklı bir yaklaşımdır.

Satır aralığı, paragraf genişliği ve buton boyutları da önemlidir. Metni büyüttüğünüzde satırlar birbirine giriyorsa site erişilebilir değildir. Sadece büyük yazılı bir sitedir.

6. Form alanlarını doğru etiketleyin

Formlar, işletme sitelerindeki en önemli dönüşüm noktalarındandır. Teklif talebi, iletişim, üyelik ve ödeme formları erişilebilir değilse ziyaretçiyle aranıza doğrudan engel koyarsınız.

Her alanın görünür bir etiketi olmalıdır. Placeholder metni tek başına etiket sayılmaz. Kullanıcı yazmaya başladığında placeholder kaybolur. Ekran okuyucular da alanın ne için olduğunu doğru şekilde anlayamayabilir.

İyi bir form yapısında şunlar bulunur:

• Görünür alan etiketi
• Zorunlu alanların açık işareti
• Anlaşılır hata mesajı
• Hatanın hangi alanda olduğunu belirten yönlendirme
• Klavyeyle mantıklı ilerleme sırası
• Göndermeden önce ve sonra anlaşılır geri bildirim

“Bilgileriniz hatalı” gibi genel mesajlar işe yaramaz. Kullanıcıya tam olarak neyi düzeltmesi gerektiğini söylemelisiniz.

7. Başlık hiyerarşisini bozmadan kullanın

Başlıklar yalnızca metni büyütmek için kullanılmamalıdır. H1, H2 ve H3 sırası sayfa içeriğini düzenler.

Bir sayfanın ana başlığı H1 olur. Ana bölümler H2, bu bölümlerin altındaki konular H3 ile sürer. Tasarımda daha küçük veya büyük görünmesi gereken başlıklar CSS ile ayarlanabilir. Semantik sıra bozulmamalıdır.

Doğru yapı şu şekilde ilerler:

1. Sayfanın tek bir H1 başlığı vardır.
2. Ana konu bölümleri H2 ile ayrılır.
3. H2 altındaki alt konular H3 olarak yazılır.
4. Başlıklar sırf görsel görünüm için atlanmaz.

Bu yapı özellikle uzun içeriklerde işe yarar. Ziyaretçi istediği bölüme daha hızlı ulaşır. Ekran okuyucu kullanan kişi de sayfadaki başlıklar arasında gezinebilir.

WordPress sitelerde erişilebilirlik nerede bozulur?

WordPress, erişilebilir bir site kurmak için kullanılabilir. Ancak WordPress kullanmak sitenin otomatik olarak erişilebilir olduğu anlamına gelmez.

Sorun çoğu zaman temada, eklentilerde veya içerik girilirken yapılan seçimlerde ortaya çıkar. Erişilebilirlik etiketi taşıyan bir tema bile sonradan eklenen ağır eklentiler, etiketsiz formlar ya da yanlış başlık kullanımı nedeniyle sorunlu hale gelebilir.

Özellikle page builder ile kurulan sitelerde şu durumlar sık görülür:

• Görsel olarak buton gibi duran ama anlamlı bağlantı yapısı olmayan öğeler
• Mobilde taşan veya üst üste binen metinler
• Klavye odağını göstermeyen özel tasarım bileşenleri
• Gereksiz açılır pencereler
• Başlık yerine büyük puntolu paragraf metinleri
• Performansı düşüren gereksiz kod ve eklenti yükü

Page builder sorun değildir. Sorun, page builder ile oluşturulan yapının test edilmeden özel geliştirme gibi sunulmasıdır.

Erişilebilirlik, sonradan bir “erişilebilirlik menüsü” ekleyerek çözülmez. Ziyaretçiye kontrast düğmesi sunmak yararlı olabilir. Ancak temel kod yapısı, form etiketleri veya klavye kullanımı bozuksa bu düğme sorunu ortadan kaldırmaz.

Özel WordPress geliştirme yaklaşımında erişilebilirlik; tasarım, içerik yapısı ve kodlama kararlarıyla birlikte ele alınmalıdır. Sayfa sonradan yamalanacak bir şablon olarak değil, işletmenin gerçek kullanıcı akışına göre kurulmalıdır.

Erişilebilirlik testi nasıl yapılır?

Otomatik araçlar iyi bir başlangıç sağlar, fakat tek başına yeterli değildir. Bir aracın yüksek puan vermesi, sitenin her kullanıcı için sorunsuz olduğu anlamına gelmez.

İlk kontrol için şu yöntemleri kullanabilirsiniz:

Google Lighthouse

Chrome geliştirici araçlarındaki Lighthouse, sayfanın erişilebilirlik sorunlarını tarar. Eksik form etiketleri, kontrast sorunları ve bazı yapısal hatalar için başlangıç listesi verir.

Bu rapor, işe nereden başlayabileceğinizi gösterir. Ancak rapordaki tüm maddeleri kapatmak, erişilebilirlik denetiminin tamamlandığı anlamına gelmez.

WAVE

WAVE, sayfadaki erişilebilirlik uyarılarını görsel olarak işaretlemeye yardımcı olur. Özellikle alt metin, başlık yapısı ve form öğelerinde sorunun sayfanın hangi bölümünde olduğunu anlamayı kolaylaştırır.

axe DevTools

axe DevTools, tarayıcı eklentisi olarak otomatik test sonuçları sunar. Teknik ekipler için tekrar eden sorunları tespit etmede yararlı olabilir.

Manuel klavye testi

Fare kullanmadan sitenizde gezinin. Ana menüyü, hizmet sayfalarını, iletişim formunu ve varsa ödeme akışını deneyin.

Bu testte yalnızca “ulaşıyor muyum?” sorusuna bakmayın. Odağın nerede olduğunu görebiliyor musunuz? Sıra mantıklı mı? Açılır pencereyi kapatabiliyor musunuz? Bunlar daha önemlidir.

Ekran okuyucu testi

Ekran okuyucu testi, sayfanın yardımcı teknoloji tarafından nasıl algılandığını gösterir. Başlıkların, bağlantıların, formların ve görsellerin gerçekten anlamlı olup olmadığı bu testte daha açık görülür.

Otomatik araçların bulamadığı birçok sorun gerçek kullanım sırasında ortaya çıkar. Bu nedenle erişilebilirlik testinde teknik tarama ile manuel kullanım birlikte gerekir.

Erişilebilirlik iyileştirmelerine nereden başlanmalı?

Mevcut sitenizde çok sayıda sorun varsa hepsini aynı gün çözmeye çalışmayın. Önce ziyaretçinin temel işlemleri tamamlamasını engelleyen sorunları ele alın.

Başlangıç sırası şu olabilir:

1. İletişim, teklif ve ödeme formlarını kontrol edin.
2. Klavyeyle ana menüden kritik sayfalara ulaşmayı deneyin.
3. Görsellerdeki eksik veya anlamsız alt metinleri düzeltin.
4. Metin ve buton kontrastlarını gözden geçirin.
5. H1, H2 ve H3 yapısını düzenleyin.
6. Video içeriklerine altyazı ekleyin.
7. Yeni içerik ve yeni sayfalar için erişilebilirlik kontrolünü yayın sürecine dahil edin.

En büyük hata, erişilebilirliği tek seferlik bir proje olarak görmektir. Yeni bir form, kampanya sayfası veya ürün görseli eklendiğinde aynı standartlar korunmalıdır.

Siteniz yıllar boyunca farklı eklentiler, tasarımlar ve içeriklerle büyüdüyse sorun birkaç alt metinden daha büyük olabilir. Böyle durumlarda yapıyı baştan değerlendirmek daha az zaman kaybettirir.

Sık sorulan sorular

Web sitesi erişilebilirliği Türkiye’de zorunlu mu?

Türkiye’de özel sektör için genel bir erişilebilirlik zorunluluğu olmadığı belirtiliyor. Kamu kurumlarının web siteleri ise erişilebilirlik standartları çerçevesinde değerlendirilir. Yurt dışına hizmet veren işletmeler için farklı ülkelerdeki düzenlemeler de önem taşıyabilir.

WCAG uyumlu site yapmak pahalı mı?

Sıfırdan kurulan bir sitede erişilebilirlik gereksinimlerini baştan planlamak daha kolaydır. Mevcut bir sitede yapılacak işin kapsamı ise tema, form yapısı, içerik miktarı ve teknik sorunlara göre değişir.

Erişilebilirlik SEO’yu etkiler mi?

Erişilebilirlik SEO’nun yerini doğrudan tutmaz. Ancak alt metin, anlamlı HTML, başlık hiyerarşisi ve açık bağlantı metinleri, içeriğin kullanıcılar ve arama motorları tarafından daha iyi anlaşılmasına yardımcı olur.

WordPress sitem zaten erişilebilir değil mi?

Hayır. WordPress altyapısı erişilebilir bir site için uygun olabilir, ancak kullanılan tema, eklentiler, içerik yapısı ve özel tasarım kararları sonucu doğrudan belirler.

Erişilebilirlik testi ücretsiz yapılabilir mi?

Evet. Google Lighthouse, WAVE ve axe DevTools gibi araçlar ilk kontrol için kullanılabilir. Ancak otomatik testin yanında klavye ve ekran okuyucuyla manuel test de yapılmalıdır.

Erişilebilirlik menüsü eklemek yeterli mi?

Hayır. Font büyütme veya kontrast değiştirme seçenekleri yararlı olabilir. Ancak etiketsiz formları, bozuk başlık sırasını ya da klavyeyle erişilemeyen menüleri tek başına çözmez.

Erişilebilirlik, sitenin temel kalitesidir

Web sitesi erişilebilirliği, büyük bir yeniden tasarım olmadan da iyileştirilmeye başlanabilir. Alt metinleri düzeltmek, form etiketleri eklemek, kontrastı iyileştirmek ve klavyeyle gezinmeyi test etmek somut ilk adımlardır.

Kalıcı çözüm, erişilebilirliği tasarım ve geliştirme sürecinin parçası yapmaktır. Ziyaretçi sitenize hangi cihazla, hangi koşulda veya hangi yardımcı teknolojiyle gelirse gelsin temel işlemleri tamamlayabilmelidir.