Tarkistettu 24.9.2026 · https://www.heise.de/
5 kriittinen esten · lisäksi 2 tarkistettavaa.
Edellisestä skannauksesta: ei muutosta.
Miten pistemäärä muodostuu? (100 aloituspistettä)
| 36 / 521 kuvaa ilman alt-attribuuttia | -18 |
| 4 lomakekenttää ilman tunnistettavaa merkintää | -18 |
| 13 linkkiä ilman tunnistettavaa nimeä HTML:ssä | -18 |
| 6 painiketta ilman nimeä HTML:ssä | -18 |
| 5 CSS-sääntön, joissa tekstikontrasti on mahdollisesti liian pieni | -18 |
| Ei <h1>-otsikkoa toimitetussa HTML:ssä | -7 |
| 6 kaksoiskappaletta id-attribuuteista | -7 |
| Tulos | 0 / 100 |
Havaittava
36 / 521 kuvaa ilman alt-attribuuttia
JavaScriptillä ladattavia kuvia ei ole tässä huomioitu.
<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">
Näin sinun kannattaa toimia: Anna jokaiselle <img>-elementille alt: lyhyt kuvaus merkitystä kantavista kuvista, alt="" puhtaasti koristeellisista.
4 lomakekenttää ilman tunnistettavaa merkintää
Tarkista, onko olemassa JavaScriptillä asetettu aria-label.
<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">
Näin sinun kannattaa toimia: Yhdistä jokainen kenttä <label for> -elementtiin tai aseta aria-label / aria-labelledby. Pelkkä placeholder ei riitä.
5 CSS-sääntön, joissa tekstikontrasti on mahdollisesti liian pieni
Vaaditaan: 4,5:1 (normaali) tai 3:1 (suuri teksti). Kun kyseessä on ”oletettu sivun tausta”, todellista taustaa ei voitu määrittää varmasti — tarkista epäselvissä tapauksissa selaimessa. Löydetty mm.: `.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
Näin sinun kannattaa toimia: Tummenna tekstin väriä tai vaalenna taustaa, kunnes kyseinen vähimmäisarvo saavutetaan. Älä koskaan käytä väriä ainoana erottavana tekijänä.
Hallittava
13 linkkiä ilman tunnistettavaa nimeä HTML:ssä
Tyhjät linkit tai vain kuvake/kuva ilman alt-tekstiä. JavaScriptillä asetettua aria-labelia ei tunnisteta tässä.
<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
Näin sinun kannattaa toimia: Lisää näkyvä linkkiteksti, tai käytä kuvakelinkeissä aria-labelia tai alt-tekstillistä kuvaa.
6 painiketta ilman nimeä HTML:ssä
Painikkeet ilman tekstiä ja ilman aria-labelia ovat ruudunlukijoille mykkiä — ellei nimeä aseteta JavaScriptillä.
<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">
Näin sinun kannattaa toimia: Lisää painikkeen teksti tai aseta aria-label.
Ei <h1>-otsikkoa toimitetussa HTML:ssä
Jokaisen sivun tulisi alkaa täsmälleen yhdellä h1:llä. JavaScriptillä rakennettavilla sivuilla h1 voi syntyä vasta selaimessa — tarkista silloin renderöidystä DOM:ista.
body
Näin sinun kannattaa toimia: Lisää merkityksellinen <h1> ensimmäiseksi otsikoksi (mielellään jo palvelinpuolella).
Toimintavarma
6 kaksoiskappaletta id-attribuuteista
esim. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. Rikkoo label-for- ja aria-liitokset.
[id]
Näin sinun kannattaa toimia: Anna yksilölliset id:t.
Seuraavat askeleet
- 36 / 521 kuvaa ilman alt-attribuuttia. Anna jokaiselle <img>-elementille alt: lyhyt kuvaus merkitystä kantavista kuvista, alt="" puhtaasti koristeellisista.
- 4 lomakekenttää ilman tunnistettavaa merkintää. Yhdistä jokainen kenttä <label for> -elementtiin tai aseta aria-label / aria-labelledby. Pelkkä placeholder ei riitä.
- 13 linkkiä ilman tunnistettavaa nimeä HTML:ssä. Lisää näkyvä linkkiteksti, tai käytä kuvakelinkeissä aria-labelia tai alt-tekstillistä kuvaa.
- 6 painiketta ilman nimeä HTML:ssä. Lisää painikkeen teksti tai aseta aria-label.
- 5 CSS-sääntön, joissa tekstikontrasti on mahdollisesti liian pieni. Tummenna tekstin väriä tai vaalenna taustaa, kunnes kyseinen vähimmäisarvo saavutetaan. Älä koskaan käytä väriä ainoana erottavana tekijänä.
Viikoittainen uusintaskannaus, JS-renderöity, sähköposti uusista esteistä — tulossa pian.
Menetelmä & rajat
24.9.2026 tarkistettiin se HTML, jonka www.heise.de toimittaa ensimmäisellä käynnillä ilman kirjautumista, sekä enintään neljä saman verkkotunnuksen linkitettyä CSS-tiedostoa. Tarkistettu: värikontrasti (CSS:stä), tekstivastineet, lomakekentän merkinnät, hallintaelementtien nimet, otsikkorakenne, sivun otsikko ja kieli, zoomauksen lukitus, kaksois-id:t, positiiviset tabindex-arvot, maamerkit.
Ei tarkistettu: kaikki, mikä syntyy JavaScriptillä, näppäimistökäytettävyys, näkyvä kohdistus, kohdistusjärjestys, ruudunlukijan kuulutus, kirjautumisen takana oleva sisältö, alasivut. Automaattinen testi löytää suunnilleen 20–35 % WCAG-rikkomuksista — loput edellyttävät käsin tehtävää arviointia. Tilannekuva, ei oikeudellinen ratkaisu.
Overlay-widgetit (saavutettavuuspainikkeet, jotka vaihtavat kontrastia tai fonttia) eivät tee sivustosta vaatimustenmukaista — löydetyt esteet on korjattava lähdekoodissa. Miksi overlayt eivät auta