40 от 519 изображения без атрибут alt

Изображенията, зареждани чрез JavaScript, не са обхванати тук.

• <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">

Ето какво трябва да направиш: Дай alt на всеки <img>: кратко описание при изображения със смисъл, alt="" при чисто декоративните.

4 полета на формуляр без разпознаваем етикет

Провери дали съществува aria-label, зададен чрез JavaScript.

• <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">

Ето какво трябва да направиш: Свържи всяко поле с елемент <label for> или задай aria-label / aria-labelledby. Само placeholder не е достатъчен.

5 CSS правилn с вероятно твърде нисък контраст на текста

Необходимо: 4,5:1 (нормален) съответно 3:1 (голям текст). При „предполагаем фон на страницата” действителният фон не можа да се определи със сигурност — при съмнение провери в браузъра. Открито между другото: `.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

Ето какво трябва да направиш: Затъмни цвета на текста или изсветли фона, докато се достигне съответната минимална стойност. Никога не използвай цвета като единствен отличителен признак.

16 връзки без разпознаваемо име в HTML

Празни връзки или само икона/изображение без alt. aria-label, зададен чрез JavaScript, не се разпознава тук.

• <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

Ето какво трябва да направиш: Добави видим текст на връзката или при връзки с икона използвай aria-label, съответно изображение с alt.

6 бутона без име в HTML

Бутоните без текст и без aria-label са неми за екранните четци — освен ако името не се задава чрез JavaScript.

• <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">

Ето какво трябва да направиш: Добави текст на бутона или задай aria-label.

Няма заглавие <h1> в доставения HTML

Всяка страница трябва да започва с точно едно h1. При страници, изграждани чрез JavaScript, h1 може да възникне едва в браузъра — тогава провери в рендирания DOM.

body

Ето какво трябва да направиш: Вмъкни смислено <h1> като първо заглавие (по възможност вече от страна на сървъра).

6 дублирани атрибута id

напр. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. Разваля свързванията label-for и aria.

[id]

Ето какво трябва да направиш: Задавай уникални id.