523 görselden 39 tanesinde alt özniteliği yok

JavaScript ile yüklenen görseller burada dikkate alınmaz.

• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3377" height="1898">
• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="1920" height="1079">
• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3200" height="1798">
• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="300" height="250">

Şunu yapmalısınız: Her <img> öğesine bir alt verin: anlamlı görsellerde kısa açıklama, salt dekoratif olanlarda alt="".

4 form alanında tanınabilir etiket yok

JavaScript ile ayarlanmış bir aria-label olup olmadığını kontrol edin.

• <input type="text" name="q" placeholder="Suchen">
• <input type="text" name="q" placeholder="Suchen">
• <select name="in">
• <input type="text" name="fs" placeholder="Im Preisvergleich suchen">

Şunu yapmalısınız: Her alanı bir <label for> öğesine bağlayın veya aria-label / aria-labelledby ayarlayın. Yalnızca bir placeholder yeterli değildir.

Metin kontrastı muhtemelen çok düşük olan 5 CSS kuralın

Gerekli: 4,5:1 (normal) veya 3:1 (büyük metin). “Varsayılan sayfa arka planı” durumunda gerçek arka plan kesin olarak belirlenemedi — şüphe halinde tarayıcıda kontrol edin. Bulunanlar arasında: `.dark a-gift-link dialog`: #e0e0e0 auf #fff (Vorfahren-Hintergrund) = 1.32:1 · `.a-android-native-app-prompt__close-banner`: #323232 auf rgba(0,0,0,0) = 1.64:1 · `a-opt-in[is-active] .opt-in__footnote`: #959595 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 3.00:1 · `.a-android-native-app-prompt__load-app`: #fff auf #27a209 = 3.36:1 · `a-topic .topic-label`: #fff auf #ed3725 = 4.06:1

.dark a-gift-link dialog, .a-android-native-app-prompt__close-banner, a-opt-in[is-active] .opt-in__footnote, .a-android-native-app-prompt__load-app, a-topic .topic-label

Şunu yapmalısınız: İlgili asgari değere ulaşılana dek metin rengini koyulaştırın veya arka planı açın. Rengi asla tek ayırt edici özellik olarak kullanmayın.

HTML'de tanınabilir adı olmayan 16 bağlantı

Boş bağlantılar veya alt olmadan yalnızca bir simge/görsel. JavaScript ile ayarlanmış bir aria-label burada tanınmaz.

• <a-click-performance>
• <a name="topnavi.ho.magazine-nav.ct" class="hover:bg-brand dark:hover:
• <a name="topnavi.ho.magazine-nav.ix" class="hover:bg-brand-alternative
• <a name="topnavi.ho.magazine-nav.foto" class="hover:bg-brand dark:hove

Şunu yapmalısınız: Görünür bağlantı metni ekleyin veya simge bağlantılarında aria-label ya da alt'lı bir görsel kullanın.

HTML'de adı olmayan 6 düğme

Metni ve aria-label'ı olmayan düğmeler ekran okuyucular için sessizdir — ad JavaScript ile ayarlanmadıkça.

• <button class="scroll-left text-ho-text">
• <button class="scroll-right text-ho-text">
• <button class="scroll-left text-ho-text">
• <button class="scroll-right text-ho-text">

Şunu yapmalısınız: Düğme metni ekleyin veya aria-label ayarlayın.

Sunulan HTML'de <h1> başlığı yok

Her sayfa tam olarak bir h1 ile başlamalıdır. JavaScript ile kurulan sayfalarda h1 yalnızca tarayıcıda oluşabilir — o zaman işlenmiş DOM'da kontrol edin.

body

Şunu yapmalısınız: İlk başlık olarak anlamlı bir <h1> ekleyin (tercihen sunucu tarafında).

6 yinelenen id özniteliği

örn. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. label-for ve aria bağlantılarını bozar.

[id]

Şunu yapmalısınız: Benzersiz id'ler atayın.