{n} von {total} Bildern ohne alt-Attribut

Bilder, die per JavaScript nachgeladen werden, sind hier nicht erfasst.

• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3072" height="1726">
• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="4032" height="2266">
• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="1672" height="940">
• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="300" height="250">

Das solltest du tun: Jedem <img> ein alt geben: kurze Beschreibung bei sinntragenden Bildern, alt="" bei rein dekorativen.

{n} Formularfeld(er) ohne erkennbare Beschriftung

Prüfe, ob ein per JavaScript gesetztes aria-label existiert.

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

Das solltest du tun: Jedes Feld mit einem <label for>-Element verbinden oder aria-label / aria-labelledby setzen. Nur ein placeholder reicht nicht.

{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast

Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}

.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

Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.

{n} Link(s) ohne erkennbaren Namen im HTML

Leere Links oder nur ein Icon/Bild ohne alt. Ein per JavaScript gesetztes aria-label wird hier nicht erkannt.

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

Das solltest du tun: Sichtbaren Linktext ergänzen, oder bei Icon-Links aria-label bzw. ein Bild mit alt verwenden.

{n} Schaltfläche(n) ohne Namen im HTML

Buttons ohne Text und ohne aria-label sind für Screenreader stumm — sofern der Name nicht per JavaScript gesetzt wird.

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

Das solltest du tun: Button-Text ergänzen oder aria-label setzen.

Keine <h1>-Überschrift im ausgelieferten HTML

Jede Seite sollte mit genau einer h1 beginnen. Bei per JavaScript aufgebauten Seiten kann die h1 erst im Browser entstehen — dann im gerenderten DOM prüfen.

body

Das solltest du tun: Eine aussagekräftige <h1> als erste Überschrift einfügen (möglichst schon serverseitig).

{n} doppelte id-Attribute

z. B. {examples}. Bricht label-for- und aria-Zuordnungen.

[id]

Das solltest du tun: IDs eindeutig vergeben.