Kontrollerad den 2026-09-24 · https://www.heise.de/
5 kritiskt hindern · dessutom 2 att kontrollera.
Sedan senaste skanningen: ingen förändring.
Hur beräknas poängen? (100 startpoäng)
| 36 av 521 bilder utan alt-attribut | -18 |
| 4 formulärfält utan igenkännbar märkning | -18 |
| 13 länk(ar) utan igenkännbart namn i HTML-koden | -18 |
| 6 knapp(ar) utan namn i HTML-koden | -18 |
| 5 CSS-regeln med möjligen för låg textkontrast | -18 |
| Ingen <h1>-rubrik i den levererade HTML-koden | -7 |
| 6 dubbletta id-attribut | -7 |
| Resultat | 0 / 100 |
Möjlig att uppfatta
36 av 521 bilder utan alt-attribut
Bilder som laddas in via JavaScript ingår inte här.
<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">
Det här bör du göra: Ge varje <img> ett alt: kort beskrivning för meningsbärande bilder, alt="" för rent dekorativa.
4 formulärfält utan igenkännbar märkning
Kontrollera om det finns ett aria-label som satts via 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">
Det här bör du göra: Koppla varje fält till ett <label for>-element eller ange aria-label / aria-labelledby. Enbart en placeholder räcker inte.
5 CSS-regeln med möjligen för låg textkontrast
Krävs: 4,5:1 (normal) respektive 3:1 (stor text). Vid ”antagen sidbakgrund” kunde den faktiska bakgrunden inte fastställas säkert — kontrollera i webbläsaren vid tveksamhet. Hittat bland annat: `.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
Det här bör du göra: Gör textfärgen mörkare eller bakgrunden ljusare tills respektive minimivärde uppnås. Använd aldrig färg som enda särskiljande kännetecken.
Hanterbar
13 länk(ar) utan igenkännbart namn i HTML-koden
Tomma länkar eller bara en ikon/bild utan alt. Ett aria-label som satts via JavaScript känns inte igen här.
<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
Det här bör du göra: Lägg till synlig länktext, eller använd aria-label eller en bild med alt för ikonlänkar.
6 knapp(ar) utan namn i HTML-koden
Knappar utan text och utan aria-label är stumma för skärmläsare — om inte namnet sätts via 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">
Det här bör du göra: Lägg till knapptext eller ange aria-label.
Ingen <h1>-rubrik i den levererade HTML-koden
Varje sida bör börja med exakt en h1. På sidor som byggs upp via JavaScript kan h1 uppstå först i webbläsaren — kontrollera då i den renderade DOM:en.
body
Det här bör du göra: Infoga en meningsfull <h1> som första rubrik (helst redan på serversidan).
Robust
6 dubbletta id-attribut
t.ex. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. Bryter label-for- och aria-kopplingar.
[id]
Det här bör du göra: Tilldela unika id.
Nästa steg
- 36 av 521 bilder utan alt-attribut. Ge varje <img> ett alt: kort beskrivning för meningsbärande bilder, alt="" för rent dekorativa.
- 4 formulärfält utan igenkännbar märkning. Koppla varje fält till ett <label for>-element eller ange aria-label / aria-labelledby. Enbart en placeholder räcker inte.
- 13 länk(ar) utan igenkännbart namn i HTML-koden. Lägg till synlig länktext, eller använd aria-label eller en bild med alt för ikonlänkar.
- 6 knapp(ar) utan namn i HTML-koden. Lägg till knapptext eller ange aria-label.
- 5 CSS-regeln med möjligen för låg textkontrast. Gör textfärgen mörkare eller bakgrunden ljusare tills respektive minimivärde uppnås. Använd aldrig färg som enda särskiljande kännetecken.
Veckovis omskanning, JS-renderad, e-post vid nya hinder — kommer snart.
Skapa en tillgänglighetsredogörelse →
Metod & gränser
Den 2026-09-24 kontrollerades den HTML som www.heise.de levererar vid första besöket utan inloggning, plus upp till fyra länkade CSS-filer från samma domän. Kontrollerat: färgkontrast (från CSS), textalternativ, formulärmärkning, namn på kontroller, rubrikstruktur, sidtitel och sidspråk, zoomspärr, dubbletta id, positiva tabindex-värden, landmärken.
Inte kontrollerat: allt som skapas via JavaScript, tangentbordshanterbarhet, synligt fokus, fokusordning, skärmläsarutrop, innehåll bakom inloggning, undersidor. Det automatiska testet hittar ungefär 20–35 % av WCAG-överträdelserna — resten kräver en manuell granskning. En ögonblicksbild, inte ett juridiskt utlåtande.
Overlay-widgetar (tillgänglighetsknappar som ändrar kontrast eller typsnitt) gör inte en webbplats konform — de funna hindren måste åtgärdas i källkoden. Varför overlays inte hjälper