Echtes BeispielDie Website eines echten deutschen Unternehmens, am 24. Okt. 2026 mit dem kostenlosen Schnellcheck geprüft. Name und Adresse entfernt.
Ich habe mir [Marke] einmal automatisiert angeschaut – eine schnelle, maschinelle Prüfung von Geschwindigkeit, Struktur, Kontrasten und Größen, noch ohne Blick auf Design, Texte oder wie leicht sich Aufgaben erledigen lassen. Insgesamt steht ihr bei 62 von 100 Punkten, am dringendsten sind uneinheitliche Linktexte, eine zu kleine Schrift auf dem Handy und vage Button-Beschriftungen wie „hier“. Eine vollständige Prüfung würde zusätzlich eine KI-Analyse von Design, Texten und Nutzerführung ergänzen.
Wenn ein Ziel mal so und mal so heißt, verlieren Besucher das Vertrauen in deine Navigation und zögern bei jedem Klick.
LösungLege für jedes Ziel einen festen Namen fest und verwende ihn überall gleich, egal ob im Menü, im Fußbereich oder im Text. Fang mit den auffälligsten Dopplungen wie „Bestellstatus“ und „Versandstatus“ an.
Kleine Schrift und lange Zeilen ermüden die Augen schnell, besonders beim Lesen auf dem Smartphone.
LösungVergrößere die mobile Schriftgröße auf mindestens 16 Pixel und sorge dafür, dass eine Zeile nur noch 45 bis 75 Zeichen umfasst, zum Beispiel durch eine schmalere Textspalte.
Texte wie „hier“ sagen nicht, wohin ein Klick führt, deshalb zögern Besucher oder überspringen den Link ganz.
LösungErsetze „hier“ durch einen Text, der das Ziel beschreibt, etwa „Mehr über unsere Vision erfahren“ oder „Zum Blogartikel über gesunde Ernährung“.
Auf dem Handy ist dein Text mit 14 Pixel recht klein und mit rund 82 Zeichen pro Zeile deutlich länger als angenehm zu lesen ist. Dazu kommen elf verschiedene Button-Stile bei 141 Buttons – etwas mehr Einheitlichkeit würde eurem Shop optisch guttun.
Im Textbereich unter der Startseite ist die Schrift auf dem Handy nur 14 Pixel groß, und eine Zeile ist mit rund 82 Zeichen deutlich länger als angenehm zu lesen ist. Kleine Schrift und lange Zeilen ermüden die Augen schnell, besonders beim Lesen auf dem Smartphone.
LösungVergrößere die mobile Schriftgröße auf mindestens 16 Pixel und sorge dafür, dass eine Zeile nur noch 45 bis 75 Zeichen umfasst, zum Beispiel durch eine schmalere Textspalte.
Setze bei div.text-hero-wrapper .cms-element__text p die mobile Schriftgröße auf min. 16px und begrenze die Textbreite auf ca. 65ch (max-width), um die Zeilenlänge auf 45–75 Zeichen zu reduzieren.
Matthew Butterick: Practical Typography — line length, point size, line spacing
Auf deiner Seite gibt es 141 Buttons in 11 unterschiedlichen optischen Stilen, von scharfen bis runden Ecken und verschiedenen Hintergründen, etwa bei „Deutschland“ in der oberen Leiste oder dem Suchfeld. Wenn Buttons immer wieder anders aussehen, erkennen Besucher nicht auf Anhieb, was klickbar ist und welche Aktion am wichtigsten ist.
LösungEinige dich mit deinem Entwickler auf maximal drei Button-Stile, etwa einen Haupt-, einen Neben- und einen Text-Button, und verwende diese konsequent überall.
Reduziere die 11 Button-Varianten (Radius, Hintergrund, Gewicht) auf drei definierte Komponenten (primary/secondary/tertiary) und ersetze die abweichenden Styles, u. a. bei button.fixed, button.flex (Deutschland) und #search-input, durch diese gemeinsamen Klassen.
Jakob Nielsen, NN/g: 10 Usability Heuristics for User Interface Design
Elemente wie „Zum Hauptinhalt springen“, „Deutschland“, „DE“ und „Service / Hilfe“ verändern sich erst, wenn du die Maustaste wieder loslässt – nicht schon beim Klicken selbst. Das lässt deine Seite träge wirken, selbst wenn sie technisch schnell ist.
LösungLass Buttons sofort beim Antippen sichtbar reagieren, etwa mit einer kurzen Farb- oder Helligkeitsänderung.
Implementiere einen :active-Zustand, der innerhalb eines Frames sichtbar wird, statt den Zustand erst bei pointerup/click zu ändern; nutze CSS-Transitions für unterbrechbares Feedback.
Apple: Designing Fluid Interfaces (WWDC 2018)
Auf deiner Seite zähle ich 10 verschiedene Schriftgrößen, obwohl nur 90 % davon wirklich zusammenpassen. Das ist deutlich mehr, als für ein klares Erscheinungsbild nötig wäre. Wenn zu viele Größen gleichzeitig vorkommen, wirkt die Seite unaufgeräumt und Überschriften heben sich weniger klar von normalem Text ab.
LösungLege gemeinsam mit deinem Entwickler oder deiner Entwicklerin eine feste Liste von sechs bis acht Schriftgrößen fest und verwende nur noch diese im ganzen Shop.
Reduziere die 10 aktuell genutzten Schriftgrößen auf eine modulare Skala von 6–8 Werten (z. B. 14, 16, 20, 25, 31, 39 px) und ordne alle Textstile dieser Skala zu; die beiden Schriftfamilien Outfit und [Marke] Serif können beibehalten werden.
Adam Wathan & Steve Schoger: Refactoring UI — hierarchy, spacing systems, limited palettes
Textblöcke auf deiner Seite beginnen an 22 unterschiedlichen linken Kanten, obwohl ein sauberes Layout mit rund vier auskommen sollte. Uneinheitliche Abstände lassen eine Seite leicht unruhig wirken, auch wenn Besucher nicht genau sagen können, warum.
LösungBitte deine Entwicklung, Abstände und Ausrichtungen im Shop zu vereinheitlichen, damit Texte sauber untereinanderstehen.
Definiere eine kleine Abstands-Skala auf 4px-Basis (z. B. 8, 16, 24, 32, 48, 64) und reduziere die 22 abweichenden linken Textkanten in der Hauptspalte auf maximal vier wiederkehrende Werte.
Adam Wathan & Steve Schoger: Refactoring UI — hierarchy, spacing systems, limited palettes
Beim Laden deiner Startseite verschieben sich Inhalte spürbar (gemessener Wert 0,39, Zielwert unter 0,1), zum Beispiel durch Bilder oder Elemente, die erst nachträglich Platz beanspruchen. Springende Inhalte sind besonders auf dem Handy störend und lassen Besucher versehentlich auf das Falsche tippen.
LösungLass deine Entwicklung festen Platz für Bilder und eingebettete Elemente reservieren, damit beim Laden nichts mehr hin- und herspringt.
Reserviere Platz für Bilder, Embeds und Werbeflächen über feste width/height oder aspect-ratio, um den gemessenen Cumulative Layout Shift von 0,39 auf unter 0,1 zu senken; Animationen selbst betreffen aktuell keine Layout-Eigenschaften.
Apple: Designing Fluid Interfaces (WWDC 2018)
Vier Schaltflächen sind mit vagen Begriffen beschriftet, und „hier“ führt an zwei verschiedenen Stellen zu unterschiedlichen Zielen. Wenn du diese Texte konkreter machst, wissen Besucher sofort, was sie erwartet.
Im Fließtext kommt das Wort „hier“ als Linktext gleich zweimal vor und führt jeweils zu unterschiedlichen Seiten, einmal zu „vision-mission“, einmal zu einem Blogartikel. Auch an anderer Stelle gibt es noch vage Linktexte. Texte wie „hier“ sagen nicht, wohin ein Klick führt, deshalb zögern Besucher oder überspringen den Link ganz.
LösungErsetze „hier“ durch einen Text, der das Ziel beschreibt, etwa „Mehr über unsere Vision erfahren“ oder „Zum Blogartikel über gesunde Ernährung“.
Ersetze die generischen Linktexte „hier“/„Hier“ in den entsprechenden <a>-Elementen durch beschreibende Verb-Objekt-Kombinationen passend zum jeweiligen href-Ziel (z. B. /vision-mission, /wissen/blog/...).
WCAG 2.2 SC 2.4.4
Auf deiner Startseite kommt „wir“ 30-mal vor, „du“ dagegen nur 21-mal. Besucher interessieren sich zuerst für ihren eigenen Nutzen, nicht für dein Unternehmen.
LösungFormuliere zentrale Abschnitte so um, dass zuerst klar wird, was der Leser davon hat, bevor du von „wir“ sprichst.
Überarbeite die Homepage-Texte mit Fokus auf Reader-Pronomen (du/dein) statt Company-Pronomen (wir/unser); Zielverhältnis: „du“ mindestens gleich häufig wie „wir“.
Government Digital Service: GOV.UK content design: writing for the web
Die Texte auf deiner Seite erreichen einen Lesbarkeitswert von 54 (Amstad-Skala), angestrebt werden mindestens 60. Die Satzlänge mit rund 15 Wörtern ist dabei schon gut. Schwerer verständliche Texte verlieren Leserinnen und Leser schneller, besonders wenn sie nebenbei auf dem Handy lesen.
LösungFormuliere Sätze noch etwas einfacher, nutze alltägliche Wörter statt Fachbegriffen und erkläre Fachbegriffe, wenn sie das erste Mal vorkommen.
Überarbeite die Produkt- und Seitentexte redaktionell, um den Flesch-Amstad-Wert von aktuell 53,81 auf mindestens 60 zu heben, etwa durch kürzere, aktivere Formulierungen und erklärte Fachbegriffe.
plainlanguage.gov: Federal Plain Language Guidelines
Besonders wichtig: 40 interaktive Elemente lassen sich nicht mit der Tastatur ansteuern, das sollte als Erstes behoben werden. Außerdem werden 24 Textstellen abgeschnitten, wenn jemand Zeilen- oder Buchstabenabstand vergrößert.
Beim Durchtabben der Seite bleiben 40 klickbare Elemente außen vor, darunter sogar der Link „Zum Hauptinhalt springen“, der eigentlich genau dafür gedacht ist, per Tastatur schnell zum Inhalt zu springen. Menschen, die keine Maus benutzen können oder wollen, erreichen diese Funktionen dann gar nicht.
LösungLass deinen Entwickler prüfen, welche Buttons und Links aktuell nicht mit der Tabulatortaste erreichbar sind, allen voran den Sprung-zum-Inhalt-Link, und diese reparieren.
Stelle sicher, dass alle interaktiven Elemente als echte <button> oder <a href> umgesetzt sind und nicht per tabindex="-1" oder CSS aus dem Tab-Flow entfernt werden; insbesondere #__nuxt > button.fixed („Zum Hauptinhalt springen“) muss per Tab erreichbar sein und als funktionierender Skip-Link fungieren.
WCAG 2.2 SC 2.1.1, 2.1.2
Wenn Besucher größere Buchstaben-, Wort- oder Zeilenabstände einstellen, werden 24 Textelemente abgeschnitten, etwa Überschriften in den Bildkacheln, die dann bis zu 812 Pixel breit werden, obwohl der Bildschirm nur 320 Pixel schmal ist. Viele Menschen vergrößern Text oder Abstände, um besser lesen zu können, und wenn das Layout dabei zerbricht, verschwinden Inhalte für sie.
LösungLass deinen Entwickler die betroffenen Textkacheln so anpassen, dass sie sich bei größeren Abständen automatisch anpassen, statt über den Rand hinauszulaufen.
Verwende für a.block .group .overlay .absolute p.font-serif flexible Breiten (z. B. max-width: 100% statt fixer Breiten) und relative Einheiten, damit der Text auch mit WCAG-Text-Spacing-Overrides innerhalb von 320px Breite bleibt.
WCAG 2.2 SC 1.4.4, 1.4.10
Bei „Toll als Topping auf dem Porridge“ springt die Struktur von einer Zwischenüberschrift direkt zu einer viel kleineren Ebene, eine Ebene wird dabei übersprungen. Screenreader-Nutzende springen über Überschriften durch die Seite, und übersprungene Ebenen lassen sie Inhalte verpassen oder sich verlaufen.
LösungLass deine Entwicklung die Überschriften bei „Toll als Topping auf dem Porridge“ und ähnlichen Stellen in die richtige Reihenfolge bringen, ohne eine Ebene zu überspringen.
Ersetze die h5-Überschrift „Toll als Topping auf dem Porridge“ durch h3, sodass die Hierarchie h2 → h3 statt h2 → h5 lautet, und einmal pro Seite prüfen, ob keine weiteren Ebenen übersprungen werden.
WCAG 2.2 SC 1.3.1, 1.3.2
Im Formular fehlt beim Feld „E-Mail-Adresse*“ die Kennzeichnung, die Browsern sagt, dass hier eine E-Mail-Adresse automatisch ausgefüllt werden kann. Ohne diese Kennzeichnung müssen Besucherinnen und Besucher ihre Adresse jedes Mal von Hand eintippen, was besonders auf dem Handy abschreckt und Formulare seltener fertig ausgefüllt werden.
LösungBitte deine Entwicklung, dem E-Mail-Feld die passende Autovervollständigung hinzuzufügen, damit Browser und Passwort-Manager es automatisch ausfüllen können.
Ergänze beim Feld #form-builder__element__v-0-0-0-5-0-0-0-email-email das Attribut autocomplete="email", damit Browser und Passwortmanager das Feld „E-Mail-Adresse*“ automatisch befüllen können.
WCAG 2.2 SC 3.3.1, 3.3.2
Beim Teilen eurer Seite in sozialen Netzwerken fehlen Titel, Beschreibung und Bild für die Vorschau, dadurch wirkt der Link kahl. Eine Meta-Beschreibung und ein Seitentitel liegen zudem außerhalb der empfohlenen Länge.
Der Titel deiner Startseite lautet nur „[Marke]“ – viel zu kurz, um in Suchergebnissen zu überzeugen. Titel und Beschreibung sind wie deine Anzeige bei Google – zu knapp bedeutet weniger Klicks.
LösungSchreib pro Seite einen aussagekräftigen Titel, der zuerst das Thema nennt und am Ende deinen Markennamen, mit etwa 50 bis 60 Zeichen.
Setze den <title> auf 15–65 Zeichen (Thema zuerst, Marke am Ende) und ergänze pro Seite eine eindeutige meta description mit 120–160 Zeichen.
Google Search Central: Influencing title links in search results
Deine Seite liefert keine og:title-, og:description- oder og:image-Angaben, deshalb erscheinen geteilte Links auf Social Media ohne Bild und ohne Beschreibung. Links ohne Vorschau werden deutlich seltener angeklickt.
LösungErgänze für die wichtigsten Seiten ein ansprechendes Vorschaubild, einen Titel und eine kurze Beschreibung fürs Teilen.
Füge og:title, og:description und ein og:image (mindestens 1200×630 Pixel) auf allen zentralen Seiten ein und prüfe sie mit einem Link-Preview-Tool.
Google Search Central: SEO Starter Guide
Mir ist aufgefallen, dass 39 Linktexte zu unterschiedlichen Zielen führen und 96 Seiten unter verschiedenen Namen erreichbar sind. Das macht es Besuchern schwer, sich zu orientieren – da würde ich zuerst ansetzen.
Auf deiner Seite führen mehrere Links mit unterschiedlichen Texten zum selben Ziel, etwa „Schnelle Lieferung“ und „Versandinformationen“ oder „Bestellstatus“ und „Versandstatus“. Auch „Anmelden“ und „Registrieren“ werden an 96 Stellen uneinheitlich verwendet. Wenn ein Ziel mal so und mal so heißt, verlieren Besucher das Vertrauen in deine Navigation und zögern bei jedem Klick.
LösungLege für jedes Ziel einen festen Namen fest und verwende ihn überall gleich, egal ob im Menü, im Fußbereich oder im Text. Fang mit den auffälligsten Dopplungen wie „Bestellstatus“ und „Versandstatus“ an.
Vereinheitliche die Linktexte pro Ziel-URL across alle Templates (Header, Footer, Content-Module); z. B. „Versandstatus“ und „Bestellstatus“ auf einen Begriff mappen und in allen 96 Vorkommen ersetzen, inklusive Sign-in/Registrierungs-Links.
Jakob Nielsen, NN/g: 10 Usability Heuristics for User Interface Design
Auf dem Handy sind mindestens 20 wichtige Buttons, etwa der Menü-Button oben rechts und „Zum Hauptinhalt springen“, nur rund 40 Pixel hoch statt der empfohlenen 44. Zu kleine Tippflächen machen die Bedienung auf dem Handy fummelig und frustrierend, obwohl die meisten Besucher mobil unterwegs sind.
LösungVergrößer die wichtigsten Buttons auf mindestens 44 Pixel Höhe und hol die Hauptaktion weiter nach oben auf der Seite.
Erhöhe die Tap-Target-Größe zentraler Buttons (z. B. header button.h-14, div.header__actions button) auf min-height: 44px und prüfe horizontales Overflow-Verhalten bei 390px Viewport-Breite.
NN/g: Mobile UX guidelines (touch targets, content priority)
29,3 Megabyte Datenvolumen allein auf der Startseite sind viel für mobile Nutzer – das kann die Ladezeit spürbar in die Länge ziehen. Ich würde hier ansetzen, bevor es an die weiteren Schritte im Bestellprozess geht.
Deine Startseite bringt auf dem Handy etwa 29 Megabyte auf die Waage – deutlich mehr als die empfohlenen 2. Dadurch dauert es spürbar zu lange, bis die Inhalte sichtbar sind. Jede zusätzliche Sekunde Ladezeit auf dem Handy kostet dich Verkäufe.
LösungLass große Bilder stärker komprimieren, nicht benötigte Skripte entfernen und Inhalte weiter unten erst bei Bedarf nachladen.
Optimiere mobile LCP auf unter 2,5 s und die Seitengröße auf unter 2 MB: Bilder komprimieren und responsive ausliefern (WebP/AVIF), ungenutztes JS/CSS entfernen, below-the-fold Inhalte per lazy-loading nachladen.
web.dev: Core Web Vitals thresholds (LCP 2.5 s, INP 200 ms, CLS 0.1)
Kleine Änderungen mit großer Wirkung. Hak sie nach und nach ab.