Gecontroleerd op 1-9-2026 · https://www.spiegel.de/
1 kritieke drempel · daarnaast 4 te controleren.
Hoe komt de score tot stand? (100 startpunten)
| 21 knop(pen) zonder naam in de HTML | -18 |
| 1 formulierveld(en) zonder herkenbaar label | -7 |
| 3 link(s) zonder herkenbare naam in de HTML | -7 |
| Geen <h1>-kop in de geleverde HTML | -7 |
| 5 CSS-regeln met mogelijk te weinig tekstcontrast | -7 |
| Resultaat | 54 / 100 |
Waarneembaar
1 formulierveld(en) zonder herkenbaar label
Controleer of er een via JavaScript ingesteld aria-label bestaat.
<input name="suchbegriff" id="search-input-field" placeholder="Seite durchsuchen ...">
Dit zou je moeten doen: Elk veld verbinden met een <label for>-element of aria-label / aria-labelledby instellen. Alleen een placeholder is niet genoeg.
5 CSS-regeln met mogelijk te weinig tekstcontrast
Nodig: 4,5:1 (normaal) of 3:1 (grote tekst). Bij „aangenomen paginaachtergrond” kon de werkelijke achtergrond niet met zekerheid worden bepaald — controleer bij twijfel in de browser. Onder meer gevonden: `.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
Dit zou je moeten doen: De tekstkleur donkerder maken of de achtergrond lichter maken tot de betreffende minimumwaarde is bereikt. Kleur nooit als enig onderscheidend kenmerk gebruiken.
Bedienbaar
21 knop(pen) zonder naam in de HTML
Knoppen zonder tekst en zonder aria-label zijn stom voor schermlezers — tenzij de naam via JavaScript wordt ingesteld.
<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>
Dit zou je moeten doen: Knoptekst toevoegen of aria-label instellen.
3 link(s) zonder herkenbare naam in de HTML
Lege links of alleen een icoon/afbeelding zonder alt. Een via JavaScript ingesteld aria-label wordt hier niet herkend.
<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">
Dit zou je moeten doen: Zichtbare linktekst toevoegen, of bij icoonlinks aria-label of een afbeelding met alt gebruiken.
Geen <h1>-kop in de geleverde HTML
Elke pagina zou met precies één h1 moeten beginnen. Bij pagina's die via JavaScript worden opgebouwd, kan de h1 pas in de browser ontstaan — controleer dan in de gerenderde DOM.
body
Dit zou je moeten doen: Een betekenisvolle <h1> als eerste kop invoegen (zo mogelijk al serverzijdig).
Al goed opgelost
- Tekstalternatieven: geen automatisch herkenbare problemen
- Skiplink naar de inhoud aanwezig
- <main>-landmark aanwezig
Volgende stappen
- 21 knop(pen) zonder naam in de HTML. Knoptekst toevoegen of aria-label instellen.
- 1 formulierveld(en) zonder herkenbaar label. Elk veld verbinden met een <label for>-element of aria-label / aria-labelledby instellen. Alleen een placeholder is niet genoeg.
- 3 link(s) zonder herkenbare naam in de HTML. Zichtbare linktekst toevoegen, of bij icoonlinks aria-label of een afbeelding met alt gebruiken.
- Geen <h1>-kop in de geleverde HTML. Een betekenisvolle <h1> als eerste kop invoegen (zo mogelijk al serverzijdig).
- 5 CSS-regeln met mogelijk te weinig tekstcontrast. De tekstkleur donkerder maken of de achtergrond lichter maken tot de betreffende minimumwaarde is bereikt. Kleur nooit als enig onderscheidend kenmerk gebruiken.
Wekelijkse herscan, JS-gerenderd, e-mail bij nieuwe drempels — komt binnenkort.
Toegankelijkheidsverklaring maken →
Methode & grenzen
Op 1-9-2026 is de HTML gecontroleerd die www.spiegel.de bij het eerste bezoek zonder inloggen levert, plus maximaal vier gekoppelde CSS-bestanden van hetzelfde domein. Gecontroleerd: kleurcontrast (uit de CSS), tekstalternatieven, formulierlabels, namen van bedieningselementen, koppenstructuur, paginatitel en -taal, zoomblokkering, dubbele id's, positieve tabindex-waarden, landmarks.
Niet gecontroleerd: alles wat via JavaScript ontstaat, toetsenbordbediening, zichtbare focus, focusvolgorde, schermlezeraankondiging, inhoud achter een login, subpagina's. De automatische test vindt ruwweg 20–35 % van de WCAG-schendingen — de rest vereist een handmatige controle. Momentopname, geen juridisch oordeel.