Erişilebilirlik Denetçisi, herhangi bir web sayfasında otomatik WCAG 2.1 Level AA kontrolleri çalıştırır ve erişilebilirlik sorunlarının kategorize edilmiş bir raporunu oluşturur. Yetersiz renk kontrast oranlarını, eksik resim alt metnini, uygunsuz ARIA rollerini ve özniteliklerini, eksik form etiketlerini, klavye gezinme sorunlarını ve eksik landmark bölgelerini algılayın — bulunan her sorun için tek tıkla öğe vurgulama ile.
Web erişilebilirliği isteğe bağlı değil — birçok yargı yetkisinde yasal bir gereklilik ve engellilerle yaşayan dünya nüfusunun %15'i için gereklidir. Yine de erişilebilirlik sorunları normal geliştirme ve test sırasında görünmezdir. Bir düğme iyi görünebilir ancak role özniteliği olmayan stilli bir div olduğu için ekran okuyuculara tamamen erişilemez olabilir. Metin size okunabilir olabilir ancak düşük görüşlü kullanıcılar için kontrast gereksinimlerini karşılamaz. Erişilebilirlik Denetçisi bu görünmez sorunları otomatik olarak ortaya çıkarır. Renk kontrast oranları (normal metin için minimum 4.5:1, büyük metin için 3:1), resimlerdeki eksik alt metin, form girişlerindeki eksik etiketler, uygunsuz ARIA rolleri ve öznitelikleri, eksik belge landmark'ları (nav, main, footer) ve klavye odak göstergeleri dahil düzinelerce WCAG 2.1 Level AA kriterini kontrol eder. Her sorun etkilenen öğeyi, ihlal edilen belirli WCAG kriterini ve nasıl düzelteceğinize dair bir öneri içerir. Öğeyi sayfada vurgulamak için herhangi bir soruna tıklayın.
Algılanabilirlik, operasyonellik, anlaşılabilirlik ve sağlamlık kategorileri dahil WCAG 2.1 Level AA başarı kriterlerine karşı otomatik kontroller çalıştırır. Her kontrol belirli kriteri (örn. 1.4.3 Kontrast, 1.1.1 Metin Dışı İçerik) ve geçme/başarısız durumunu gösterir.
Sayfadaki her metin öğesi için metin ve arka plan renkleri arasındaki kontrast oranını hesaplar. Normal metin için 4.5:1'in altındaki veya büyük metin için 3:1'in altındaki öğeleri işaretler (18px+ veya 14px+ kalın). Gerçek oranı ve gereken minimumu gösterir.
Her img, svg ve image rolü öğesini tarar. Eksik alt özniteliklerini, dekoratif olmayan resimlerde boş alt'ı ve aşırı genel alt metni ("image", "photo") işaretler. Her resmin açıklayıcı alt'a, boş alt'a (dekoratif) veya role="presentation"a ihtiyacı olup olmadığını önerir.
Uygunsuz ARIA rol kullanımını (yanlış öğelerdeki roller), eksik gerekli ARIA özniteliklerini (örn. simge düğmelerinde aria-label), aria-labelledby tarafından başvurulan yinelenen ID'leri ve eksik landmark bölgelerini (main yok, nav yok) kontrol eder. Semantik HTML alternatiflerini önerir.
Her form girişinin (metin, e-posta, şifre, onay kutusu, seçim) eşleşen for/id, aria-label veya aria-labelledby'a sahip bir label öğesi aracılığıyla ilişkili bir etikete sahip olduğundan emin olur. Etiketsiz girişler ekran okuyucular tarafından erişilemezdir.
Sorunlar Hatalar (düzeltilmelidir — erişim engelleri), Uyarılar (düzeltilmelidir — potansiyel engeller) ve Geçmeler (onaylanmış erişilebilir) olarak kategorize edilir. Hata sayısı belirgin şekilde görüntülenir. Etkilenen öğeyi sayfada vurgulamak için herhangi bir soruna tıklayın.
Yeni bir sayfa veya özellik başlatmadan önce, sorunları erken yakalamak için Erişilebilirlik Denetçisini çalıştırın. Eksik alt metin, etiketsiz form alanları ve kontrast ihlalleri geliştirme sırasında düzeltmek kolaydır ancak üretimde keşfetmek pahalıdır.
Birçok yargı yetkisi WCAG 2.1 Level AA uyumluluğunu gerektirir (ABD'de ADA, AB'de EAA). Uyumluluk boşluklarını yasal riskler haline gelmeden tanımlamak için denetçiyi halka açık sayfalarınızda çalıştırın.
Erişilebilirlik kontrolünü QA sürecinizin bir parçası olarak dahil edin. Görsel QA ve işlevsel testten sonra, uygulamanın erişilebilirlik regresyonları getirmediğini doğrulamak için Erişilebilirlik Denetçisini çalıştırın.
Gerçek erişilebilirlik sorunlarını göstermek için bir ekip toplantısı sırasında mevcut sitenizde denetçiyi çalıştırın. Görsel vurgulama ve net açıklamalar, geliştiricilerin erişilebilir biçimlendirmenin nasıl göründüğünü ve neden önemli olduğunu anlamasına yardımcı olur.
Üçüncü taraf widget'ları, gömülü içerik veya kullanıcı tarafından oluşturulan HTML içeren sayfaları denetleyin. Bu kaynaklar genellikle sayfa sahibi olarak hala sorumlu olduğunuz erişilebilirlik sorunlarını (eksik alt metin, kontrast ihlalleri) getirir.
DevSuite Pro yüzen yuvasını açın ve Erişilebilirlik Denetçisi simgesine tıklayın. Araç sayfa DOM'unu erişilebilirlik sorunları için tarar.
Hatalar (kırmızı), Uyarılar (sarı) ve Geçmeler (yeşil) içeren kategorize edilmiş bir rapor görünür. Her bölüm etkilenen öğeler ve WCAG kriter referanslarıyla belirli sorunları listeler.
Etkilenen öğeyi sayfada renkli bir kenarlıkla vurgulamak ve ona kaydırmak için herhangi bir soruna tıklayın. Rapor ile DOM öğesi arasındaki bağlantı anındadır.
Her sorun belirli bir öneri içerir: "Resim içeriğini açıklayan alt metni ekleyin", "Yazı tipi renk kontrastını en az 4.5:1'e yükseltin", "for='email' olan bir label öğesi ekleyin".
Kodunuzda değişiklikler yapın, sayfayı yeniden yükleyin ve denetimi tekrar çalıştırın. Sorunlar çözüldükçe hata sayısı azalmalıdır. Sıfır hataya ulaşmayı hedefleyin.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
