Skontrolované 24. 9. 2026 · https://www.heise.de/
5 kritická bariéran · navyše 2 na kontrolu.
Od posledného skenovania: bez zmeny.
Ako vzniká skóre? (100 východiskových bodov)
| 36 z 521 obrázkov bez atribútu alt | -18 |
| 4 polí formulára bez rozpoznateľného označenia | -18 |
| 13 odkazov bez rozpoznateľného názvu v HTML | -18 |
| 6 tlačidiel bez názvu v HTML | -18 |
| 5 pravidieln CSS s možno príliš nízkym kontrastom textu | -18 |
| V doručenom HTML žiadny nadpis <h1> | -7 |
| 6 duplicitných atribútov id | -7 |
| Výsledok | 0 / 100 |
Vnímateľnosť
36 z 521 obrázkov bez atribútu alt
Obrázky načítavané cez JavaScript tu nie sú zahrnuté.
<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">
Toto by ste mali urobiť: Každému <img> dajte alt: krátky popis pri obrázkoch nesúcich význam, alt="" pri čisto dekoratívnych.
4 polí formulára bez rozpoznateľného označenia
Skontrolujte, či existuje aria-label nastavené cez 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">
Toto by ste mali urobiť: Prepojte každé pole s prvkom <label for> alebo nastavte aria-label / aria-labelledby. Samotný placeholder nestačí.
5 pravidieln CSS s možno príliš nízkym kontrastom textu
Potrebné: 4,5:1 (normálny) resp. 3:1 (veľký text). Pri „predpokladanom pozadí stránky“ sa skutočné pozadie nedalo bezpečne určiť — v prípade pochybností skontrolujte v prehliadači. Nájdené o. i.: `.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
Toto by ste mali urobiť: Stmavte farbu textu alebo zosvetlite pozadie, kým sa nedosiahne príslušná minimálna hodnota. Nikdy nepoužívajte farbu ako jediný rozlišovací znak.
Ovládateľnosť
13 odkazov bez rozpoznateľného názvu v HTML
Prázdne odkazy alebo len ikona/obrázok bez alt. aria-label nastavené cez JavaScript sa tu nerozpozná.
<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
Toto by ste mali urobiť: Doplňte viditeľný text odkazu, pri odkazoch s ikonou použite aria-label alebo obrázok s alt.
6 tlačidiel bez názvu v HTML
Tlačidlá bez textu a bez aria-label sú pre čítačky obrazovky nemé — ak sa názov nenastavuje cez 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">
Toto by ste mali urobiť: Doplňte text tlačidla alebo nastavte aria-label.
V doručenom HTML žiadny nadpis <h1>
Každá stránka by mala začínať presne jedným h1. Pri stránkach zostavovaných cez JavaScript môže h1 vzniknúť až v prehliadači — potom skontrolujte v renderovanom DOM.
body
Toto by ste mali urobiť: Vložte zmysluplný <h1> ako prvý nadpis (podľa možnosti už na strane servera).
Robustnosť
6 duplicitných atribútov id
napr. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. Rozbíja väzby label-for a aria.
[id]
Toto by ste mali urobiť: Prideľujte jedinečné id.
Ďalšie kroky
- 36 z 521 obrázkov bez atribútu alt. Každému <img> dajte alt: krátky popis pri obrázkoch nesúcich význam, alt="" pri čisto dekoratívnych.
- 4 polí formulára bez rozpoznateľného označenia. Prepojte každé pole s prvkom <label for> alebo nastavte aria-label / aria-labelledby. Samotný placeholder nestačí.
- 13 odkazov bez rozpoznateľného názvu v HTML. Doplňte viditeľný text odkazu, pri odkazoch s ikonou použite aria-label alebo obrázok s alt.
- 6 tlačidiel bez názvu v HTML. Doplňte text tlačidla alebo nastavte aria-label.
- 5 pravidieln CSS s možno príliš nízkym kontrastom textu. Stmavte farbu textu alebo zosvetlite pozadie, kým sa nedosiahne príslušná minimálna hodnota. Nikdy nepoužívajte farbu ako jediný rozlišovací znak.
Týždenné opakované skenovanie, s renderovaním JS, e-mail pri nových bariérach — už čoskoro.
Vytvoriť vyhlásenie o prístupnosti →
Metóda & hranice
Dňa 24. 9. 2026 sa skontrolovalo HTML, ktoré www.heise.de doručuje pri prvom prístupe bez prihlásenia, a až štyri pripojené súbory CSS z tej istej domény. Skontrolované: farebný kontrast (z CSS), textové alternatívy, označenie formulárov, názvy ovládacích prvkov, štruktúra nadpisov, názov a jazyk stránky, blokovanie priblíženia, duplicitné id, kladné hodnoty tabindex, orientačné body.
Neskontrolované: všetko, čo vzniká cez JavaScript, ovládateľnosť klávesnicou, viditeľný fokus, poradie fokusu, oznámenie čítačky obrazovky, obsah za prihlásením, podstránky. Automatický test nájde približne 20–35 % porušení WCAG — zvyšok si vyžaduje ručnú kontrolu. Momentka, nie právne rozhodnutie.
Overlay widgety (tlačidlá prístupnosti, ktoré prepínajú kontrast alebo písmo) nezabezpečia súlad webu — nájdené bariéry treba opraviť v zdrojovom kóde. Prečo overlaye nepomáhajú