{n} van {total} afbeeldingen zonder alt-attribuut

Afbeeldingen die via JavaScript worden nageladen, zijn hier niet meegenomen.

• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3072" height="1726">
• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="4032" height="2266">
• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="1672" height="940">
• <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="300" height="250">

Dit zou je moeten doen: Elke <img> een alt geven: korte beschrijving bij betekenisdragende afbeeldingen, alt="" bij zuiver decoratieve.

{n} formulierveld(en) zonder herkenbaar label

Controleer of er een via JavaScript ingesteld aria-label bestaat.

• <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">

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.

{n} CSS-regel{nPlural} 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: {examples}

.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

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.

{n} 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-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

Dit zou je moeten doen: Zichtbare linktekst toevoegen, of bij icoonlinks aria-label of een afbeelding met alt gebruiken.

{n} 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="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">

Dit zou je moeten doen: Knoptekst toevoegen of aria-label instellen.

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).

{n} dubbele id-attributen

bijv. {examples}. Breekt label-for- en aria-koppelingen.

[id]

Dit zou je moeten doen: Id's uniek toekennen.