Ücretsiz Erişilebilirlik aracı

Web Sitesi Erişilebilirlik Testi

Adresinizi girdiğinizde o sayfayı ve en fazla dört temel sayfayı gerçek bir tarayıcıda WCAG 2.2 A ve AA seviyesi kurallarına göre test ederiz. Her engel; öğesi, sayfası, bir ekran görüntüsü ve kimleri etkilediğini anlatan bir açıklamayla birlikte gelir.

Ücretsiz. En fazla beş temel sayfayı yaklaşık bir dakikada test eder.

Bu araç neleri kontrol eder

  • Sitenizi temsil eden beş sayfa

    Girdiğiniz sayfa ve sitenin türüne göre bu sayfanın bağlantılarından seçilen en fazla dört sayfa. Bir mağazada bunlar bir koleksiyon, bir ürün, sepet ve bir içerik sayfasıdır; diğer sitelerde fiyatlandırma, iletişim, bir makale veya hizmetler gibi sayfalar. Şablonlar tekrarlandığı için tek bir ürün sayfası genellikle tüm ürün sayfalarının sorunlarını gösterir.

  • Oluşturulmuş sayfada WCAG kuralları

    Her sayfa Chromium’da 1366 × 900 çözünürlükte açılır ve sayfanın script’leri çalıştıktan sonra Deque’nin açık kaynaklı kural motoru axe-core, WCAG 2.0, 2.1 ve 2.2 A ve AA seviyesi kurallarını çalıştırır. Böylece bir temanın veya uygulamanın ancak sayfa tarayıcıda oluşturulduktan sonra ortaya çıkardığı sorunlar da yakalanır.

  • Etki düzeyi ve başarı kriterleri

    Başarısız olan her kural; etki düzeyini (kritik, ciddi, orta veya küçük), karşılık geldiği WCAG başarı kriterlerini ve kaç öğeyi ve sayfayı etkilediğini gösterir.

  • Hatalı öğe, çerçeve içinde

    Örnek bir öğenin HTML kodu ve bu öğenin çerçeve içine alındığı bir sayfa ekran görüntüsü; böylece siz veya geliştiriciniz öğeyi şablonda tahmin yürütmeden bulabilirsiniz.

  • Bir insanın karar vermesi gerekenler

    axe-core kesin bir karara varamadığı bir şey bulduğunda (örneğin kontrastını ölçemediği, arka plan görselinin üzerindeki bir metin) bu öğe “inceleme gerekli” olarak listelenir. Asla hata olarak sayılmaz.

  • Klavye testi

    İlk sayfada Tab tuşuna 40 kez basar ve odağın nereye gittiğini kaydederiz: odağın hiç hareket edip etmediği, bir döngüye takılıp takılmadığı (çoğunlukla bir çerez bildiriminin içinde), ilk durağın bir atlama bağlantısı olup olmadığı ve odaklanan hangi öğelerde görünür bir odak göstergesi bulunmadığı. Bu son kontrol sezgisel bir yöntemdir; bu yüzden “inceleme gerekli” olarak gösterilir.

Neleri kontrol edemez

  • Bir ekran okuyucunun ne seslendirdiğini duyamaz. Yazılım bir butonun adı olduğunu doğrulayabilir; bu adın sesli okunduğunda anlamlı olup olmadığını doğrulayamaz.
  • Video ve ses içerikleri için altyazıları, metin dökümlerini veya sesli betimlemeleri değerlendiremez.
  • Talimatların açık olup olmadığı ya da hata mesajlarının insanların hatayı düzeltmesine yardımcı olup olmadığı gibi bilişsel ve içerikle ilgili kriterleri değerlendiremez.
  • Giriş, şifre veya bot korumasının arkasındaki sayfaları test edemez ya da bir ödeme sürecinden geçemez.
  • Sitenizin WCAG’ye uygun olup olmadığını veya herhangi bir yasaya uyup uymadığını söyleyemez. Otomatik kurallar sorunların bir kısmını bulur; geri kalanı için insan gerekir.

Neden önemli

Erişilebilirlik engelleri çoğu zaman etkisi büyük olan küçük şablon hatalarıdır. Yalnızca simgeden oluşan ve erişilebilir adı olmayan bir sepet butonu sadece “buton” olarak seslendirilir; bu yüzden ekran okuyucu kullanan biri butonun ne işe yaradığını anlayamaz. Beyaz üzerinde 4,5:1 kontrast oranını karşılamayan gri metin, az gören pek çok kişi ve parlak güneş ışığında telefon kullanan herkes için zor okunur.

Aynı üst bilgi, ürün kartı ve alt bilgi her sayfada yer aldığından, bir şablonda yapılan tek bir düzeltme yüzlerce hatayı bir anda giderebilir. Sonuçların her örneği ayrı bir sorun olarak listelemek yerine, öğe ve sayfa sayılarıyla birlikte kurala göre gruplanmasının nedeni budur.

Erişilebilirliğin birçok ülkede hukuki bir boyutu da vardır. Bir tarama, bir yasanın size uygulanıp uygulanmadığını ya da onu karşılayıp karşılamadığınızı söyleyemez. Size sunduğu şey, kendi sayfalarınızdaki gerçek engellerin tarihli bir listesidir; bu da her durumda işe başlamak için pratik bir noktadır.

Sonuçlar nasıl okunur

Kritik
Engel, bazı kişilerin öğeyi hiç kullanamamasına yol açabilir; örneğin etiketi olmayan bir form alanı veya adı olmayan bir buton. Önce bunları düzeltin.
Ciddi
Engel, bazı kişiler için bir görevi çok daha zor hale getirir; örneğin kontrast oranını karşılamayan gövde metni.
Orta
Engel zorluk veya kafa karışıklığı yaratır, ancak insanlar genellikle bir yolunu bulup aşabilir.
Küçük
Küçük bir sorun veya rahatsızlık. Yine de o şablonu bir sonraki düzenleyişinizde düzeltmeye değer.
WCAG başarı kriterleri
Bir kuralın yanındaki 1.1.1 veya 1.4.3 gibi numaralar, kuralın test ettiği kriterlerdir. Yanında kriter listelenmeyen bir kural, WCAG gerekliliği değil, iyi uygulama önerisidir.
Öğeler ve sayfalar
Kuralı karşılamayan öğe sayısı ve bunun test edilen sayfaların kaçında görüldüğü. Her sayfada başarısız olan bir kural genellikle üst bilgi, menü veya alt bilgi gibi ortak bir bölümdedir.
İnceleme gerekli
axe-core karar veremediği bir şey buldu. Öğeye kendiniz bakın: kriteri karşılıyor da olabilir, karşılamıyor da. Bu öğeler hata olarak sayılmaz.
Odak tuzağı
Tab tuşu aynı birkaç öğe arasında dönüp durdu. Bu öğeler bir çerez bildirimine aitse klavye kullanıcıları sayfanın geri kalanına ulaşamayabilir.
Odak hareket etmiyor
Tab tuşuna basıldığında hiçbir öğe odak almadı. Bağlantılar ve butonlar div veya span öğeleriyle oluşturulmuş olabilir ya da bir script tuş basışını engelliyor olabilir.
Atlama bağlantısı
İlk Tab durağının bir “İçeriğe geç” bağlantısı olup olmadığı. Böyle bir bağlantı yoksa klavye kullanıcıları her sayfada üst bilginin tamamında Tab ile ilerlemek zorunda kalır. Landmark’lar ve başlıklar da WCAG 2.4.1 Bypass Blocks kriterini karşılayabilir.
Görünür odak göstergesi yok
Kenar çizgisi (outline), gölge (box-shadow) veya alt çizgi görmediğimiz odaklanmış öğeler. Renk değişikliği gibi farklı bir stil yine de görünür olabilir; bu yüzden doğrulamak için bu öğelerde kendiniz Tab ile gezinin.

En yaygın sorunlar nasıl düzeltilir

  • Kontrast oranını karşılamayan metinler

    Normal metnin arka planına karşı en az 4,5:1, büyük metnin (yaklaşık 24 px veya kalın yazıda yaklaşık 18,7 px) ise en az 3:1 kontrast oranı olmalıdır. Rengi öğe öğe değil, tema ayarlarınızda veya tasarım token’larınızda değiştirin; ardından yer tutucu (placeholder) metinleri, fareyle üzerine gelme (hover) durumlarını ve görsellerin üzerindeki metinleri yeniden kontrol edin.

  • Alternatif metni olmayan görseller

    Anlam taşıyan her görsele, ne gösterdiğini veya ne işe yaradığını anlatan bir alt özniteliği verin; örneğin ürünün adı ve rengi. Dekoratif görsellere boş bir alt (alt="") verilir, böylece ekran okuyucular onları atlar. Shopify’da alternatif metni ürünün Medya bölümündeki görselden, WordPress’te ise Ortam kütüphanesindeki Alternatif metin alanından eklersiniz.

  • Etiketi olmayan form alanları

    Her alanı, alanın id değeriyle eşleşen bir <label for> ile etiketleyin; görünür metin yoksa aria-label kullanın. Yer tutucu metni tek etiket olarak kullanmayın: biri yazmaya başlar başlamaz kaybolur. Bülten kayıt alanları ve üst bilgideki arama kutuları en sık rastlanan örneklerdir.

  • Erişilebilir adı olmayan butonlar ve bağlantılar

    Sepet, arama, menü veya sosyal medya profilleri için kullanılan simge kontrolleri çoğu zaman yalnızca bir SVG içerir. Kontrolün ne yaptığını söyleyen görünür bir metin veya aria-label ekleyin (“simge” değil, “Sepeti aç”) ve SVG’nin kendisine aria-hidden="true" ekleyin.

  • Odağı hapseden bir çerez bildirimi

    Bildirimdeki her butona Tab ile ulaşılabildiğinden ve Enter veya Boşluk tuşuyla kullanılabildiğinden, bildirim kapatıldığında odağın sayfaya geri döndüğünden ve sayfayı engellemeyen bir bildirimin odağı hiç tutmadığından emin olun. Onay yönetimi aracınızın ayarlarını kontrol edin ve script eskiyse aracı güncelleyin.

  • CSS’te kaldırılmış odak çizgileri

    Stil dosyalarınızda bağlantılar, butonlar ve :focus için kullanılan outline: none veya outline: 0 kurallarını arayın. Bunları :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } gibi görünür bir stille değiştirin.

Bu araçla ilgili sorular

Bu erişilebilirlik testi ücretsiz mi?

Evet. Kayıt gerekmez; yalnızca sitenin sahibi veya yöneticisi olduğunuzu onaylarsınız. Ücretli Erişilebilirlik Düzeltme Raporu ise site haritanızdan en fazla 20 ek sayfa, yalnızca klavyeyle yapılan bir yolculuk testi, 320 px genişlikte yeniden akış (reflow) kontrolü, hatalı kodunuzdan üretilmiş önce-sonra kodu, yapay zekâ prompt’ları, bir PDF ve 5 yeniden test ekler.

Otomatik bir araç WCAG’nin ne kadarını test edebilir?

Yalnızca bir kısmını. Bir kural, bir görselin alternatif metni olduğunu kontrol edebilir ama bu metnin görseli tanımlayıp tanımlamadığını kontrol edemez; bir alanın etiketi olduğunu kontrol edebilir ama etiketin anlaşılır olup olmadığını kontrol edemez. Sonuçları kesin sorunların bir listesi olarak görün, geri kalanını klavye ve ekran okuyucuyla test edin.

Tarama hiçbir şey bulamazsa sitem ADA veya WCAG ile uyumlu mu demektir?

Hayır. Hiçbir otomatik test, bir sitenin WCAG’ye uygun olduğunu ya da ADA, Avrupa Erişilebilirlik Yasası (EAA) veya başka bir yasayla uyumlu olduğunu gösteremez. Temiz bir sonuç, otomatik kuralların test edilen sayfalarda hata bulmadığı anlamına gelir.

Bir staging sitesini veya giriş gerektiren sayfaları kontrol edebilir miyim?

Giriş, şifre veya bot korumasının arkasındaki sayfalar test edilemez. Bot korumanız taramayı engelliyorsa FixReportsScanner user agent’ına izin verin ya da herkese açık bir staging kopyasını test edin.

Bir sorunu düzelttim. Sonuç neden aynı görünüyor?

Aynı adres için son bir saat içinde yapılmış bir taramanın sonuçları yeniden kullanılabilir. Tekrar test etmeden önce bu bir saatin geçmesini bekleyin ve varsa sayfa önbelleğini veya CDN önbelleğini temizleyin.

Kaynaklar

İlgili araçlar

Erişilebilirlik Düzeltme Raporu ($174, tek seferlik) ücretsiz taramanın tamamından yola çıkar ve buna daha fazla sayfa, her bulgu için yapılacak değişiklik, bir PDF ve düzeltmelerinizi doğrulamak için yeniden testler ekler.

Erişilebilirlik Düzeltme Raporu hakkında