Zkontrolováno 24. 9. 2026 · https://www.heise.de/
5 kritická bariéran · navíc 2 ke kontrole.
Jak vzniká skóre? (100 výchozích bodů)
| 40 z 519 obrázků bez atributu alt | -18 |
| 4 polí formuláře bez rozpoznatelného popisku | -18 |
| 16 odkazů bez rozpoznatelného názvu v HTML | -18 |
| 6 tlačítek bez názvu v HTML | -18 |
| 5 pravideln CSS s možná příliš nízkým kontrastem textu | -18 |
| V doručeném HTML žádný nadpis <h1> | -7 |
| 6 duplicitních atributů id | -7 |
| Výsledek | 0 / 100 |
Vnímatelnost
40 z 519 obrázků bez atributu alt
Obrázky načítané přes JavaScript zde nejsou zahrnuty.
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3377" height="1898"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="1920" height="1079"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3200" height="1798"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="300" height="250">
Toto byste měli udělat: Každému <img> dejte alt: krátký popis u obrázků nesoucích význam, alt="" u čistě dekorativních.
4 polí formuláře bez rozpoznatelného popisku
Zkontrolujte, zda existuje aria-label nastavené přes 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 byste měli udělat: Propojte každé pole s prvkem <label for> nebo nastavte aria-label / aria-labelledby. Samotný placeholder nestačí.
5 pravideln CSS s možná příliš nízkým kontrastem textu
Nutné: 4,5:1 (normální) resp. 3:1 (velký text). U „předpokládaného pozadí stránky“ nebylo možné skutečné pozadí bezpečně určit — v případě pochybností zkontrolujte v prohlížeči. Nalezeno mj.: `.dark a-gift-link dialog`: #e0e0e0 auf #fff (Vorfahren-Hintergrund) = 1.32:1 · `.a-android-native-app-prompt__close-banner`: #323232 auf rgba(0,0,0,0) = 1.64: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-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
Toto byste měli udělat: Ztmavte barvu textu nebo zesvětlete pozadí, dokud není dosažena příslušná minimální hodnota. Nikdy nepoužívejte barvu jako jediný rozlišovací znak.
Ovladatelnost
16 odkazů bez rozpoznatelného názvu v HTML
Prázdné odkazy nebo jen ikona/obrázek bez alt. aria-label nastavené přes JavaScript zde není rozpoznáno.
<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 byste měli udělat: Doplňte viditelný text odkazu, u odkazů s ikonou použijte aria-label nebo obrázek s alt.
6 tlačítek bez názvu v HTML
Tlačítka bez textu a bez aria-label jsou pro čtečky obrazovky němá — pokud se název nenastavuje přes 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 byste měli udělat: Doplňte text tlačítka nebo nastavte aria-label.
V doručeném HTML žádný nadpis <h1>
Každá stránka by měla začínat přesně jedním h1. U stránek sestavovaných přes JavaScript může h1 vzniknout až v prohlížeči — pak zkontrolujte v renderovaném DOM.
body
Toto byste měli udělat: Vložte smysluplný <h1> jako první nadpis (pokud možno už na straně serveru).
Robustnost
6 duplicitních atributů id
např. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. Rozbíjí vazby label-for a aria.
[id]
Toto byste měli udělat: Přidělujte jedinečná id.
Další kroky
- 40 z 519 obrázků bez atributu alt. Každému <img> dejte alt: krátký popis u obrázků nesoucích význam, alt="" u čistě dekorativních.
- 4 polí formuláře bez rozpoznatelného popisku. Propojte každé pole s prvkem <label for> nebo nastavte aria-label / aria-labelledby. Samotný placeholder nestačí.
- 16 odkazů bez rozpoznatelného názvu v HTML. Doplňte viditelný text odkazu, u odkazů s ikonou použijte aria-label nebo obrázek s alt.
- 6 tlačítek bez názvu v HTML. Doplňte text tlačítka nebo nastavte aria-label.
- 5 pravideln CSS s možná příliš nízkým kontrastem textu. Ztmavte barvu textu nebo zesvětlete pozadí, dokud není dosažena příslušná minimální hodnota. Nikdy nepoužívejte barvu jako jediný rozlišovací znak.
Týdenní opakované skenování, s renderováním JS, e-mail při nových bariérách — už brzy.
Vytvořit prohlášení o přístupnosti →
Metoda & hranice
Dne 24. 9. 2026 bylo zkontrolováno HTML, které www.heise.de doručuje při prvním přístupu bez přihlášení, a až čtyři připojené soubory CSS ze stejné domény. Zkontrolováno: barevný kontrast (z CSS), textové alternativy, popisky formulářů, názvy ovládacích prvků, struktura nadpisů, název a jazyk stránky, blokování přiblížení, duplicitní id, kladné hodnoty tabindex, orientační body.
Nezkontrolováno: vše, co vzniká přes JavaScript, ovladatelnost klávesnicí, viditelný fokus, pořadí fokusu, oznámení čtečky obrazovky, obsah za přihlášením, podstránky. Automatický test najde zhruba 20–35 % porušení WCAG — zbytek vyžaduje ruční kontrolu. Momentka, nikoli právní rozhodnutí.
Overlay widgety (tlačítka přístupnosti, která přepínají kontrast nebo písmo) web nezpřístupní v souladu s normou — nalezené bariéry je nutné opravit ve zdrojovém kódu. Proč overlaye nepomáhají