Erişilebilirlik test araçları: axe, Lighthouse ve WAVE ne bulur?

Kısaca

Otomatik erişilebilirlik aracı, kodda bir kurala aykırı duran şeyi bulur. Bir şeyin kullanıcı için anlamlı olup olmadığını bilemez. Bu farkı bilirseniz araçtan daha çok yararlanırsınız.

• axe açık kaynaklı bir test motorudur. Kendi test düzeninizde kod olarak çalışır.
• Lighthouse Chrome geliştirici araçlarından çalıştırılabilir ve sayfaya bir erişilebilirlik puanı verir.
• WAVE sorunları sayfanın üstüne ikonlarla çizer.

Üçü de başlangıç içindir. Asıl denetimi nasıl yaptığımı erişilebilirlik denetimi rehberinde anlattım. Bu sayfa yalnızca araçlarla ilgili.

Otomatik test aracı ne yapar, ne yapamaz?

Araç, sayfanın kodunu ve tarayıcının ondan kurduğu yapıyı okur. Sonra her öğeyi bir kural listesine karşı dener. Bir görselde alt yoksa, bir butonun adı boşsa ya da metin ile zemin arasındaki oran düşükse bunu bildirir.

W3C'nin Web Erişilebilirliği Girişimi (WAI) sınırı açıkça çizer. Araç seçme rehberine göre araçlar erişilebilirliği belirleyemez, yalnızca buna yardımcı olur. Aynı rehber, araçların bazen yanlış ya da yanıltıcı sonuç verebildiğini de yazar.

WAI'nin değerlendirme sayfası da aynı şeyi söyler: hiçbir araç tek başına bir sitenin standartlara uyup uymadığını belirleyemez. Bunun için konuyu bilen bir insanın değerlendirmesi gerekir.

Kurallar WCAG başarı kriterlerine bağlıdır. Ama her kriter koddan okunacak türden değildir. "Bu alt metin görselin işini görüyor mu?" sorusunun cevabı kodda yazmaz.

axe: kural motoru

axe-core, web sayfaları için açık kaynaklı bir erişilebilirlik test motorudur. README'sine göre Deque Systems tarafından aktif olarak desteklenir. WCAG 2.0, 2.1 ve 2.2 için A, AA ve AAA seviyelerinde kurallar içerir. Bunların yanında iyi uygulama (best practice) kuralları da vardır.

axe'in ilkelerinden biri yanlış alarm vermemektir. README'ye göre hedef, yazılım hataları dışında sıfır yanlış pozitiftir. Emin olamadığı öğeleri ise "incomplete" olarak döndürür ve bunlar için elle inceleme gerektiğini söyler.

Bu yüzden axe raporunu okurken iki listeye bakarım. Hatalar düzeltilecek işlerdir. "Gözden geçirilmeli" listesi ise benim yapacağım kontrollerin sırasıdır.

Bilmeniz gereken bir ayar

axe'in kural belgesine göre WCAG 2.2 Level A ve AA kuralları varsayılan olarak kapalıdır. Gerekçe olarak WCAG 2.2'nin henüz yaygın biçimde benimsenmediği ve zorunlu tutulmadığı yazılır. Dokunma hedefi boyutunu ölçen target-size kuralı bu gruptadır.

AAA kuralları ve deneysel kurallar da varsayılan olarak çalışmaz. Hedefiniz WCAG 2.2 AA ise axe'i kendi test düzeninizde çalıştırırken bu kuralları açıkça etkinleştirin. Yoksa temiz görünen rapor, 2.2 ile gelen kriterlere hiç bakmamış olabilir.

Dokunma hedefinin ne kadar büyük olması gerektiğini mobil uygulama erişilebilirliği rehberinde anlattım.

Lighthouse erişilebilirlik puanı

Lighthouse, açık kaynaklı ve otomatik bir sayfa denetim aracıdır. Performans, erişilebilirlik ve SEO gibi alanlarda denetim yapar. Chrome geliştirici araçlarından, komut satırından, bir Node modülü olarak ya da PageSpeed Insights sitesinden çalıştırılabilir.

Erişilebilirlik puanı, tüm erişilebilirlik denetimlerinin ağırlıklı ortalamasıdır. Her denetim ya geçer ya kalır, kısmi puan yoktur. Sayfadaki butonların bir kısmının adı eksikse, o denetimden sıfır alırsınız.

Ağırlıklar 3 ile 10 arasında değişir. Lighthouse'un puanlama sayfası ağırlıkları axe'in kullanıcı etkisi değerlendirmesine dayandırır. Butonların adı, görsellerin alt özniteliği ve form öğelerinin etiketi 10 ağırlıklı denetimler arasındadır.

Puanın neyi saymadığı da aynı sayfada yazar. Elle yapılması gereken denetimler ve düşük etkili ya da iyi uygulama denetimleri puanı etkilemez. Yani 100 puan, aracın baktığı her şeyin geçtiğini söyler. Bakmadığı şeyler hakkında bir şey söylemez.

Lighthouse'u performans için de kullanıyorsanız, o tarafı Core Web Vitals rehberinde anlattım.

WAVE: sorunları sayfanın üstünde görmek

WAVE, WebAIM'in sitesinde sunulan bir değerlendirme araçları takımıdır. Chrome, Firefox ve Edge eklentileri vardır. Sonuçları sayfanın kendisinin üstüne ikonlarla yerleştirir. Bence tasarımcının okuması en kolay araç budur.

WAVE'in yardım sayfasına göre kırmızı ikonlar düzeltilmesi gereken hatalardır. Yeşil ikonlar erişilebilirliği büyük olasılıkla iyileştiren öğelerdir, ama bunlar da doğrulanmalıdır. Sarı uyarılar ise bakmanız gereken yerleri işaretler.

WAVE kendi sınırını da açık yazar. Sayfanın erişilebilir olup olmadığını size söyleyemez, bunu ancak bir insan belirler. Hata çıkmaması da sayfanın erişilebilir ya da uyumlu olduğu anlamına gelmez.

WAVE'in sevdiğim bir alışkanlığı var. Alt metnin uygun olup olmadığını bilemediği için metni ekranda gösterir ve kararı size bırakır. Ürün listesindeki fotoğrafların alt metninde yalnızca "görsel" yazıyorsa, bunu tek bakışta görürsünüz.

Otomatik araçlar sorunların ne kadarını bulur?

Bu soruya verilen sayılardan biri axe'in README'sinden gelir. Orada axe-core ile WCAG sorunlarının ortalama %57'sinin otomatik bulunabildiği yazar. Bu sayıyı kullanmadan önce nasıl ölçüldüğüne bakmak gerekir.

Sayı, Deque'nin kendi otomatik test kapsamı raporuna dayanır. Rapor 2.000'den fazla audit'ten 13.000'i aşkın sayfa ve 300.000'e yakın sorunu inceler. Yalnızca ilk kez yapılan audit'ler alınmıştır. Toplam 294.958 sorunun 169.242'si otomatik testle bulunmuş, bu da %57,38 eder.

Önemli olan şu: oran, kriter sayısına göre değil sorun adedine göre hesaplanmış. Aynı raporda WCAG 2.1 AA'daki 50 başarı kriterinin yalnızca 16'sında otomatik bulunan sorun çıktığı yazar. Rapora göre bazı sorun türleri ötekilerden çok daha sık görülür. Otomatik bulunan 169.242 sorunun 73.733'ü tek bir kriterden, 1.4.3 kontrasttan gelir.

Raporun başka sınırları da var. Yalnızca HTML sayfalar ve WCAG 2.0 ile 2.1'in A ve AA seviyeleri incelenmiş. Veri, Deque'nin kendi test araçları ve yöntemiyle yaptığı audit'lerden geliyor. Yani ölçen de aracı satan da aynı şirket.

Ben bu sayıyı şöyle okurum: araç sık rastlanan hataların büyük kısmını hızla temizler. Ama kriterlerin çoğunda son sözü insan söyler.

Deneyin: araç neyi yakalar?

Aşağıdaki sekiz kart, audit'lerde sık gördüğüm sorunların kurgusal örnekleri. Her kart için seçin: bunu bir otomatik araç mı bulur, yoksa bir insanın elle bakması mı gerekir? Seçiminizden sonra cevap ve gerekçesi kartın altında açılır.

Araç neyi yakalar?

• Soluk gri yardım metni

  Beyaz zeminde açık gri, küçük puntolu bir ipucu metni var. Kontrast oranı 4,5:1'in altında.

  Araç bulur. Düz zemindeki metnin oranını araç ölçer. axe'in color-contrast kuralı tam olarak bunu arar. Aynı kural bazen "gözden geçirilmeli" sonucu da verir, o zaman oranı siz ölçersiniz.

• Alt metni olmayan ürün fotoğrafı

  Ürün sayfasındaki ana fotoğrafın img etiketinde hiç alt özniteliği yok.

  Araç bulur. Özniteliğin eksik olması koddan okunur. axe'in image-alt kuralı ve Lighthouse'un en ağır denetimlerinden biri bunu yakalar.

• Anlamsız alt metin

  Görselde alt="IMG_2041.jpg" yazıyor. Öznitelik var, ama görselin ne gösterdiğini söylemiyor.

  Elle bulunur. Araç alt metnin var olduğunu görür ve geçer. Metnin görselin yerini tutup tutmadığına bir insan karar verir. WAVE bu yüzden alt metni ekranda gösterir ve kararı size bırakır.

• Adı olmayan ikon buton

  Sepetteki çöp kutusu ikonu bir buton. İçinde yalnızca bir SVG var, ne metin ne aria-label.

  Araç bulur. Butonun erişilebilir adı boş. axe'in button-name kuralı bunu bulur, Lighthouse da aynı denetimi en yüksek ağırlıkla sayar.

• Etiketsiz e-posta alanı

  Bültene kayıt formunda bir e-posta alanı var. Alana bağlı bir label ya da başka bir ad yok.

  Araç bulur. Etiket ilişkisi koddadır, araç bunu okur. axe'in label kuralı her form öğesinin bir etiketi olmasını ister. Etiketin anlaşılır olup olmadığına ise yine siz bakarsınız.

• Karışık odak sırası

  Ödeme formunda Tab tuşu ad alanından sonra sayfanın altındaki bağlantılara atlıyor, sonra kart numarasına dönüyor.

  Elle bulunur. Her öğe tek tek odaklanabildiği için kural ihlali görünmez. Sıranın mantıklı olup olmadığını ancak Tab ile gezerek anlarsınız.

• Klavye tuzağı

  Bir kampanya penceresi açılıyor. Tab tuşu pencerenin içinde dönüyor, Esc ile kapanmıyor, kapatma butonuna da ulaşılamıyor.

  Elle bulunur. Tarayıcı kod okurken pencereyi açıp kapatmaya çalışmaz. Tuzağı, klavyeyle içine girip çıkmaya çalışan biri bulur.

• Yalnızca kırmızıyla gösterilen hata

  Hatalı alanın çerçevesi kırmızıya dönüyor. Yanında metin ya da ikon yok.

  Elle bulunur. Kod açısından her şey yerinde: alan var, etiket var. Hatanın yalnızca renkle anlatıldığını görmek için ekrana bir insanın bakması gerekir.

Kartlar kurgusaldır. Ayrım benimdir: "Araç bulur" dediklerimin axe kural listesinde bir karşılığı var, "Elle bulunur" dediklerim kodda kural ihlali olarak görünmez. Gerçek bir sayfada araç sonucu yine de gözle doğrulanır.

Elle bulunan dört sorunun ortak yanı, kodun "doğru" görünmesidir. Etiket vardır, alt metin vardır, öğeler odaklanır. Sorun, bunların bir araya gelince kullanıcıya ne söylediğindedir.

Aracın yerini tutmayan kontroller

Araç raporu temiz çıktıktan sonra benim yaptığım kısa tur şudur:

1. Fareyi bırakıp ana akışı yalnızca klavyeyle bitirmeye çalışırım. Odak halkası her adımda görünmeli, sıra ekrandaki okuma sırasını izlemeli.
2. Açılan her pencereye girip Esc ve Tab ile çıkmayı denerim. Pencere kapanınca odak, pencereyi açan butona dönmeli.
3. Fotoğraf ya da renk geçişi üstündeki metnin kontrastını elle ölçerim. Renkleri kontrast hesaplayıcıya girip oranı görürsünüz.
4. Formu bilerek yanlış doldururum. Hata yalnızca renkle değil, metinle de anlatılmalı. Bunun iyi örneklerini hata mesajları kalıbında topladım.
5. Ekran okuyucuyu açıp görsellerin alt metnini ve butonların adını dinlerim.

Bu tur her şeyi bulmaz ama aracın kör kaldığı yerlerin çoğuna bakar. Tam bir denetimin adımlarını denetim rehberinde bulabilirsiniz.

Türkiye'deki yasal yükümlülükleri bu sayfada anlatmıyorum. Onlar için 2025/10 sayılı Genelge rehberine bakın.

Benim notum

Bana "Lighthouse'ta 100 aldık, erişilebiliriz" diye gelen ekiplere önce klavyeyle ödeme yapmayı denemelerini isterim. Çoğu zaman ilk açılan pencerede takılırız. Puan yanlış değil. O soruyu hiç sormamış, o kadar.

Araç seçiminde tek bir tavsiyem var: hangisini seçtiğinizden çok, ne sıklıkla çalıştırdığınız önemli. axe'i test düzeninize koyarsanız her sürümde aynı hatalar geri gelmez. WAVE'i tasarımcıya, Lighthouse'u hızlı bir ilk bakış için kullanırım.

Araç raporundaki bulguları da olduğu gibi kopyalamam. Raporuma yalnızca ekranda kendi gözümle doğruladığım sorunları yazarım. Bunu kendi ürününüzde yaptırmak isterseniz UX Audit WCAG 2.2'nin temel kontrollerini içerir.