Vérifié le 24/09/2026 · https://www.heise.de/
5 barrièren critiquen · en plus, 2 à vérifier.
Depuis le dernier scan : aucun changement.
Comment le score est-il calculé ? (100 points de départ)
| 40 image(s) sur 517 sans attribut alt | -18 |
| 4 champ(s) de formulaire sans étiquette identifiable | -18 |
| 16 lien(s) sans nom identifiable dans le HTML | -18 |
| 6 bouton(s) sans nom dans le HTML | -18 |
| 5 règlen CSS avec un contraste de texte potentiellement insuffisant | -18 |
| Aucun titre <h1> dans le HTML livré | -7 |
| 6 attributs id en double | -7 |
| Résultat | 0 / 100 |
Perceptible
40 image(s) sur 517 sans attribut alt
Les images chargées via JavaScript ne sont pas prises en compte ici.
<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">
Ce que vous devriez faire : Donner un alt à chaque <img> : brève description pour les images porteuses de sens, alt="" pour les images purement décoratives.
4 champ(s) de formulaire sans étiquette identifiable
Vérifiez si un aria-label est défini 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">
Ce que vous devriez faire : Relier chaque champ à un élément <label for> ou définir aria-label / aria-labelledby. Un simple placeholder ne suffit pas.
5 règlen CSS avec un contraste de texte potentiellement insuffisant
Requis : 4,5:1 (normal) ou 3:1 (grand texte). En cas de « fond de page supposé », le fond réel n'a pas pu être déterminé avec certitude — dans le doute, vérifier dans le navigateur. Trouvé notamment : `.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
Ce que vous devriez faire : Assombrir la couleur du texte ou éclaircir le fond jusqu'à atteindre la valeur minimale requise. Ne jamais utiliser la couleur comme unique moyen de distinction.
Utilisable
16 lien(s) sans nom identifiable dans le HTML
Liens vides ou réduits à une icône/image sans alt. Un aria-label défini via JavaScript n'est pas détecté ici.
<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
Ce que vous devriez faire : Ajouter un texte de lien visible, ou pour les liens-icônes utiliser aria-label ou une image avec alt.
6 bouton(s) sans nom dans le HTML
Les boutons sans texte ni aria-label sont muets pour les lecteurs d'écran — sauf si le nom est défini 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">
Ce que vous devriez faire : Ajouter le texte du bouton ou définir aria-label.
Aucun titre <h1> dans le HTML livré
Chaque page devrait commencer par exactement un h1. Sur les pages construites en JavaScript, le h1 peut n'apparaître que dans le navigateur — vérifier alors dans le DOM rendu.
body
Ce que vous devriez faire : Insérer un <h1> explicite comme premier titre (si possible dès le serveur).
Robuste
6 attributs id en double
p. ex. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. Casse les associations label-for et aria.
[id]
Ce que vous devriez faire : Attribuer des id uniques.
Prochaines étapes
- 40 image(s) sur 517 sans attribut alt. Donner un alt à chaque <img> : brève description pour les images porteuses de sens, alt="" pour les images purement décoratives.
- 4 champ(s) de formulaire sans étiquette identifiable. Relier chaque champ à un élément <label for> ou définir aria-label / aria-labelledby. Un simple placeholder ne suffit pas.
- 16 lien(s) sans nom identifiable dans le HTML. Ajouter un texte de lien visible, ou pour les liens-icônes utiliser aria-label ou une image avec alt.
- 6 bouton(s) sans nom dans le HTML. Ajouter le texte du bouton ou définir aria-label.
- 5 règlen CSS avec un contraste de texte potentiellement insuffisant. Assombrir la couleur du texte ou éclaircir le fond jusqu'à atteindre la valeur minimale requise. Ne jamais utiliser la couleur comme unique moyen de distinction.
Nouveau scan hebdomadaire, avec rendu JS, e-mail en cas de nouvelle barrière — bientôt disponible.
Créer une déclaration d'accessibilité →
Méthode & limites
Le 24/09/2026, nous avons vérifié le HTML que www.heise.de livre au premier accès sans connexion, plus jusqu'à quatre fichiers CSS liés du même domaine. Vérifiés : contraste des couleurs (d'après le CSS), alternatives textuelles, étiquetage des formulaires, noms des éléments d'interface, structure des titres, titre et langue de la page, blocage du zoom, identifiants dupliqués, valeurs tabindex positives, points de repère.
Non vérifiés : tout ce qui est généré par JavaScript, l'utilisabilité au clavier, la visibilité du focus, l'ordre de focus, l'annonce par lecteur d'écran, les contenus derrière une connexion, les sous-pages. Le test automatique détecte environ 20 à 35 % des infractions WCAG — le reste nécessite un audit manuel. Instantané, pas un jugement juridique.
Les widgets overlay (boutons d’accessibilité qui modifient le contraste ou la police) ne rendent pas un site conforme — les obstacles détectés doivent être corrigés dans le code source. Pourquoi les overlays n’aident pas