Comprobado el 24/9/2026 · https://www.heise.de/
5 barreran crítican · además, 2 a revisar.
Desde el último escaneo: sin cambios.
¿Cómo se calcula la puntuación? (100 puntos de partida)
| 40 de 519 imágenes sin atributo alt | -18 |
| 4 campo(s) de formulario sin etiqueta reconocible | -18 |
| 16 enlace(s) sin nombre reconocible en el HTML | -18 |
| 6 botón(es) sin nombre en el HTML | -18 |
| 5 reglan CSS con un contraste de texto posiblemente insuficiente | -18 |
| Sin encabezado <h1> en el HTML entregado | -7 |
| 6 atributos id duplicados | -7 |
| Resultado | 0 / 100 |
Perceptible
40 de 519 imágenes sin atributo alt
Las imágenes que se cargan mediante JavaScript no se contemplan aquí.
<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">
Esto es lo que deberías hacer: Dar un alt a cada <img>: descripción breve para las imágenes con contenido, alt="" para las puramente decorativas.
4 campo(s) de formulario sin etiqueta reconocible
Comprueba si existe un aria-label definido mediante 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">
Esto es lo que deberías hacer: Vincular cada campo a un elemento <label for> o definir aria-label / aria-labelledby. Un placeholder por sí solo no basta.
5 reglan CSS con un contraste de texto posiblemente insuficiente
Necesario: 4,5:1 (normal) o 3:1 (texto grande). En caso de «fondo de página supuesto», no se pudo determinar con seguridad el fondo real — en caso de duda, comprobar en el navegador. Encontrado, entre otros: `.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
Esto es lo que deberías hacer: Oscurecer el color del texto o aclarar el fondo hasta alcanzar el valor mínimo correspondiente. Nunca usar el color como único medio de distinción.
Operable
16 enlace(s) sin nombre reconocible en el HTML
Enlaces vacíos o solo con un icono/imagen sin alt. Un aria-label definido mediante JavaScript no se reconoce aquí.
<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
Esto es lo que deberías hacer: Añadir texto de enlace visible o, en los enlaces con icono, usar aria-label o una imagen con alt.
6 botón(es) sin nombre en el HTML
Los botones sin texto y sin aria-label son mudos para los lectores de pantalla — salvo que el nombre se defina mediante 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">
Esto es lo que deberías hacer: Añadir el texto del botón o definir aria-label.
Sin encabezado <h1> en el HTML entregado
Cada página debería empezar con exactamente un h1. En páginas construidas con JavaScript, el h1 puede aparecer solo en el navegador — comprobar entonces en el DOM renderizado.
body
Esto es lo que deberías hacer: Insertar un <h1> significativo como primer encabezado (a ser posible ya en el servidor).
Robusto
6 atributos id duplicados
p. ej. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. Rompe las asociaciones label-for y aria.
[id]
Esto es lo que deberías hacer: Asignar id únicos.
Próximos pasos
- 40 de 519 imágenes sin atributo alt. Dar un alt a cada <img>: descripción breve para las imágenes con contenido, alt="" para las puramente decorativas.
- 4 campo(s) de formulario sin etiqueta reconocible. Vincular cada campo a un elemento <label for> o definir aria-label / aria-labelledby. Un placeholder por sí solo no basta.
- 16 enlace(s) sin nombre reconocible en el HTML. Añadir texto de enlace visible o, en los enlaces con icono, usar aria-label o una imagen con alt.
- 6 botón(es) sin nombre en el HTML. Añadir el texto del botón o definir aria-label.
- 5 reglan CSS con un contraste de texto posiblemente insuficiente. Oscurecer el color del texto o aclarar el fondo hasta alcanzar el valor mínimo correspondiente. Nunca usar el color como único medio de distinción.
Reescaneo semanal, con renderizado JS, correo ante nuevas barreras — pronto disponible.
Crear una declaración de accesibilidad →
Método & límites
El 24/9/2026 se comprobó el HTML que www.heise.de entrega en el primer acceso sin iniciar sesión, más hasta cuatro archivos CSS enlazados del mismo dominio. Comprobado: contraste de color (a partir del CSS), alternativas textuales, etiquetado de formularios, nombres de los elementos de control, estructura de encabezados, título e idioma de la página, bloqueo del zoom, id duplicados, valores tabindex positivos, puntos de referencia.
No comprobado: todo lo que se genera mediante JavaScript, el manejo por teclado, la visibilidad del foco, el orden de foco, el anuncio por lector de pantalla, los contenidos tras inicio de sesión, las subpáginas. La prueba automática detecta aproximadamente el 20–35 % de los incumplimientos de las WCAG — el resto requiere una auditoría manual. Instantánea, no un dictamen jurídico.
Los widgets overlay (botones de accesibilidad que cambian el contraste o la fuente) no hacen que un sitio sea conforme: las barreras detectadas deben corregirse en el código fuente. Por qué los overlays no ayudan