Diese Texte stehen genau so im Report, wenn das Problem auf Ihrer Website gefunden wird.
Aufwand gering
Bilder ohne Beschreibung (Alternativtext)
Bilder brauchen einen kurzen Text, der sagt, was darauf zu sehen ist. Fehlt er, bleibt das Bild für manche Menschen unsichtbar – oder der Screenreader liest den Dateinamen vor („IMG_4711“).
Betrifft vor allem: Blinde und stark sehbehinderte Menschen, die sich Seiten mit einem Screenreader vorlesen lassen; Suchmaschinen, die Ihre Inhalte dadurch besser verstehen
So geht es in WooCommerce
- Öffnen Sie im WordPress-Admin „Medien › Mediathek“ und klicken Sie auf das Bild.
- Tragen Sie im Feld „Alternativer Text“ ein, was zu sehen ist, und speichern Sie.
- Produktbilder sind ganz normale Mediathek-Bilder – derselbe Weg gilt für Produkt-Galerien.
Aufwand gering
Formularfelder ohne Beschriftung
Ein Eingabefeld – oft das Newsletter-Feld oder die Suche – hat keine Beschriftung. Ein Platzhaltertext im Feld zählt nicht: Er verschwindet beim Tippen und wird nicht zuverlässig vorgelesen.
Betrifft vor allem: Blinde und stark sehbehinderte Menschen, die sich Seiten mit einem Screenreader vorlesen lassen; Menschen, die per Sprachbefehl bedienen („Klicke auf In den Warenkorb“); Menschen mit Lern- oder Konzentrationsschwierigkeiten und viele ältere Menschen
So geht es in WooCommerce
- Bei Formular-Plugins (Contact Form 7, WPForms …) jedem Feld eine Feldbeschriftung geben, nicht nur einen Platzhalter.
Aufwand gering
Schaltflächen ohne erkennbaren Namen
Eine Schaltfläche hat keinen Namen – etwa ein Kreuz zum Schließen, ein Pfeil im Bild-Karussell oder ein Plus beim Warenkorb. Screenreader sagen nur „Schalter“, niemand weiß, was passiert.
Betrifft vor allem: Blinde und stark sehbehinderte Menschen, die sich Seiten mit einem Screenreader vorlesen lassen; Menschen, die per Sprachbefehl bedienen („Klicke auf In den Warenkorb“)
So geht es in WooCommerce
- Bei Social-Icons-Blöcken jedem Symbol eine Beschriftung geben (Block anklicken, „Link-Beschriftung“). Bei Theme-Symbolen: Fall für die Agentur.
Aufwand gering
Links ohne erkennbaren Namen
Ein Link hat keinen Text, den ein Screenreader vorlesen kann – typisch bei Symbolen wie Instagram, Warenkorb oder Lupe. Vorgelesen wird dann nur „Link“ oder eine kryptische Adresse.
Betrifft vor allem: Blinde und stark sehbehinderte Menschen, die sich Seiten mit einem Screenreader vorlesen lassen; Menschen, die per Sprachbefehl bedienen („Klicke auf In den Warenkorb“)
So geht es in WooCommerce
- Bei Social-Icons-Blöcken jedem Symbol eine Beschriftung geben (Block anklicken, „Link-Beschriftung“). Bei Theme-Symbolen: Fall für die Agentur.
Aufwand mittel
Text zu blass für den Hintergrund (Kontrast)
Hellgraue Schrift auf Weiß oder weiße Schrift auf hellen Farben ist für viele Menschen schwer lesbar. Vorgeschrieben ist ein Mindestkontrast von 4,5 : 1, bei großer Schrift 3 : 1.
Betrifft vor allem: Menschen mit Sehschwäche, die vergrößern oder schwache Kontraste schlecht erkennen – auch alle, die draußen bei Sonne aufs Handy schauen; Menschen mit Farbsehschwäche (etwa jeder zwölfte Mann); Alle, die Ihre Seite auf dem Smartphone nutzen
So geht es in WooCommerce
- Farben stellt meist das Theme ein: „Design › Customizer“ oder bei Block-Themes „Design › Editor › Stile“.
Aufwand gering
Sprache der Seite nicht angegeben
Die Seite sagt nicht, in welcher Sprache sie geschrieben ist. Screenreader lesen deutschen Text dann womöglich mit englischer Aussprache vor – kaum verständlich.
Betrifft vor allem: Blinde und stark sehbehinderte Menschen, die sich Seiten mit einem Screenreader vorlesen lassen; Suchmaschinen, die Ihre Inhalte dadurch besser verstehen
So geht es in WooCommerce
- „Einstellungen › Allgemein › Sprache der Website“ auf Deutsch stellen. Fehlt die Angabe trotzdem, gibt das Theme sie nicht aus – Fall für die Agentur.
Ebenfalls mit WooCommerce-Anleitung: Bildbeschreibung wiederholt den Text daneben, Seite ohne Titel, Hauptüberschrift fehlt, Links im Text nur an der Farbe erkennbar.