Web sitesinde erişilebilirlik testi nasıl yapılır?

Web sitesinde erişilebilirlik testi; klavye kullanımı, ekran okuyucu uyumu, renk kontrastı, alternatif metinler, formlar ve mobil kullanımın birlikte incelenmesiyle yapılır.

Tek bir otomatik tarama aracı bütün sorunları bulamaz. Erişilebilirlik kontrolü, araç taramasıyla manuel kullanıcı deneyimi testinin birlikte yürütülmesini gerektirir. 2026'da Türkiye'de yayımlanmaya başlayan yıllık araştırmalar ve kontrol listeleri, bu konunun düzenli denetim ihtiyacını görünür kılıyor.

Bu testin amacı yalnızca teknik hata sayısını azaltmak değildir. Bir ziyaretçinin sayfayı klavyesiyle açabilmesi, formu doldurabilmesi, hata mesajını anlayabilmesi ve içerikte kaybolmaması ölçülür.

Erişilebilirlik testi hangi alanları kapsar?

Erişilebilirlik testi, web sitesinin farklı engel grupları tarafından kullanılabilir olup olmadığını ölçer.

Temel test alanları; klavye ile gezinme, odak sırası, başlık hiyerarşisi, bağlantı metinleri, alternatif metin, renk kontrastı ve form etiketleridir. Buna ekran okuyucu davranışı, yakınlaştırma, mobil yön değişimi ve hareketli içerikler de eklenir.

Bir sayfa fareyle sorunsuz çalışsa bile erişilebilir olmayabilir. Örneğin açılır menü yalnızca fare üzerine gelince açılıyorsa klavye kullanan ziyaretçi menüye ulaşamaz. Görseldeki bilgi yalnızca renkle anlatılıyorsa renk körlüğü olan kullanıcı anlamı kaçırabilir.

Test kapsamını belirlemek için önce kritik sayfaları seçin. Ana sayfa, iletişim, üyelik, sepet, ödeme, hizmet detayları ve kampanya sayfaları başlangıç için yeterlidir. Her şablondan en az bir örnek seçmek, tekrar eden hataları görmeyi kolaylaştırır.

Bir içerik sayfasındaki hata, aynı şablonu kullanan 50 sayfada tekrarlanabilir. Bu nedenle sayfa sayısını değil, şablon ve kullanıcı akışını temel alın. E-ticaret sitelerinde ürün arama, filtreleme, sepete ekleme ve ödeme akışı ayrı ayrı incelenmelidir.

Otomatik erişilebilirlik araçları yeterli olur mu?

Otomatik erişilebilirlik araçları ilk tarama için yeterlidir, ancak tek başına kesin sonuç vermez.

Tarama araçları eksik alternatif metinleri, düşük kontrastı, bazı ARIA hatalarını ve hatalı başlık yapılarını yakalayabilir. Tarama sonucunda 20 hata görülmesi, sitenin yalnızca 20 erişilebilirlik sorunu olduğu anlamına gelmez.

Otomatik araçlar görselin gerçekten ne anlattığını anlayamaz. Alt metin alanı dolu olsa bile metin anlamsız olabilir. “Görsel1” teknik olarak boş bir alan değildir, fakat kullanıcıya bilgi sağlamaz.

Aynı durum klavye kullanımı ve form akışında da görülür. Araç, bir düğmenin kodda bulunduğunu saptayabilir; düğmeye klavye ile ulaşmanın mantıklı olup olmadığını her zaman değerlendiremez. Bu nedenle her tarama sonucunu manuel olarak doğrulayın.

Pratik yöntem, önce otomatik tarama yapıp ardından kritik akışları elle test etmektir. Tarama aracı olarak kullandığınız çözümün hangi WCAG kriterlerini denetlediğini kaydedin. Sonuçları tarih, URL, hata türü, önem seviyesi ve düzeltme durumuyla takip edin.

Web sitesi klavye ile nasıl test edilir?

Web sitesi klavye testi, fareyi tamamen bırakıp yalnızca Tab, Shift+Tab, Enter, Boşluk ve ok tuşlarıyla gezinerek yapılır.

Testi gizli sekmede veya temiz bir tarayıcı oturumunda başlatın. İmlecin nerede olduğunu görebilmek için görünür odak göstergesini kontrol edin. Her Tab hareketinde hangi öğenin seçildiği açıkça anlaşılmalıdır.

Önce ana içeriğe geçiş bağlantısını arayın. Bu bağlantı yoksa ziyaretçi her sayfada menüdeki bütün öğeleri tekrar geçmek zorunda kalabilir. Ardından logo, menü, arama kutusu, ana içerik, formlar ve alt bilgi sırasını inceleyin.

Odak sırası görsel ve işlevsel sırayla uyumlu olmalıdır. Sayfanın altında görünen bir ödeme düğmesine, klavye kullanıcısı içerik tamamlanmadan önce ulaşıyorsa sıralama bozulmuştur.

Menü, modal pencere, açılır liste ve çerez bildirimi de ayrıca test edilmelidir. Bir modal açıldığında odak modal içine taşınmalı, kapatıldığında önceki öğeye dönmelidir. Modal arka plandaki öğelere geçişe izin veriyorsa kullanıcı sayfada kaybolabilir.

Yanlış: Odak göstergesini kaldırarak tasarımı sadeleştirmek. Doğru: Odak göstergesini görünür bırakıp renk ve kalınlığını arka plandan ayırmak.

• Sayfada fare kullanmadan tüm etkileşimli öğelere ulaşılabiliyor mu?
• Tab sırası içerik ve işlem sırasıyla uyumlu mu?
• Odak göstergesi her aşamada görünür mü?
• Menüler ve pencereler klavye ile açılıp kapanıyor mu?
• Escape tuşu açık pencereyi kapatıyor mu?
• Odak, pencere kapandıktan sonra mantıklı konuma dönüyor mu?

Ekran okuyucu ile web sitesi nasıl kontrol edilir?

Ekran okuyucu testi, sayfanın görsel düzen yerine anlamlı bir içerik ve etkileşim sırası sunup sunmadığını gösterir.

NVDA, VoiceOver veya TalkBack gibi araçlardan biriyle kritik sayfaları açın. Test sırasında önce sayfa başlığını, ardından ana başlıkları ve bağlantıları listeleyin. Kullanıcı sayfanın amacını birkaç saniye içinde anlayabiliyor mu?

Başlıklar görsel boyuta göre değil, içerik hiyerarşisine göre kullanılmalıdır. Sayfada bir ana başlık, ardından ilgili alt başlıklar bulunmalıdır. Başlık etiketi yalnızca yazıyı büyütmek için kullanılırsa ekran okuyucu kullanıcıları sayfanın yapısını yanlış algılar.

Bağlantı metinleri de tek başına anlam taşımalıdır. Aynı sayfada beş kez “Tıklayın” bağlantısı bulunması, bağlantı listesini kullanan ziyaretçiye bilgi vermez. “Kargo ve teslimat koşullarını inceleyin” gibi açıklayıcı metinler daha işlevseldir.

Görselleri içerik değerine göre sınıflandırın. Süs amaçlı görsellerde boş alt metin kullanılabilir. Bilgi taşıyan bir grafikte ana bulgu metinle açıklanmalıdır. Ürün görselinde ürün adı, renk veya kritik özellik gerekiyorsa alt metne eklenmelidir.

İkon düğmelerinde erişilebilir ad bulunmalıdır. Yalnızca büyüteç simgesi olan arama düğmesi, ekran okuyucuda “arama” olarak duyulmalıdır. Bu ad görsel görünümden değil, düğmenin HTML etiketi veya uygun ARIA tanımından sağlanabilir.

Renk kontrastı ve yakınlaştırma testi nasıl yapılır?

Renk kontrastı testi, metin ile arka plan arasındaki okunabilirlik farkını ölçerek yapılır.

Normal metinlerde WCAG ölçütlerinde kullanılan kontrast oranı en az 4,5:1, büyük metinlerde ise en az 3:1 seviyesidir. Bu değerleri göz kararıyla tahmin etmeyin; kontrast ölçüm aracı kullanın.

Kontrast yalnızca gövde metninde kontrol edilmez. Menü bağlantıları, yer tutucu metinler, düğme yazıları, hata mesajları, ikonlar ve devre dışı olmayan form kenarlıkları da incelenmelidir. Açık gri yer tutucu metin, formun kullanılmasını zorlaştırabilir.

Bilgi yalnızca renkle aktarılmamalıdır. Zorunlu alanları sadece kırmızı renkle işaretlemek yerine yıldız, açıklama veya metin kullanın. Grafiklerde renklerin yanında desen, etiket ya da doğrudan değer gösterimi ekleyin.

Yakınlaştırma testinde tarayıcıyı yüzde 200 seviyesine çıkarın. Metin okunabilir kalmalı, içerik yatay kaymaya zorlanmamalı ve düğmeler erişilebilirliğini kaybetmemelidir. Mobil görünümde cihaz yönü değiştiğinde içerik veya işlev kaybolmamalıdır.

Yakınlaştırma testi her zaman sorunu tek başına açıklamaz. Taşan bir tablo için yatay kaydırma gerekebilir; bu, tüm sayfanın yatay kaymasına göre daha kontrollü bir çözümdür. Kritik bilgiyi ekran dışına iten düzen ise düzeltilmelidir.

Formlar ve hata mesajları nasıl test edilir?

Form erişilebilirliği, her alanın anlaşılır etikete sahip olması ve hataların kullanıcıya açıkça bildirilmesiyle test edilir.

Formu önce klavye ile doldurun. İmlecin hangi alanda olduğunu görün, alanların sırasını izleyin ve yer tutucu metnin etiket yerine geçip geçmediğini kontrol edin. Yer tutucu silindiğinde alanın amacı hâlâ anlaşılmalıdır.

Her alanın kalıcı bir etiketi olmalıdır. “Ad Soyad”, “E-posta adresi” ve “Telefon numarası” gibi etiketler alanla programatik olarak ilişkilendirilmelidir. Sadece üstte duran görsel metin, kod bağlantısı kurulmamışsa yeterli değildir.

Formu boş göndererek hata durumunu test edin. Hatalı alanın hangisi olduğu, sorunun ne olduğu ve nasıl düzeltileceği açıkça yazılmalıdır. “Geçersiz giriş” yerine “E-posta adresini [email protected] biçiminde yazın” daha kullanılabilirdir.

Hata mesajları yalnızca kırmızı renkle gösterilmemelidir. Ekran okuyucu kullanıcıları için mesajın ilgili alanla ilişkilendirilmesi gerekir. Sayfanın üstünde özet hata listesi varsa her hata, ilgili alana bağlantı vermelidir.

Başarılı gönderim durumunu da test edin. Kullanıcı işlemin tamamlandığını anlamalıdır. Sayfa sessizce yenileniyor veya yalnızca küçük bir renk değişikliği oluyorsa işlem sonucu fark edilmeyebilir.

Şifre alanlarında gösterme düğmesi, tarih seçici, telefon maskelemesi ve otomatik tamamlama özelliklerini ayrıca deneyin. Bu yardımcı işlevler klavye ve ekran okuyucu ile çalışmıyorsa form erişilebilirliği bozulur.

Mobil ve dinamik içeriklerde erişilebilirlik nasıl ölçülür?

Mobil erişilebilirlik testi, küçük ekran, dokunma, ekran okuyucu ve hareket değişimlerinin birlikte incelenmesiyle yapılır.

Sayfayı farklı ekran genişliklerinde ve dikey-yatay yönlerde açın. Menünün açılması, arama alanının kullanılması, kartların okunması ve form düğmelerinin görünmesi kontrol edilmelidir. Yakınlaştırma sırasında kritik düğmeler ekranın dışında kalmamalıdır.

Dokunma hedefleri birbirine çok yakın olmamalıdır. Yanlış düğmeye basma ihtimali özellikle sepet, silme, onay ve ödeme adımlarında risk yaratır. Kullanıcıdan milimetrik dokunuş bekleyen arayüzler, motor beceri kısıtları olan kişiler için sorun çıkarabilir.

Hareketli içerikleri de test edin. Otomatik kayan kampanya alanında duraklatma veya kontrol seçeneği bulunmalıdır. Yanıp sönen içerikler nöbet tetikleme riski oluşturabilecek yoğunlukta olmamalıdır.

Sayfa içeriği sonradan JavaScript ile yükleniyorsa yeni içeriğin ekran okuyucuya duyurulup duyurulmadığını inceleyin. Filtre sonucu değişiyor, ancak kullanıcıya hiçbir bilgi verilmiyorsa işlem gerçekleşse bile durum anlaşılmaz.

Dinamik içerik testinde sayfa hızını da göz ardı etmeyin. Yavaş etkileşim, erişilebilirlik deneyimini doğrudan zorlaştırabilir. Etkileşim gecikmelerini incelemek için INP nedir ve web sitesinde nasıl düzeltilir rehberindeki ölçüm yaklaşımından yararlanabilirsiniz.

Görsel optimizasyonu da dolaylı etki yaratır. Ancak AVIF kullanımı, görselin alternatif metnini veya içerik açıklamasını ortadan kaldırmaz. Format seçimi için web sitesinde AVIF görsel kullanımı konusundaki teknik ayrımı ayrıca değerlendirin.

Erişilebilirlik test sonuçları nasıl raporlanır?

Erişilebilirlik test sonuçları, her sorunu URL, adım, etki ve düzeltme önerisiyle kaydederek raporlanır.

Bir hata raporunda yalnızca “kontrast düşük” yazmayın. Sorunun görüldüğü sayfayı, ilgili öğeyi, ölçülen oranı, beklenen davranışı ve ekran görüntüsünü ekleyin. Böylece geliştirici aynı problemi yeniden üretip doğrulayabilir.

Önceliklendirme için dört alan kullanabilirsiniz: kullanıcı etkisi, kritik işlem üzerindeki etkisi, kaç şablonda tekrarlandığı ve düzeltme maliyeti. Ödeme düğmesinin klavyeyle çalışmaması, ikincil bir blog bağlantısındaki küçük kontrast farkından önce ele alınmalıdır.

Her sorun için sorumlu kişi, hedef tarih, durum ve yeniden test sonucu tutulmalıdır. Düzeltme yapıldığında aynı adımları tekrar uygulayın. Kod değiştiği için sorun çözülmüş görünse bile başka ekran boyutunda veya başka tarayıcıda yeni hata oluşabilir.

Raporu yalnızca teknik ekibe vermeyin. İçerik ekibi alternatif metin ve bağlantı metinlerinden, tasarım ekibi kontrast ve odak göstergesinden, ürün ekibi form akışından sorumlu olabilir.

Testi düzenli bir döngüye bağlamak için kritik sayfaları her sürümde kontrol edin. Daha geniş kapsamlı taramayı aylık veya büyük tasarım değişikliklerinden sonra yapın. Yeni içerik yayınlandığında başlık, bağlantı ve görsel kontrollerini editoryal sürece ekleyin.

Erişilebilirlik testi için uygulanabilir kontrol sırası nedir?

Erişilebilirlik testi, kritik kullanıcı akışlarını belirleyip otomatik, manuel ve yeniden test aşamalarını sıraya koyarak uygulanır.

1. Ana sayfa, iletişim, üyelik, arama, sepet veya ödeme gibi kritik sayfaları seçin.
2. Sayfaları otomatik araçla tarayın ve bulunan sorunları URL bazında kaydedin.
3. Fareyi bırakıp klavye ile menü, bağlantı, form ve pencereleri test edin.
4. Ekran okuyucu ile başlıkları, bağlantıları, görselleri ve durum mesajlarını dinleyin.
5. Kontrastı ölçün, yüzde 200 yakınlaştırmayı ve mobil yön değişimini deneyin.
6. Formları boş, hatalı ve doğru verilerle gönderin; hata ve başarı mesajlarını kontrol edin.
7. Sorunları kullanıcı etkisine ve kritik işlem riskine göre önceliklendirin.
8. Düzeltmeleri tamamladıktan sonra aynı adımlarla yeniden test yapın.

Bu sıra, testin yalnızca araç çıktısına bağlı kalmasını önler. Her adımda kanıt toplayın; ekran görüntüsü, tarama sonucu, kullanılan cihaz ve tarayıcı bilgisi raporun güvenilirliğini artırır.

Erişilebilirlik kontrolü tek seferlik bir proje olarak görülmemelidir. Yeni tasarım bileşeni, form alanı, açılır pencere veya kampanya modülü eklendiğinde ilgili testler tekrarlanmalıdır.

E-ticaret sitelerinde yasal yükümlülükleri ayrıca incelemek gerekir. E-ticaret siteleri için erişilebilirlik zorunlu mu sorusuna verilen cevap, sitenin faaliyet alanına ve ilgili düzenlemelere göre değerlendirilmelidir.

Test sonuçlarını bir erişilebilirlik beyanı veya iç kontrol dokümanında saklamak da yararlıdır. Ancak beyan, gerçek testin yerini tutmaz. Kullanıcıların yaşayabileceği sorunları görmek için sayfayı farklı yöntemlerle gerçekten kullanmak gerekir.