Verificat la 24.09.2026 · https://www.heise.de/
5 barieră criticăn · în plus 2 de verificat.
Cum rezultă scorul? (100 de puncte inițiale)
| 40 din 519 imagini fără atribut alt | -18 |
| 4 câmpuri de formular fără etichetă identificabilă | -18 |
| 16 linkuri fără nume identificabil în HTML | -18 |
| 6 butoane fără nume în HTML | -18 |
| 5 regulăn CSS cu un contrast de text posibil prea mic | -18 |
| Niciun titlu <h1> în HTML-ul livrat | -7 |
| 6 atribute id duplicate | -7 |
| Rezultat | 0 / 100 |
Perceptibil
40 din 519 imagini fără atribut alt
Imaginile încărcate prin JavaScript nu sunt luate în calcul aici.
<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">
Iată ce ar trebui să faci: Dă fiecărui <img> un alt: descriere scurtă la imaginile purtătoare de sens, alt="" la cele pur decorative.
4 câmpuri de formular fără etichetă identificabilă
Verifică dacă există un aria-label setat prin 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">
Iată ce ar trebui să faci: Leagă fiecare câmp de un element <label for> sau setează aria-label / aria-labelledby. Doar un placeholder nu este suficient.
5 regulăn CSS cu un contrast de text posibil prea mic
Necesar: 4,5:1 (normal), respectiv 3:1 (text mare). La „fundal de pagină presupus”, fundalul real nu a putut fi determinat cu certitudine — în caz de dubiu, verifică în browser. Găsit, printre altele: `.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
Iată ce ar trebui să faci: Întunecă culoarea textului sau luminează fundalul până când se atinge valoarea minimă respectivă. Nu folosi niciodată culoarea ca unic element de diferențiere.
Operabil
16 linkuri fără nume identificabil în HTML
Linkuri goale sau doar o pictogramă/imagine fără alt. Un aria-label setat prin JavaScript nu este identificat aici.
<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
Iată ce ar trebui să faci: Adaugă text de link vizibil sau, la linkurile cu pictogramă, folosește aria-label ori o imagine cu alt.
6 butoane fără nume în HTML
Butoanele fără text și fără aria-label sunt mute pentru cititoarele de ecran — cu excepția cazului în care numele este setat prin 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">
Iată ce ar trebui să faci: Adaugă textul butonului sau setează aria-label.
Niciun titlu <h1> în HTML-ul livrat
Fiecare pagină ar trebui să înceapă cu exact un h1. La paginile construite prin JavaScript, h1 poate apărea abia în browser — atunci verifică în DOM-ul randat.
body
Iată ce ar trebui să faci: Inserează un <h1> semnificativ ca prim titlu (de preferință deja pe partea de server).
Robust
6 atribute id duplicate
de ex. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. Strică asocierile label-for și aria.
[id]
Iată ce ar trebui să faci: Atribuie id-uri unice.
Pașii următori
- 40 din 519 imagini fără atribut alt. Dă fiecărui <img> un alt: descriere scurtă la imaginile purtătoare de sens, alt="" la cele pur decorative.
- 4 câmpuri de formular fără etichetă identificabilă. Leagă fiecare câmp de un element <label for> sau setează aria-label / aria-labelledby. Doar un placeholder nu este suficient.
- 16 linkuri fără nume identificabil în HTML. Adaugă text de link vizibil sau, la linkurile cu pictogramă, folosește aria-label ori o imagine cu alt.
- 6 butoane fără nume în HTML. Adaugă textul butonului sau setează aria-label.
- 5 regulăn CSS cu un contrast de text posibil prea mic. Întunecă culoarea textului sau luminează fundalul până când se atinge valoarea minimă respectivă. Nu folosi niciodată culoarea ca unic element de diferențiere.
Rescanare săptămânală, cu randare JS, e-mail la bariere noi — vine în curând.
Creează o declarație de accesibilitate →
Metodă & limite
La 24.09.2026 a fost verificat HTML-ul pe care www.heise.de îl livrează la prima accesare fără autentificare, plus până la patru fișiere CSS asociate din același domeniu. Verificat: contrastul culorilor (din CSS), alternativele text, etichetele de formular, numele elementelor de control, structura titlurilor, titlul și limba paginii, blocarea zoomului, id-uri duplicate, valori tabindex pozitive, repere.
Neverificat: tot ce apare prin JavaScript, operabilitatea de la tastatură, focalizarea vizibilă, ordinea de focalizare, anunțul cititorului de ecran, conținutul din spatele autentificării, subpaginile. Testul automat găsește aproximativ 20–35 % dintre încălcările WCAG — restul necesită o verificare manuală. Instantaneu, nu o hotărâre juridică.
Widgeturile overlay (butoane de accesibilitate care schimbă contrastul sau fontul) nu fac un site conform — barierele găsite trebuie remediate în codul sursă. De ce nu ajută overlay-urile