Web sitesi erişilebilirliği nasıl test edilir? Ücretsiz araçlar

Sık duyduğumuz bir hikâye: Biri Lighthouse'u çalıştırıyor, erişilebilirlik için yeşil bir 100 alıyor ve işine dönüyor. Bir hafta sonra bir müşteri, kart formuna klavyeyle ulaşılamadığı için ödeme yapamadığını yazıyor. İkisi de doğru. Otomatik kontrol geçti, ama site gerçek bir insanı yine de yarı yolda bıraktı.

Bu rehber, küçük bir bütçeyle doğru dürüst test yapmanın yolunu gösteriyor: hangi ücretsiz araçları çalıştırmalı, 15 dakikalık bir elle kontrol rutini, ekran okuyucuyla ilk deneme ve ne zaman ücretli bir denetim yaptırmalı.

Otomatik bir denetim aracı sitemin erişilebilir olup olmadığını söyleyebilir mi?

Hayır. Otomatik denetim araçları bazı sorunları hızla bulur, ama erişilebilirlikle ilgili pek çok soruyu ancak bir insan yanıtlayabilir. Birleşik Krallık Hükümeti Dijital Hizmeti (GDS), bilinen 143 hatanın bulunduğu bir sayfada 10 aracı test ettiğinde en iyisi bunların %41'ini buldu. W3C bunu açıkça söylüyor: Değerlendirme araçları “erişilebilirliği belirleyemez, yalnızca buna yardımcı olabilir.”

GDS testi (yeni sekmede açılır) Şubat 2017 tarihli ve %41'lik sonuç (Asqatasun'a ait) aracın elle kontrol için verdiği uyarıları da içeriyordu. Araçlar o zamandan beri gelişti, ama açığın nedeni aynı. Yazılım bir görselin alternatif metni olmadığını anlayabilir. Mavi bir takım elbise fotoğrafı için “kırmızı elbise” açıklamasının yanlış olduğunu ya da odak sıranızın mantıklı olup olmadığını anlayamaz.

Yani bir denetim aracını kapsamlı bir bina etüdü değil, bir duman dedektörü olarak görün. Yine de çalıştırmaya değer: WebAIM Million 2026 (yeni sekmede açılır), en popüler bir milyon ana sayfanın %95,9'unda tespit edilebilir hatalar buldu; yani çoğu sitede kolayca düzeltilebilecek sorunlar sizi bekliyor. W3C'nin araç seçme rehberinin (yeni sekmede açılır) dediği gibi: “İnsan muhakemesi gereklidir.”

Hangi ücretsiz erişilebilirlik test araçlarını kullanmalıyım?

Bir ya da iki otomatik denetim aracı, bir kontrast denetleyicisi ve bir ekran okuyucu kullanın. Araçlar farklı kurallar uygular ve sonuçları farklı biçimlerde raporlar; bu yüzden iki araç genellikle tek bir araçtan daha fazlasını yakalar. Aşağıdaki araçların hepsinin ücretsiz bir sürümü var. Adlar, özellikler ve fiyatlar değiştiği için birine güvenmeden önce güncel koşullarına bakın.

15 dakikada elle neleri kontrol edebilirim?

Epey şeyi. W3C'nin Easy Checks (yeni sekmede açılır) (Kolay Kontroller) belgesi sayfa başlıklarını, alternatif metinleri, başlıkları, kontrastı, atlama bağlantılarını, görünür klavye odağını, sayfa dilini, yakınlaştırmayı, altyazıları ve form etiketlerini kapsıyor. Bir ürün sayfası ya da rezervasyon formunuz gibi önemli bir sayfa seçin ve her kontrole bir iki dakika ayırın. Hiçbir denetim aracının raporlamadığı şeyler bulacaksınız.

W3C bu kontrollerin “yalnızca birkaç erişilebilirlik sorununu kapsadığını” söylüyor; yani tam bir değerlendirme değiller. Yine de harcayabileceğiniz en verimli çeyrek saat bu:

1. Sayfa başlığı (1 dakika). Tarayıcı sekmesi her yerde “Ana sayfa” yazmak yerine sayfanın ne olduğunu söylüyor mu, örneğin “Masa ayırtın | Ayşe'nin Mutfağı”?
2. Görseller (2 dakika). Alternatif metinleri WAVE veya benzeri bir araçla görünür hâle getirin. Doğru mu? Süs amaçlı görseller atlanıyor mu?
3. Başlıklar (2 dakika). Başlıkları listeleyin ve tek başlarına okuyun. İçindekiler tablosu gibi işliyorlar mı?
4. Kontrast (2 dakika). Gövde metnini, küçük gri metinleri, düğme metinlerini ve görsel üzerindeki metinleri kontrol edin.
5. Klavye (4 dakika). Fareyi bir kenara bırakın ve sayfada Tab tuşuyla ilerleyin (bir sonraki bölüme bakın).
6. Yakınlaştırma (2 dakika). %200'de, sonra %400'de her şeyi hâlâ okuyabiliyor ve menüyü yana kaydırmadan kullanabiliyor musunuz?
7. Formlar ve dil (2 dakika). Her alanın etiketine tıklayın; iyi yapılmış bir formda bu, imleci alana yerleştirir. Aracın raporunda eksik sayfa dili uyarısı olup olmadığına bakın.

Klavyeyle nasıl test ederim?

Fareyi kaldırın. İleri gitmek için Tab, geri gitmek için Shift+Tab, bağlantıları açmak için Enter, düğmelere basmak için boşluk tuşu ya da Enter, menülerin ve radyo düğmelerinin içinde de ok tuşlarını kullanın. Her etkileşimli öğeye ulaşılabilmeli, nerede olduğunuzu her zaman görebilmeli ve hiçbir yerde takılıp kalmamalısınız.

Mac'te Safari, Gelişmiş ayarlarında Tab tuşuyla web sayfasındaki her öğenin vurgulanmasını sağlayan seçeneği (“Press Tab to highlight each item on a webpage”) açana kadar Tab'a bastığınızda bağlantıları atlar. Ardından şunları kontrol edin:

• Nerede olduğunuzu her zaman görebiliyor musunuz? Odak çerçevesi kaybolursa klavye kullanıcısı yolunu kaybeder.
• Sıra mantıklı mı? Odak, okuma sırasını izlemeli.
• Bir şey odağı örtüyor mu? Odaklanan öğeyi gizleyen sabit bir başlık veya çerez bildirimi, WCAG 2.2'nin Odak Gizlenmez ölçütünü karşılamaz.
• Yeniden çıkabiliyor musunuz? Her menüyü, açılır pencereyi ve tarih seçiciyi açın, sonra çıkmayı deneyin. Escape tuşu diyalogları kapatmalı.
• Akışın tamamı çalışıyor mu? Fare olmadan bir ürün ekleyin, adedi değiştirin, bir indirim kodu uygulayın ve ödemeye kadar ilerleyin.

Her hatayı kesin bir dille yazın: “Ürün sayfasındaki beden seçici Enter veya boşluk tuşuyla açılmıyor” notu, “klavye çalışmıyor” notundan çok daha hızlı düzeltilir.

Ekran okuyucuyla ilk kez nasıl test ederim?

Cihazınızda zaten bulunan ekran okuyucuyla ya da Windows'ta NVDA ile başlayın ve tek bir sayfayı dinleyin. Onu bir uzman gibi kullanmaya çalışmıyorsunuz. Başlıkların, bağlantıların, düğmelerin, görsellerin ve form alanlarının anlamlı adlarla duyurulduğunu ve önemli hiçbir şeyin sessiz kalmadığını kontrol ediyorsunuz.

• Mac: Command+F5 VoiceOver'ı açıp kapatır; Control+Option+U ise başlıkların, bağlantıların ve form kontrollerinin listesi olan rotoru açar.
• Windows: NVDA'da başlıklar arasında atlamak için H'ye, bağlantıları ve başlıkları listelemek için Insert+F7'ye basın.
• Telefon: VoiceOver'ı (iPhone) veya TalkBack'i (Android) açın ve öğeden öğeye geçmek için sağa kaydırın. Önce onu nasıl kapatacağınızı öğrenin.

En önemli şeylere kulak verin. WebAIM'in 2024 ekran okuyucu anketinde (yeni sekmede açılır) katılımcıların %71,6'sı uzun bir sayfada önce başlıklar üzerinden gezindiğini söyledi; bu yüzden oradan başlayın. Sonra bağlantı listesini açın: “Devamını oku” adlı beş bağlantı kimseye bir şey anlatmaz. “Sepete ekle, lacivert kazak” kullanışlı bir düğmedir; “düğme” değildir. Son olarak bir form doldurun ve her alanın ve her hatanın sesli okunduğunu kontrol edin.

Vardığınız sonuçlarda mütevazı olun. Size bozuk geliyorsa muhtemelen bozuktur; kulağa iyi geliyorsa bu bir kanıt değildir. Deneyimli kullanıcıların gerçekte nasıl çalıştığını öğrenmek için engelli kişilerin interneti nasıl kullandığı yazımızı okuyun.

Yakınlaştırmayı, yeniden akışı ve metin aralığını nasıl kontrol ederim?

Tarayıcınızı %200'e yakınlaştırın ve metnin kesilmeden ya da üst üste binmeden büyüdüğünü kontrol edin. Ardından yeniden akışı (reflow) test edin: 1.280 piksel genişliğindeki bir pencerede %400 yakınlaştırmada içerik yana kaydırma gerektirmeden sığmalı. Son olarak harfler, kelimeler, satırlar ve paragraflar arasındaki aralığı artırın ve hiçbir şeyin bozulmadığını ya da kaybolmadığını kontrol edin.

Bunlar WCAG'nin Metni Yeniden Boyutlandırma (1.4.4), Yeniden Akış (1.4.10) (yeni sekmede açılır) ve Metin Aralığı (1.4.12) (yeni sekmede açılır) ölçütlerine karşılık gelir. Yeniden Akış 320 CSS piksellik bir genişlik kullanır; W3C bunun “%400 yakınlaştırmada 1.280 CSS piksel genişliğindeki bir başlangıç görüntü alanına eşdeğer” olduğunu belirtiyor. Metin Aralığı ise okuyucu satır yüksekliğini yazı boyutunun 1,5 katına, paragraf aralığını 2 katına, harf aralığını 0,12 katına ve kelime aralığını 0,16 katına ayarladığında hiçbir şeyin kaybolmamasını ister.

Yer imi olarak kaydedilen küçük bir betik olan metin aralığı bookmarklet'i, dört değeri tek tıklamayla uygular. Düğmelerden taşan metinlere ve kenarda kesilen etiketlere bakın. %400 yakınlaştırmada bir dizüstü bilgisayar kabaca küçük bir telefonun gösterdiğini gösterir; bu yüzden iyi yapılmış duyarlı (responsive) bir site bu testlerin çoğunu zaten geçer.

Formları, hataları ve ödeme adımını nasıl kontrol ederim?

Her önemli formu üç kez doldurun: bir kez doğru, bir kez tüm alanlar boş, bir kez de bilerek hatalı. Her alanın görünür bir etiketi olmalı, her hata kendi alanının yanında kelimelerle açıklanmalı ve şifre ile doğrulama kodu alanlarına yapıştırma yapabilmelisiniz.

• Hatalar. Kırmızı renkte “Geçersiz giriş” yetmez. Alanın yanında “Son kullanma tarihini AA/YY biçiminde girin” yazması ise yeter. Form gönderildikten sonra odak hata özetine ya da ilk hatalı alana geçmeli.
• Girişler ve kodlar. WCAG 2.2'nin Erişilebilir Kimlik Doğrulama ölçütüne (yeni sekmede açılır) göre, başka bir giriş yolu yoksa yapıştırmayı veya şifre yöneticilerini engellemek ölçütü karşılamaz.
• CAPTCHA'lar ve süre sınırları. WebAIM'in anketinde ekran okuyucu kullanıcıları CAPTCHA'yı internetteki en sorunlu unsur olarak sıraladı. Erişilebilir bir alternatif olup olmadığını ve süre sınırlarının uzatılabildiğini kontrol edin.

Web sitesi erişilebilirlik kontrol listemiz, çerez bildirimleri ve açılır pencereler dahil mağazalar için daha kapsamlı bir liste sunuyor.

Profesyonel bir erişilebilirlik denetimi neleri kapsar ve ne zaman gerekir?

Erişilebilirlik denetimi, bir uzmanın belirli bir standarda, genellikle WCAG 2.1 veya 2.2 AA seviyesine göre yaptığı yapılandırılmış bir incelemedir. Otomatik taramaları, temel şablonlarınızın ve akışlarınızın elle ve yardımcı teknolojilerle test edilmesiyle birleştirir ve öncelik sırasına konmuş bir raporla sonuçlanır. Yasa size uygulanıyorsa, büyük bir lansmandan önce ya da müşterileriniz kanıt istediğinde bir denetime ihtiyacınız olur.

Bir fiyatta anlaşmadan önce şunları sorun:

• Hangi standarda, hangi sürüme ve hangi seviyeye göre test edeceksiniz?
• Hangi şablonlar ve akışlar kapsamda? Bir mağaza için: ana sayfa, kategori, ürün, sepet, ödeme, hesap sayfaları ve formlar.
• Ekran okuyucular, klavye ve yakınlaştırmayla elle test yapıyor musunuz; hangi tarayıcılarda ve cihazlarda?
• Rapor sorunları önem derecesine göre sıralıyor, yerlerini gösteriyor ve çözüm öneriyor mu?
• Yeniden test fiyata dahil mi?

Fiyatlar sağlayıcıya, ülkeye ve kapsama göre büyük farklar gösterir; bu yüzden neyin dahil olduğunu karşılaştırın. Avrupa Erişilebilirlik Yasası sizi kapsıyorsa, bir denetim kamuya açık beyanınızı da destekler; kimlerin kapsamda olduğunu EAA rehberimiz açıklıyor.

Neden engelli kullanıcılarla test etmeli?

Çünkü bir standardı karşılamak ile kullanımı kolay olmak aynı şey değil. Bir ödeme süreci tüm WCAG ölçütlerini geçip yine de bir ekran okuyucu kullanıcısının yirmi dakikasını alabilir. W3C, engelli kullanıcılarla değerlendirme yapmanın “yalnızca uygunluk değerlendirmesiyle keşfedilemeyen kullanılabilirlik sorunlarını ortaya çıkardığını” söylüyor; ayrıca ekibinize insanların siteyi gerçekte nasıl kullandığını gösteriyor.

Bir laboratuvara ihtiyacınız yok. En önemli göreviniz, örneğin bir ürün bulup ödeme yapmak üzerine yapılacak birkaç oturum, yeni bir tarama turundan daha fazlasını öğretir. Katılımcıları engelli örgütleri, araştırma ajansları ya da kendi müşterileriniz aracılığıyla bulun ve zamanları için ödeme yapın. Kendi cihazlarını ve ayarlarını kullanmalarına izin verin. W3C'nin kullanıcıları değerlendirmeye dahil etme (yeni sekmede açılır) rehberi işin pratik tarafını ele alıyor.

Sonuçlarla ne yapmalıyım?

Sorunları insanları ne kadar engellediklerine ve nerede ortaya çıktıklarına göre sıralayın, sitenin kendi kodunda ve içeriğinde düzeltin, yeniden test edin ve hâlâ açık olanları kayda geçirin. Ödeme adımındaki etiketsiz bir alan, alt bilgideki küçük bir kontrast kusurundan daha önemlidir; ortak bir şablonda yapılan düzeltme de o şablonu kullanan her sayfayı onarır.

1. Önceliklendirin. Önce temel akışlardaki (ödeme, rezervasyon, kayıt) engelleyiciler, sonra ortak şablonlar, en son tekil sayfalar.
2. Kaynağında düzeltin. Yalnızca belirtiyi değil, temayı, bileşeni veya içeriği değiştirin.
3. Yeniden test edin. Aynı kontrolleri araçlarla olduğu kadar elle de tekrarlayın.
4. Belgeleyin. Bilinen sorunları tarihleriyle birlikte erişilebilirlik beyanınızda listeleyin. Daha yeni ölçütleri WCAG 2.2 rehberimiz açıklıyor.
5. Tekrarlayın. Her sürüme bir klavye kontrolü ve bir tarama ekleyin.

Bizimki dahil bir erişilebilirlik widget'ı kullanıyorsanız, testi widget kapalıyken yapın. SiteAccessible gibi bir panel ziyaretçilere sayfayı ayarlamanın ek yollarını sunar, ama WCAG sayfanın varsayılan hâliyle çalışıp çalışmadığına bakar. Bazı denetim programları overlay betiği çalışan sayfaları değerlendirmez; bu yüzden önce denetçinize danışın.