36 z 521 obrazów bez atrybutu alt

Obrazy doczytywane przez JavaScript nie są tu uwzględnione.

• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3983" height="2238">
• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3200" height="1798">
• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="300" height="250">
• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="1672" height="940">

Oto co należy zrobić: Nadaj alt każdemu <img>: krótki opis dla obrazów niosących treść, alt="" dla czysto dekoracyjnych.

4 pól formularza bez rozpoznawalnej etykiety

Sprawdź, czy istnieje aria-label ustawiony przez 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">

Oto co należy zrobić: Powiąż każde pole z elementem <label for> albo ustaw aria-label / aria-labelledby. Sam placeholder nie wystarczy.

5 regułn CSS z prawdopodobnie zbyt niskim kontrastem tekstu

Wymagane: 4,5:1 (normalny) lub 3:1 (duży tekst). Przy „założonym tle strony” rzeczywistego tła nie udało się pewnie ustalić — w razie wątpliwości sprawdź w przeglądarce. Znaleziono m.in.: `.dark a-gift-link dialog`: #e0e0e0 auf #fff (Vorfahren-Hintergrund) = 1.32:1 · `a-color-scheme .a-color-scheme__icon--moon`: #959595 auf #c7c7c7 (Vorfahren-Hintergrund) = 1.77: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-color-scheme .a-color-scheme__icon--moon, a-opt-in[is-active] .opt-in__footnote, .a-android-native-app-prompt__load-app, a-topic .topic-label

Oto co należy zrobić: Przyciemnij kolor tekstu lub rozjaśnij tło, aż osiągniesz wymaganą wartość minimalną. Nigdy nie używaj koloru jako jedynego wyróżnika.

13 odnośników bez rozpoznawalnej nazwy w kodzie HTML

Puste odnośniki albo tylko ikona/obraz bez alt. aria-label ustawiony przez JavaScript nie jest tu rozpoznawany.

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

Oto co należy zrobić: Dodaj widoczny tekst odnośnika, a przy odnośnikach z ikoną użyj aria-label lub obrazu z alt.

6 przycisków bez nazwy w kodzie HTML

Przyciski bez tekstu i bez aria-label są nieme dla czytników ekranu — o ile nazwa nie jest ustawiana przez 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">

Oto co należy zrobić: Dodaj tekst przycisku lub ustaw aria-label.

Brak nagłówka <h1> w dostarczonym kodzie HTML

Każda strona powinna zaczynać się od dokładnie jednego h1. Na stronach budowanych w JavaScripcie h1 może powstać dopiero w przeglądarce — wtedy sprawdź w wyrenderowanym DOM.

body

Oto co należy zrobić: Wstaw sensowny <h1> jako pierwszy nagłówek (najlepiej już po stronie serwera).

6 zduplikowanych atrybutów id

np. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. Psuje powiązania label-for i aria.

[id]

Oto co należy zrobić: Nadawaj unikalne identyfikatory id.