Sprawdzono 1.09.2026 · https://www.spiegel.de/
1 bariera krytyczna · dodatkowo 4 do sprawdzenia.
Jak powstaje wynik? (100 punktów początkowych)
| 21 przycisków bez nazwy w kodzie HTML | -18 |
| 1 pól formularza bez rozpoznawalnej etykiety | -7 |
| 3 odnośników bez rozpoznawalnej nazwy w kodzie HTML | -7 |
| Brak nagłówka <h1> w dostarczonym kodzie HTML | -7 |
| 5 regułn CSS z prawdopodobnie zbyt niskim kontrastem tekstu | -7 |
| Wynik | 54 / 100 |
Postrzegalność
1 pól formularza bez rozpoznawalnej etykiety
Sprawdź, czy istnieje aria-label ustawiony przez JavaScript.
<input name="suchbegriff" id="search-input-field" placeholder="Seite durchsuchen ...">
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.: `.text-shade-base`: #989694 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 2.95:1 · `.debug.svelte-1x5iokp`: red auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.00:1 · `.text-effi-primary-base`: #e64415 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.04:1 · `.text-shade-dark`: #807e7c auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.04:1 · `.text-elf-primary-base`: #3c8771 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.29:1
.text-shade-base, .debug.svelte-1x5iokp, .text-effi-primary-base, .text-shade-dark, .text-elf-primary-base
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.
Funkcjonalność
21 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="bg-white flex items-center justify-around bg-white d><button class="bg-white flex items-center justify-around bg-white d><button><button class="flex items-center justify-center my-auto rounded-cir>
Oto co należy zrobić: Dodaj tekst przycisku lub ustaw aria-label.
3 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 target="_self" class="block svelte-1x5iokp"><a target="_self" class="flex flex-col text-black dark:text-shade-ligh<a target="_self" class="text-black dark:text-shade-lightest block">
Oto co należy zrobić: Dodaj widoczny tekst odnośnika, a przy odnośnikach z ikoną użyj aria-label lub obrazu z alt.
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).
Już rozwiązane poprawnie
- Alternatywy tekstowe: brak problemów wykrywalnych automatycznie
- Odnośnik pomijający do treści obecny
- Punkt orientacyjny <main> obecny
Następne kroki
- 21 przycisków bez nazwy w kodzie HTML. Dodaj tekst przycisku lub ustaw aria-label.
- 1 pól formularza bez rozpoznawalnej etykiety. Powiąż każde pole z elementem <label for> albo ustaw aria-label / aria-labelledby. Sam placeholder nie wystarczy.
- 3 odnośników bez rozpoznawalnej nazwy w kodzie HTML. Dodaj widoczny tekst odnośnika, a przy odnośnikach z ikoną użyj aria-label lub obrazu z alt.
- Brak nagłówka <h1> w dostarczonym kodzie HTML. Wstaw sensowny <h1> jako pierwszy nagłówek (najlepiej już po stronie serwera).
- 5 regułn CSS z prawdopodobnie zbyt niskim kontrastem tekstu. Przyciemnij kolor tekstu lub rozjaśnij tło, aż osiągniesz wymaganą wartość minimalną. Nigdy nie używaj koloru jako jedynego wyróżnika.
Cotygodniowe ponowne skanowanie, z renderowaniem JS, e-mail przy nowych barierach — wkrótce.
Utwórz deklarację dostępności →
Metoda & ograniczenia
1.09.2026 sprawdzono kod HTML, który www.spiegel.de dostarcza przy pierwszym wejściu bez logowania, oraz do czterech powiązanych plików CSS z tej samej domeny. Sprawdzono: kontrast kolorów (na podstawie CSS), alternatywy tekstowe, etykiety formularzy, nazwy elementów sterujących, strukturę nagłówków, tytuł i język strony, blokadę powiększenia, zduplikowane identyfikatory id, dodatnie wartości tabindex, punkty orientacyjne.
Nie sprawdzono: wszystkiego, co powstaje w JavaScripcie, obsługi za pomocą klawiatury, widoczności fokusu, kolejności fokusu, zapowiedzi czytników ekranu, treści za logowaniem, podstron. Test automatyczny wykrywa około 20–35 % naruszeń WCAG — reszta wymaga audytu ręcznego. Migawka, nie orzeczenie prawne.