Comprobado el 1/9/2026 · https://www.spiegel.de/
1 barrera crítica · además, 4 a revisar.
¿Cómo se calcula la puntuación? (100 puntos de partida)
| 21 botón(es) sin nombre en el HTML | -18 |
| 1 campo(s) de formulario sin etiqueta reconocible | -7 |
| 3 enlace(s) sin nombre reconocible en el HTML | -7 |
| Sin encabezado <h1> en el HTML entregado | -7 |
| 5 reglan CSS con un contraste de texto posiblemente insuficiente | -7 |
| Resultado | 54 / 100 |
Perceptible
1 campo(s) de formulario sin etiqueta reconocible
Comprueba si existe un aria-label definido mediante JavaScript.
<input name="suchbegriff" id="search-input-field" placeholder="Seite durchsuchen ...">
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: `.text-shade-base`: #989694 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 2.95:1 · `.debug.svelte-1x5iokp`: red auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.00:1 · `.text-effi-primary-base`: #e64415 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.04:1 · `.text-shade-dark`: #807e7c auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.04:1 · `.text-elf-primary-base`: #3c8771 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.29:1
.text-shade-base, .debug.svelte-1x5iokp, .text-effi-primary-base, .text-shade-dark, .text-elf-primary-base
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
21 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="bg-white flex items-center justify-around bg-white d><button class="bg-white flex items-center justify-around bg-white d><button><button class="flex items-center justify-center my-auto rounded-cir>
Esto es lo que deberías hacer: Añadir el texto del botón o definir aria-label.
3 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 target="_self" class="block svelte-1x5iokp"><a target="_self" class="flex flex-col text-black dark:text-shade-ligh<a target="_self" class="text-black dark:text-shade-lightest block">
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.
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).
Ya resuelto correctamente
- Alternativas textuales: sin problemas detectables automáticamente
- Enlace para saltar al contenido presente
- Punto de referencia <main> presente
Próximos pasos
- 21 botón(es) sin nombre en el HTML. Añadir el texto del botón o definir aria-label.
- 1 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.
- 3 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.
- Sin encabezado <h1> en el HTML entregado. Insertar un <h1> significativo como primer encabezado (a ser posible ya en el servidor).
- 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 1/9/2026 se comprobó el HTML que www.spiegel.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.