Sprawdzono 31.08.2026 · https://www.heise.de/
5 barieran krytycznan · dodatkowo 2 do sprawdzenia.
Jak powstaje wynik? (100 punktów początkowych)
| {n} z {total} obrazów bez atrybutu alt | -18 |
| {n} pól formularza bez rozpoznawalnej etykiety | -18 |
| {n} odnośników bez rozpoznawalnej nazwy w kodzie HTML | -18 |
| {n} przycisków bez nazwy w kodzie HTML | -18 |
| {n} reguł{nPlural} CSS z prawdopodobnie zbyt niskim kontrastem tekstu | -18 |
| Brak nagłówka <h1> w dostarczonym kodzie HTML | -7 |
| {n} zduplikowanych atrybutów id | -7 |
| Wynik | 0 / 100 |
Postrzegalność
{n} z {total} obrazów bez atrybutu alt
Obrazy doczytywane przez JavaScript nie są tu uwzględnione.
img
Oto co należy zrobić: Nadaj alt każdemu <img>: krótki opis dla obrazów niosących treść, alt="" dla czysto dekoracyjnych.
{n} pól formularza bez rozpoznawalnej etykiety
Sprawdź, czy istnieje aria-label ustawiony przez JavaScript.
input, select, textarea
Oto co należy zrobić: Powiąż każde pole z elementem <label for> albo ustaw aria-label / aria-labelledby. Sam placeholder nie wystarczy.
{n} reguł{nPlural} 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.: {examples}
.a-android-native-app-prompt__close-banner, .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.
Funkcjonalność
{n} 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
Oto co należy zrobić: Dodaj widoczny tekst odnośnika, a przy odnośnikach z ikoną użyj aria-label lub obrazu z alt.
{n} 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
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).
Solidność
{n} zduplikowanych atrybutów id
np. {examples}. Psuje powiązania label-for i aria.
[id]
Oto co należy zrobić: Nadawaj unikalne identyfikatory id.
Następne kroki
- {n} z {total} obrazów bez atrybutu alt. Nadaj alt każdemu <img>: krótki opis dla obrazów niosących treść, alt="" dla czysto dekoracyjnych.
- {n} pól formularza bez rozpoznawalnej etykiety. Powiąż każde pole z elementem <label for> albo ustaw aria-label / aria-labelledby. Sam placeholder nie wystarczy.
- {n} 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.
- {n} przycisków bez nazwy w kodzie HTML. Dodaj tekst przycisku lub ustaw aria-label.
- {n} reguł{nPlural} 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
31.08.2026 sprawdzono kod HTML, który www.heise.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.
Widżety overlay (przyciski dostępności zmieniające kontrast lub czcionkę) nie zapewniają zgodności — znalezione bariery trzeba usunąć w kodzie źródłowym. Dlaczego overlaye nie pomagają