Ellenőrizve: 2026. 09. 24. · https://www.heise.de/
5 kritikus akadályn · ezenkívül 2 ellenőrizendő.
Hogyan jön ki a pontszám? (100 kezdőpont)
| 40 / 519 kép alt attribútum nélkül | -18 |
| 4 űrlapmező felismerhető címke nélkül | -18 |
| 16 hivatkozás felismerhető név nélkül a HTML-ben | -18 |
| 6 gomb név nélkül a HTML-ben | -18 |
| 5 CSS-szabályn esetleg túl alacsony szövegkontraszttal | -18 |
| Nincs <h1> címsor a kiszolgált HTML-ben | -7 |
| 6 kettőzött id attribútum | -7 |
| Eredmény | 0 / 100 |
Érzékelhető
40 / 519 kép alt attribútum nélkül
A JavaScripttel utólag betöltött képek itt nincsenek figyelembe véve.
<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">
Ezt kell tenned: Adj minden <img> elemnek alt-ot: rövid leírás a tartalomhordozó képeknél, alt="" a tisztán díszítőknél.
4 űrlapmező felismerhető címke nélkül
Ellenőrizd, van-e JavaScripttel beállított 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">
Ezt kell tenned: Kösd össze minden mezőt egy <label for> elemmel, vagy állíts be aria-label / aria-labelledby értéket. Önmagában a placeholder nem elég.
5 CSS-szabályn esetleg túl alacsony szövegkontraszttal
Szükséges: 4,5:1 (normál), illetve 3:1 (nagy szöveg). „Feltételezett oldalháttér” esetén a tényleges hátteret nem lehetett biztosan meghatározni — kétség esetén ellenőrizd a böngészőben. Megtalálva többek között: `.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
Ezt kell tenned: Sötétítsd a szövegszínt vagy világosítsd a hátteret, amíg el nem éred a megfelelő minimumértéket. A színt soha ne használd egyetlen megkülönböztető jellemzőként.
Működtethető
16 hivatkozás felismerhető név nélkül a HTML-ben
Üres hivatkozások vagy csak ikon/kép alt nélkül. A JavaScripttel beállított aria-label itt nem ismerhető fel.
<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
Ezt kell tenned: Adj hozzá látható hivatkozásszöveget, vagy ikonos hivatkozásoknál használj aria-label-t, illetve alt-tal ellátott képet.
6 gomb név nélkül a HTML-ben
A szöveg és aria-label nélküli gombok a képernyőolvasók számára némák — hacsak a nevet nem JavaScript állítja be.
<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">
Ezt kell tenned: Adj hozzá gombszöveget, vagy állíts be aria-label-t.
Nincs <h1> címsor a kiszolgált HTML-ben
Minden oldalnak pontosan egy h1-gyel kellene kezdődnie. A JavaScripttel felépített oldalaknál a h1 csak a böngészőben jöhet létre — akkor a megjelenített DOM-ban ellenőrizd.
body
Ezt kell tenned: Szúrj be egy kifejező <h1>-et első címsorként (lehetőleg már a kiszolgáló oldalán).
Robusztus
6 kettőzött id attribútum
pl. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. Elrontja a label-for és aria hozzárendeléseket.
[id]
Ezt kell tenned: Adj egyedi id-ket.
Következő lépések
- 40 / 519 kép alt attribútum nélkül. Adj minden <img> elemnek alt-ot: rövid leírás a tartalomhordozó képeknél, alt="" a tisztán díszítőknél.
- 4 űrlapmező felismerhető címke nélkül. Kösd össze minden mezőt egy <label for> elemmel, vagy állíts be aria-label / aria-labelledby értéket. Önmagában a placeholder nem elég.
- 16 hivatkozás felismerhető név nélkül a HTML-ben. Adj hozzá látható hivatkozásszöveget, vagy ikonos hivatkozásoknál használj aria-label-t, illetve alt-tal ellátott képet.
- 6 gomb név nélkül a HTML-ben. Adj hozzá gombszöveget, vagy állíts be aria-label-t.
- 5 CSS-szabályn esetleg túl alacsony szövegkontraszttal. Sötétítsd a szövegszínt vagy világosítsd a hátteret, amíg el nem éred a megfelelő minimumértéket. A színt soha ne használd egyetlen megkülönböztető jellemzőként.
Heti újraszkennelés, JS-megjelenítéssel, e-mail új akadályok esetén — hamarosan.
Akadálymentességi nyilatkozat készítése →
Módszer & korlátok
2026. 09. 24. napján azt a HTML-t ellenőriztük, amelyet a(z) www.heise.de az első, bejelentkezés nélküli hívásnál kiszolgál, valamint legfeljebb négy, ugyanarról a domainről hivatkozott CSS-fájlt. Ellenőrizve: színkontraszt (a CSS-ből), szöveges alternatívák, űrlapcímkék, kezelőelemek nevei, címsorszerkezet, oldalcím és oldalnyelv, nagyítászár, kettőzött id-k, pozitív tabindex-értékek, tereptárgyak.
Nem ellenőrizve: minden, ami JavaScripttel jön létre, a billentyűzetes kezelhetőség, a látható fókusz, a fókuszsorrend, a képernyőolvasó bemondása, a bejelentkezés mögötti tartalom, az aloldalak. Az automatikus teszt a WCAG-sértések nagyjából 20–35 %-át találja meg — a többihez kézi vizsgálat kell. Pillanatfelvétel, nem jogi ítélet.
Az overlay widgetek (a kontrasztot vagy betűméretet váltó akadálymentességi gombok) nem teszik megfelelővé az oldalt — a talált akadályokat a forráskódban kell javítani. Miért nem segítenek az overlayek