Erişilebilirlik Denetleyicisi
HTML parçacıklarını yaygın WCAG erişilebilirlik sorunları için denetleyin ve uygulanabilir düzeltme önerileri alın
HTML Girişi
Neleri Denetliyoruz
Görsel Alt Metni
Ekran okuyucuların görselleri kullanıcılara tanımlayabilmesi için tüm <img> ögelerinin alt özniteliğine sahip olup olmadığını denetler.
Form Etiketleri
Tüm form girişlerinin <label for>, aria-label veya aria-labelledby kullanılarak ilişkilendirilmiş bir etikete sahip olduğunu doğrular.
Başlık Hiyerarşisi
Başlıkların seviyeleri atlamadan mantıksal bir sırada (h1, h2, h3...) ilerlediğinden emin olur.
Bağlantı Metni
Boş bağlantıları ve ekran okuyucu kullanıcıları için anlam ifade etmeyen 'buraya tıkla' gibi genel bağlantı metinlerini algılar.
Dil Özniteliği
<html> ögesinde ekran okuyucuların doğru telaffuzu kullanmasına yardımcı olan lang özniteliğinin bulunup bulunmadığını denetler.
ARIA ve Etkileşimli Ögeler
Etkileşimli ögelerin yardımcı teknoloji desteği için uygun rollere ve ARIA etiketlerine sahip olduğunu doğrular.
Erişilebilirlik Denetleyicisi
HTML parçacıklarını yaygın WCAG erişilebilirlik sorunları için denetleyin ve uygulanabilir düzeltme önerileri alın
Özellikler
- Parse pasted HTML locally with DOMParser and check for common WCAG issues
- 12+ rule categories: alt text, form labels, heading hierarchy, empty links, ARIA usage, tabindex misuse, autoplay
- No network calls — paste HTML, get instant feedback
- NOT a full WCAG audit — for that use axe-core, Lighthouse, or a dedicated tool
- Useful for quick sanity-checks during development
Nasıl Kullanılır
- HTML kodunuzu giriş alanına yapıştırın veya aracı iş başında görmek için örnek parçacıklardan birini yükleyin.
- HTML'inizi 12'den fazla erişilebilirlik kuralı genelinde yaygın WCAG sorunlarına karşı analiz etmek için 'Erişilebilirliği Denetle' düğmesine tıklayın.
- Önem derecesine göre gruplandırılmış sonuçları inceleyin, düzeltme önerilerini okuyun ve bulunan sorunları gidermek için HTML'inizi güncelleyin.
İpuçları ve En İyi Uygulamalar
- Paste the HTML source (View Source / Inspect → Outer HTML) — the checker doesn't fetch URLs (CORS would block that anyway).
- For a complete audit, use axe-core in your test suite or Lighthouse in DevTools — those check ~30 more rules including dynamic ones.
- Heading hierarchy: each level should follow the previous (h1 → h2 → h3); skipping levels is flagged.
- Alt text rule allows `alt=""` for purely decorative images — only missing/duplicate alt is flagged.
- Form labels: every input should have an associated label (via `for` attribute) or `aria-label`. Placeholder-only is flagged.
SSS
Bu araç hangi erişilebilirlik sorunlarını denetler?
Bu araç, 12'den fazla yaygın WCAG erişilebilirlik sorununu denetler: görsellerde eksik alt öznitelikleri, ilişkilendirilmiş etiketi olmayan form girişleri, başlık hiyerarşisi ihlalleri (atlanan seviyeler), boş bağlantılar ve genel bağlantı metinleri, HTML ögesinde eksik lang özniteliği, ARIA rolü veya etiketi olmayan etkileşimli ögeler, boş düğmeler, kullanımdan kaldırılmış HTML ögeleri, sekme sırasını bozan pozitif tabindex değerleri, autoplay ile başlayan medya ögeleri ve eksik belge başlıkları. Her sorun, belirli WCAG başarı kriterleriyle eşleştirilir.
Bu araç tam bir WCAG denetiminin yerini tutar mı?
Hayır, bu araç yalnızca işaretleme ayrıştırılarak tespit edilebilen yaygın HTML düzeyindeki sorunları denetler. Kapsamlı bir WCAG 2.1 veya 2.2 denetimi; ekran okuyucular gibi gerçek yardımcı teknolojilerle test yapmayı, renk kontrast oranlarını kontrol etmeyi, klavye gezintisini doğrulamayı, dinamik içerik güncellemelerini test etmeyi ve bilişsel erişilebilirliği değerlendirmeyi gerektirir. Bu araç, tam manuel bir denetim yapmadan önce en yaygın sorunları yakalamak için harika bir ilk adımdır.
Hatalar ile uyarılar arasındaki fark nedir?
Hatalar, yardımcı teknoloji kullanıcılarını kesinlikle etkileyecek erişilebilirlik ihlallerini belirtir. Örneğin, bir görseldeki eksik alt özniteliği bir hatadır çünkü ekran okuyucular görseli tanımlayamaz. Uyarılar ise bağlama bağlı olarak sorun olabilecek ya da olmayabilecek olası sorunları belirtir. Örneğin, boş bir alt özniteliği bir uyarıdır; çünkü dekoratif görseller için doğru, bilgilendirici görseller için yanlıştır. Başarılı denetimler ise belirli bir kontrolün karşılandığını onaylar.
HTML yapıştırmak yerine canlı bir web sitesi URL'sini denetleyebilir miyim?
Bu araç, doğrudan yapıştırdığınız HTML parçacıklarını denetlemek için tasarlanmıştır. Canlı web sitelerini test etmek için sayfa kaynağını görüntülemeniz ya da HTML'i kopyalamak için tarayıcının geliştirici araçlarını kullanmanız ve ardından buraya yapıştırmanız gerekir. Canlı web sitesi testleri için, dinamik olarak oluşturulan içerikler dahil olmak üzere işlenmiş DOM'u inceleyebilen axe DevTools veya Lighthouse gibi tarayıcı eklentilerini değerlendirebilirsiniz.
HTML ögesindeki lang özniteliği neden bu kadar önemlidir?
lang özniteliği, ekran okuyuculara ve diğer yardımcı teknolojilere içeriğin hangi dilde yazıldığını bildirir. Bu öznitelik olmadan bir ekran okuyucu İngilizce metni Fransızca telaffuz kurallarıyla okumaya çalışabilir ve bu da içeriği anlaşılmaz kılar. Ayrıca tarayıcıların heceleme, yazım denetimi ve dile bağlı diğer özellikleri nasıl işlediğini de etkiler. lang özniteliğini ayarlamak yapabileceğiniz en basit ama en etkili erişilebilirlik iyileştirmelerinden biridir.
HTML kodum analiz için herhangi bir sunucuya gönderiliyor mu?
Hayır, tüm analiz tamamen tarayıcınızda JavaScript ile gerçekleşir. HTML kodunuz asla cihazınızdan ayrılmaz. Araç, HTML'i tarayıcının yerleşik DOMParser API'si ile ayrıştırır ve tüm erişilebilirlik denetimlerini yerel olarak çalıştırır. Bu sayede aracı özel mülkiyet kodlarla, iç projelerle veya hassas içerik barındıran herhangi bir HTML ile güvenle kullanabilirsiniz.