Echtes BeispielDie Website eines echten deutschen Unternehmens, am 24. Okt. 2026 mit dem kostenlosen Schnellcheck geprüft. Name und Adresse entfernt.
Das war ein schneller, automatischer Check: Ladezeit, Struktur, Kontraste und Größen wurden gemessen, Design, Texte und Bedienbarkeit im Detail aber noch nicht. Insgesamt steht deine Seite bei 52 von 100 Punkten, vor allem weil viele Links und Buttons für Hilfstechnologien keinen erkennbaren Namen haben und Linktexte wie „mehr erfahren“ an unterschiedliche Ziele führen. Ein vollständiger Audit würde zusätzlich Design, Texte und Nutzerführung mit einer KI-Prüfung bewerten – das würde ich als Nächstes empfehlen.
Wenn gleiche Linktexte zu verschiedenen Zielen führen, verlieren Besucher das Vertrauen in deine Navigation und zögern bei jedem Klick.
LösungGib jedem Ziel genau einen festen Namen und verwende ihn überall – im Menü, in Buttons und im Footer. Räum doppelte oder mehrdeutige Linktexte wie „Mehr erfahren“ auf und benenne sie nach ihrem Ziel.
Ohne einen erkennbaren Namen wissen blinde oder sehbehinderte Besucher nicht, was ein Button bewirkt, und brechen die Nutzung ab.
LösungLass deinem Entwickler jedem Pfeil-Button und jedem Icon-Button eine kurze, unsichtbare Beschriftung wie „Nächstes Produkt“ oder „Vorheriges Rezept“ hinzufügen.
Ohne dauerhaft sichtbares Label wissen Nutzer nicht mehr, welches Feld sie gerade ausfüllen, besonders wenn sie kurz abgelenkt werden oder ein Hilfsmittel nutzen.
LösungFüge über dem E-Mail-Feld eine feste, dauerhaft sichtbare Beschriftung hinzu, die auch nach dem Tippen stehen bleibt.
16 Bedienelemente haben keinen nutzbaren Namen für Screenreader-Nutzer, und ein Formularfeld verliert seine Beschriftung, sobald man zu tippen beginnt. Das sind die Stellen, an denen ich zuerst ansetzen würde.
Die Pfeile zum Durchblättern der Karussells, etwa beim Rezepte-Slider und beim Produkte-Slider, haben keinen sichtbaren oder vorgelesenen Text – Screenreader-Nutzer hören dort nur „Button“, ohne zu wissen, wofür er ist. Ohne einen erkennbaren Namen wissen blinde oder sehbehinderte Besucher nicht, was ein Button bewirkt, und brechen die Nutzung ab.
LösungLass deinem Entwickler jedem Pfeil-Button und jedem Icon-Button eine kurze, unsichtbare Beschriftung wie „Nächstes Produkt“ oder „Vorheriges Rezept“ hinzufügen.
Ergänze bei den Elementen .owl-nav > .owl-prev / .owl-next sowie weiteren icon-only Controls ein aria-label (z. B. aria-label="Nächstes Element"), damit der Accessible Name nicht leer bleibt und die axe-Regeln button-name/link-name erfüllt sind.
WCAG 2.2 SC 4.1.2, 2.5.3
Im Formular ist das Feld „E-Mail Adresse*“ nur als Platzhaltertext angelegt – sobald jemand zu tippen beginnt, verschwindet die Beschriftung komplett. Ohne dauerhaft sichtbares Label wissen Nutzer nicht mehr, welches Feld sie gerade ausfüllen, besonders wenn sie kurz abgelenkt werden oder ein Hilfsmittel nutzen.
LösungFüge über dem E-Mail-Feld eine feste, dauerhaft sichtbare Beschriftung hinzu, die auch nach dem Tippen stehen bleibt.
Ergänze ein persistentes <label for="..."> für das Feld input.form-control (aktuell nur über placeholder "E-Mail Adresse*" gelöst) und setze das passende autocomplete-Attribut (z. B. autocomplete="email").
WCAG 2.2 SC 3.3.1, 3.3.2
Zoomst du die Seite auf 200 Prozent, musst du zusätzlich seitlich scrollen, um den Inhalt vollständig zu lesen. Viele Menschen vergrößern die Ansicht, um besser lesen zu können – wenn das Layout dabei zerbricht, gehen Inhalte und Buttons für sie verloren.
LösungLass prüfen, ob die Seite bei starkem Zoom und größerem Zeilenabstand noch vollständig und ohne seitliches Scrollen nutzbar bleibt.
Nutze relative Einheiten und ein flexibles Layout, damit die Seite bei 400% Zoom sowie mit WCAG-Textabstand-Overrides ohne horizontales Scrollen und ohne abgeschnittene Inhalte funktioniert – aktuell erzeugt der 320px-Viewport bei 200% Zoom horizontalen Scroll.
WCAG 2.2 SC 1.4.4, 1.4.10
Wenn du dich mit der Tabulatortaste durch die Seite bewegst, bleiben viele Elemente unsichtbar markiert – zum Beispiel die Buttons „Jetzt Rabattcode herunterladen!“ und „Jetzt Cashback sichern!“. Insgesamt zeigen 13 von 83 getesteten Stellen gar keine sichtbare Markierung, bei 15 weiteren wird sie von anderen Elementen verdeckt. Wer ohne Maus, also per Tastatur, surft, verliert dadurch komplett die Orientierung auf der Seite.
LösungLass prüfen, ob beim Durchtabben jedes klickbare Element – Buttons, Links, Pfeile im Karussell – deutlich sichtbar hervorgehoben wird, zum Beispiel mit einem farbigen Rahmen.
Füge allen interaktiven Elementen einen klaren :focus-visible-Stil hinzu (z. B. 2 px Outline mit mindestens 3:1 Kontrast) und stelle sicher, dass sticky Header, Cookie-Banner oder Overlays den Fokusrahmen nie verdecken; betroffen u. a. die .wn-button-Elemente und die Owl-Carousel-Navigation (button.owl-next).
WCAG 2.2 SC 2.4.7, 2.4.11
Auf allen 15 geprüften Seiten ist die Reihenfolge der Navigationspunkte anders als auf der Startseite. Wenn sich das Menü ständig verändert, verlieren Besucher die Orientierung, besonders wenn sie sich auf ihr Gedächtnis oder Hilfstechnologie verlassen.
LösungLege eine feste Reihenfolge für dein Hauptmenü fest – zum Beispiel Produkte, Rezepte, Aktuelles, Kontakt – und verwende sie auf jeder Seite genau so.
Navigationsstruktur (Reihenfolge und Beschriftungen) in einer gemeinsamen Komponente/Template zentralisieren, sodass sie auf allen 15 gecrawlten Seiten identisch gerendert wird; keine kontextabhängige Reihenfolge je nach Seite.
WCAG 2.2 SC 3.2.1, 3.2.2
Die Seite enthält zwei „h1“-Überschriften, darunter „Genuss, der Generationen verbindet – entdecke unsere Geschmacksvielfalt!“ und „Aktionen“, statt einer klaren Hauptüberschrift. Screenreader-Nutzer springen anhand von Überschriften durch die Seite – zwei Hauptüberschriften verwirren dabei die Orientierung.
LösungLege eine Überschrift als die eine Hauptüberschrift der Seite fest und wandle die zweite in eine Unterüberschrift um.
Nur ein „h1“-Element pro Seite verwenden; „Aktionen“ auf „h2“ oder tiefer herabstufen und sicherstellen, dass die Überschriftenhierarchie danach ohne Sprünge (h1 → h2 → h3) aufgebaut ist.
WCAG 2.2 SC 1.3.1, 1.3.2
„mehr erfahren“ taucht bei dir an drei verschiedenen Stellen auf und führt jedes Mal woanders hin – das verwirrt mehr, als es hilft.
Mehrere Buttons und Links heißen „Mehr erfahren“ oder „Weiterlesen“, etwa bei den Rezept-Kacheln und im Nachhaltigkeits-Bereich – „Mehr erfahren“ führt dabei an drei verschiedene Stellen. Ohne ein konkretes Verb und Ziel im Linktext zögern Besucher zu klicken, weil sie nicht wissen, was sie erwartet.
LösungErsetze allgemeine Linktexte durch konkrete Formulierungen, die sagen, was als Nächstes passiert, zum Beispiel „Rezept ansehen“ oder „Mehr über Nachhaltigkeit erfahren“.
Ersetze generische Linktexte („Mehr erfahren“, „Weiterlesen“ an mehreren a.wn-button / a.text-color-green Elementen) durch eindeutige Verb+Objekt-Texte, die zum jeweiligen href passen, statt denselben Text für unterschiedliche Ziele mehrfach zu verwenden.
WCAG 2.2 SC 2.4.4
Auf der Startseite kommt „wir“ beziehungsweise „unser“ 16-mal vor, während „du“ nur 10-mal verwendet wird. Besucher interessieren sich zuerst für das, was sie bekommen, nicht dafür, was euer Unternehmen tut.
LösungFormuliere zentrale Abschnitte wie „Was uns ausmacht“ stärker aus Sicht der Leser um, sodass „du“ öfter vorkommt als „wir“.
Überarbeite die Copy der Landingpage-Abschnitte so, dass reader-fokussierte Wörter („du“, „dein“) die company-fokussierten („wir“, „unser“, „uns“) zahlenmäßig übersteigen, insbesondere im Bereich „Was uns ausmacht“.
Government Digital Service: GOV.UK content design: writing for the web
Die Texte der Seite liegen mit einem Lesbarkeitswert von 48 unter dem empfohlenen Niveau von 60, auch wenn die Satzlänge mit rund 19 Wörtern im Rahmen bleibt. Schwerer verständliche Texte verlieren Leser schneller, gerade beim Lesen auf dem Handy.
LösungFormuliere kürzere, einfachere Sätze mit alltäglichen Wörtern und erkläre Fachbegriffe beim ersten Auftauchen kurz.
Copy auf Flesch-Amstad-Wert ≥ 60 optimieren (aktuell 48,21): kürzere Sätze, aktive statt passive Formulierungen, einfache Wortwahl; Fachbegriffe beim ersten Vorkommen erläutern.
plainlanguage.gov: Federal Plain Language Guidelines
Dein Hauptbild braucht auf dem Handy über 16 Sekunden, bis es erscheint – das ist deutlich zu lang und wirkt sich auch auf dein Google-Ranking aus.
Auf dem Handy dauert es rund 16 Sekunden, bis das größte sichtbare Element der Startseite erscheint – angestrebt werden unter 2,5 Sekunden. Besucher springen ab, bevor die Seite überhaupt geladen ist, und Suchmaschinen bewerten langsame Seiten schlechter.
LösungLass dein Hauptbild auf der Startseite verkleinern und so einbinden, dass es sofort sichtbar ist, statt erst spät nachzuladen.
Optimiere und preloade das größte Above-the-fold-Bild (aktuell LCP 16247 ms mobil, Ziel ≤2500 ms), komprimiere Bildformate (z. B. WebP) und verschiebe nicht kritisches JavaScript auf später im Ladevorgang.
web.dev: Core Web Vitals thresholds (LCP 2.5 s, INP 200 ms, CLS 0.1)
Mehrere Seitentitel sind sehr kurz, etwa „Aktuelles“, „Kontakt“ und „Werksverkauf“, und mindestens eine Seite hat gar keine Meta-Beschreibung. Titel und Beschreibung sind deine Anzeige in der Suche – zu knappe oder fehlende Texte bringen weniger Klicks.
LösungSchreibe für jede Seite einen eigenen, aussagekräftigen Titel mit Thema zuerst und „[Marke]“ am Ende, dazu eine kurze Beschreibung von ein bis zwei Sätzen, die Lust aufs Klicken macht.
Title-Tags auf ca. 50–60 Zeichen bringen (Hauptthema zuerst, Marke am Ende) und für alle Seiten eindeutige Meta-Descriptions mit 120–160 Zeichen ergänzen, insbesondere für die 7 betroffenen Titel und die Seite ohne Description.
Google Search Central: Influencing title links in search results
Die Bilder auf deiner Seite sind unnötig groß und könnten rund 5,6 MB kleiner sein. Außerdem fehlen bei vielen Bildern feste Breiten- und Höhenangaben, und einige werden in niedrigerer Auflösung als nötig ausgeliefert. Schwere Bilder lassen deine Seite besonders auf dem Smartphone spürbar langsamer laden, was Besucher ungeduldig macht.
LösungLass deine Produktbilder in einem moderneren, kleineren Format speichern (zum Beispiel WebP), in der tatsächlich angezeigten Größe einfügen und für Bilder weiter unten auf der Seite ein verzögertes Laden einstellen.
Bilder als WebP/AVIF in Zielgröße ausliefern, width/height-Attribute setzen um Layout-Shifts zu vermeiden, und loading="lazy" für Below-the-fold-Bilder ergänzen; geschätztes Einsparpotenzial laut Audit 5.661 KiB.
Google Search Central: SEO Starter Guide
Dein Seitenbild ist grundsätzlich stimmig, aber ich habe zu viele unterschiedliche Schriftgrößen und -familien gefunden, die dem Auftritt etwas von seiner Ruhe nehmen.
Auf der Seite werden 4 verschiedene Schriftarten (darunter NiveauGroteskRegular, NiveauGroteskBold, NiveauGroteskMedium und Shelby) und 7 unterschiedliche Schriftgrößen verwendet. Ohne klares System wirkt die Seite schnell unruhig, und der Unterschied zwischen Überschrift und Fließtext verschwimmt.
LösungEinige mit deinem Gestalter, ob sich die Schriftarten auf maximal zwei reduzieren lassen und die Größen auf eine feste, abgestufte Skala gebracht werden können.
Reduziere auf höchstens zwei Schriftfamilien und definiere eine modulare Skala mit sechs bis acht Größen (z. B. 14, 16, 20, 25, 31, 39 px), auf die alle Textstile gemappt werden.
Adam Wathan & Steve Schoger: Refactoring UI — hierarchy, spacing systems, limited palettes
Die Dropdown-Menüs in der Navigation – etwa „Produkte“, „Rezepte“, „Nachhaltigkeit“ und „Über uns“ – zeigen keine unmittelbare Reaktion, wenn man sie antippt oder anklickt. Wenn ein Klick sich nicht sofort anfühlt, wirkt die ganze Seite träge, selbst wenn sie technisch schnell ist.
LösungLass prüfen, ob die Menüs sofort eine sichtbare Reaktion beim Antippen zeigen, statt erst nach einer kleinen Verzögerung zu reagieren.
Implementiere einen sofortigen :active-Zustand für die Dropdown-Trigger (div.dropdown unter li.list-inline-item) und nutze CSS-Transitions statt Keyframe-Animationen, damit Interaktionen unterbrechbar und direkt spürbar sind.
Apple: Designing Fluid Interfaces (WWDC 2018)
Nur 48 Prozent der Abstände im Layout folgen einem einheitlichen Raster, und Textblöcke beginnen an 10 verschiedenen Positionen statt an wenigen festen Linien. Uneinheitliche Abstände lassen eine Seite unbewusst unruhig und weniger professionell wirken.
LösungLass deinen Entwickler ein festes Abstandssystem einführen, zum Beispiel immer Vielfache von 8 Pixeln, und die Textspalten an wenigen klaren Linien ausrichten.
Spacing-Skala auf 4/8-px-Basis vereinheitlichen (z. B. 8, 16, 24, 32, 48, 64) und Ad-hoc-Werte ersetzen; linke Textkanten der Hauptspalte auf maximal 4 konsistente Positionen reduzieren statt aktuell 10.
Adam Wathan & Steve Schoger: Refactoring UI — hierarchy, spacing systems, limited palettes
Ich konnte kein Analyse-Tool auf deiner Seite finden, dazu kommt die sehr lange Ladezeit von über 16 Sekunden – beides bremst mögliche Verkäufe aus, bevor du überhaupt siehst, woran es liegt.
Das wichtigste Bild der Startseite braucht auf dem Handy rund 16,2 Sekunden, bis es sichtbar ist, und die Seite lädt dabei ganze 16 Megabyte – angestrebt sind unter 2,5 Sekunden und unter 2 Megabyte. Jede zusätzliche Wartesekunde auf dem Handy kostet dich Besucher, die vorher abspringen.
LösungLass Bilder komprimieren, unnötige Skripte und Schriftarten entfernen und Inhalte, die weiter unten liegen, erst beim Scrollen nachladen.
Senke mobile LCP auf unter 2,5 s und Seitengewicht auf unter 2 MB: Bilder komprimieren/responsive ausliefern, ungenutzte Scripts/Fonts entfernen, Lazy-Loading für Below-the-fold-Inhalte einsetzen (aktuell LCP 16246 ms, 16 MB Transfer).
web.dev: Core Web Vitals thresholds (LCP 2.5 s, INP 200 ms, CLS 0.1)
Auf der Website ist kein Analyse-Tool gefunden worden, das misst, ob Besucher zum Beispiel Rezepte öffnen oder Produkte anklicken. Ohne Messung weißt du nicht, welche Änderungen an der Seite tatsächlich mehr Besucher zu Kunden machen.
LösungRichte ein datenschutzfreundliches Analyse-Tool ein und definiere, welche Klicks – etwa auf „So einfach geht's!“ oder Rezept-Links – als Erfolg zählen sollen.
Analytics-Tool (z. B. Matomo oder datenschutzkonformes GA4-Setup) einbinden und Conversion-Events für zentrale Interaktionen (CTA-Klicks, Formular-Submits) implementieren; aktuell wurden 0 Analytics-Hosts im Traffic erkannt.
Corey Haines (marketingskills): cro, signup, popups and offers skills
Im Newsletter-Formular mit dem Feld „E-Mail Adresse*“ ist nur ein Feld vorhanden, was gut ist. Allerdings ist das Eingabefeld technisch nicht als E-Mail-Feld hinterlegt, sodass Smartphones die normale Tastatur statt der E-Mail-Tastatur mit @-Taste anzeigen. Die falsche Tastatur macht das Eintippen der E-Mail-Adresse auf dem Handy umständlicher und kann Anmeldungen kosten.
LösungLass deinen Entwickler das E-Mail-Feld im Newsletter-Formular so einstellen, dass Smartphones automatisch die passende Tastatur mit @-Zeichen anzeigen.
Beim Input in form.standard-form (aktuell type="text") type="email" sowie ein passendes autocomplete-Attribut (z. B. autocomplete="email") setzen, damit mobile Keyboards die E-Mail-Tastatur anzeigen.
Baymard Institute: Checkout usability research (guest checkout, form field count)
Ich bin über 18 Links gestolpert, die trotz gleicher Beschriftung zu verschiedenen Seiten führen – das macht es Besuchern schwer, sich zu orientieren. Schauen wir uns das gemeinsam an.
Dieser Bericht beruht auf einem schnellen, automatisierten Check (Kontraste, Größen, Tempo, Struktur) – ein vollständiger Check würde zusätzlich Design, Texte und Abläufe per KI bewerten. Schon dabei zeigt sich: Links wie „aktuelles“, „kontakt“ und „werksverkauf“ führen je nach Stelle auf deiner Seite zu unterschiedlichen Zielen, und derselbe Linktext „Mehr erfahren“ taucht mehrfach auf, führt dabei aber jedes Mal woanders hin. Wenn gleiche Linktexte zu verschiedenen Zielen führen, verlieren Besucher das Vertrauen in deine Navigation und zögern bei jedem Klick.
LösungGib jedem Ziel genau einen festen Namen und verwende ihn überall – im Menü, in Buttons und im Footer. Räum doppelte oder mehrdeutige Linktexte wie „Mehr erfahren“ auf und benenne sie nach ihrem Ziel.
Vereinheitliche die Linktexte pro Zieladresse (z. B. „Kontakt“ nur für /kontakt) und stelle sicher, dass keine Destination mehrere unterschiedliche Linktexte erhält – aktuell 49 Seiten mit abweichenden Labels und 18 Labels mit abweichenden Zielen laut Crawl.
Jakob Nielsen, NN/g: 10 Usability Heuristics for User Interface Design
Auf dem Handy musst du erst gut drei Bildschirme weit scrollen, bevor die erste wichtige Aktion – der Button „Jetzt Rabattcode herunterladen!“ – überhaupt auftaucht. Die meisten Besucher kommen über ihr Smartphone, und wenn die wichtigste Handlung so weit unten versteckt ist, wirkt die mobile Seite zweitrangig.
LösungHol die wichtigste Aktion weiter nach oben, idealerweise in den ersten sichtbaren Bereich auf dem Handy, und stelle sicher, dass Buttons groß genug zum Antippen sind.
Platziere den primären Call-to-Action (aktuell unter div.imageText-content > div.pt-15 > a.wn-button) im ersten Viewport bei 390 px Breite und stelle sicher, dass Touch-Targets mindestens 44 px hoch sind.
NN/g: Mobile UX guidelines (touch targets, content priority)
Kleine Änderungen mit großer Wirkung. Hak sie nach und nach ab.