Geprüft am 31.8.2026 · https://www.heise.de/
5 kritische Barrieren · zusätzlich 2 zu prüfen.
Wie kommt der Score zustande? (100 Startpunkte)
| 44 von 543 Bildern ohne alt-Attribut | -18 |
| 4 Formularfeld(er) ohne erkennbare Beschriftung | -18 |
| 16 Link(s) ohne erkennbaren Namen im HTML | -18 |
| 6 Schaltfläche(n) ohne Namen im HTML | -18 |
| 3 CSS-Regeln mit zu geringem Textkontrast | -18 |
| Keine <h1>-Überschrift im ausgelieferten HTML | -7 |
| 6 doppelte id-Attribute | -7 |
| Ergebnis | 0 / 100 |
Wahrnehmbar
44 von 543 Bildern ohne alt-Attribut
Beispiele: data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZG, data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZG, data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZG. (Bilder, die per JavaScript nachgeladen werden, sind hier nicht erfasst.)
img
Das solltest du tun: Jedem <img> ein alt geben: kurze Beschreibung bei sinntragenden Bildern, alt="" bei rein dekorativen.
4 Formularfeld(er) ohne erkennbare Beschriftung
Beispiele: input[type=text][name=q], input[type=text][name=q], select[name=in]. Prüfe, ob ein per JavaScript gesetztes aria-label existiert.
input, select, textarea
Das solltest du tun: Jedes Feld mit einem <label for>-Element verbinden oder aria-label / aria-labelledby setzen. Nur ein placeholder reicht nicht.
3 CSS-Regeln mit zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Gefunden u. a.: `.a-android-native-app-prompt__close-banner` #323232 auf rgba(0,0,0,0) = 1.64:1 · `.a-android-native-app-prompt__load-app` #fff auf #27a209 = 3.36:1 · `a-topic .topic-label` #fff auf #ed3725 = 4.06:1
.a-android-native-app-prompt__close-banner, .a-android-native-app-prompt__load-app, a-topic .topic-label
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
Bedienbar
16 Link(s) ohne erkennbaren Namen im HTML
Leere Links oder nur ein Icon/Bild ohne alt. Beispiele: <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. Ein per JavaScript gesetztes aria-label wird hier nicht erkannt.
a
Das solltest du tun: Sichtbaren Linktext ergänzen, oder bei Icon-Links aria-label bzw. ein Bild mit alt verwenden.
6 Schaltfläche(n) ohne Namen im HTML
Buttons ohne Text und ohne aria-label sind für Screenreader stumm — sofern der Name nicht per JavaScript gesetzt wird.
button
Das solltest du tun: Button-Text ergänzen oder aria-label setzen.
Keine <h1>-Überschrift im ausgelieferten HTML
Jede Seite sollte mit genau einer h1 beginnen. Bei per JavaScript aufgebauten Seiten kann die h1 erst im Browser entstehen — dann im gerenderten DOM prüfen.
body
Das solltest du tun: Eine aussagekräftige <h1> als erste Überschrift einfügen (möglichst schon serverseitig).
Robust
6 doppelte id-Attribute
z. B. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. Bricht label-for- und aria-Zuordnungen.
[id]
Das solltest du tun: IDs eindeutig vergeben.
Nächste Schritte
- 44 von 543 Bildern ohne alt-Attribut. Jedem <img> ein alt geben: kurze Beschreibung bei sinntragenden Bildern, alt="" bei rein dekorativen.
- 4 Formularfeld(er) ohne erkennbare Beschriftung. Jedes Feld mit einem <label for>-Element verbinden oder aria-label / aria-labelledby setzen. Nur ein placeholder reicht nicht.
- 16 Link(s) ohne erkennbaren Namen im HTML. Sichtbaren Linktext ergänzen, oder bei Icon-Links aria-label bzw. ein Bild mit alt verwenden.
- 6 Schaltfläche(n) ohne Namen im HTML. Button-Text ergänzen oder aria-label setzen.
- 3 CSS-Regeln mit zu geringem Textkontrast. Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
Wöchentlicher Re-Scan, JS-gerendert, E-Mail bei neuen Barrieren — kommt bald.
Barrierefreiheitserklärung erstellen →
Methodik & Grenzen
Geprüft wurde am 31.8.2026 das HTML, das www.heise.de beim ersten Aufruf ohne Login ausliefert, plus bis zu vier verlinkte CSS-Dateien derselben Domain. Geprüft: Farbkontrast (aus CSS), Textalternativen, Formular-Beschriftung, Bedienelement-Namen, Überschriften-Struktur, Seitentitel und -sprache, Zoom-Sperre, doppelte IDs, positive tabindex-Werte, Landmarks.
Nicht geprüft: alles, was per JavaScript entsteht, Tastatur-Bedienbarkeit, sichtbarer Fokus, Fokus-Reihenfolge, Screenreader-Ansage, Inhalte hinter Login, Unterseiten. Der automatische Test findet grob 20–35 % der WCAG-Verstöße — der Rest braucht eine manuelle Prüfung. Momentaufnahme, kein Rechtsurteil.