Echtes BeispielDie Website eines echten deutschen Unternehmens, am 24. Okt. 2026 mit dem kostenlosen Schnellcheck geprüft. Name und Adresse entfernt.
Ich habe die Website von [Marke] einem schnellen, automatisierten Check unterzogen: Tempo, Struktur, Kontraste und Textgrößen habe ich gemessen, aber Design, Texte und wie leicht sich Aufgaben erledigen lassen, habe ich mir noch nicht im Detail angesehen – das übernimmt ein vollständiger Check mit einer KI-Bewertung. Mit 45 von 100 Punkten gibt es noch einiges zu tun: Ich würde zuerst bei den uneinheitlichen Linkbeschriftungen ansehen, dann die Lesbarkeit der Texte verbessern und zuletzt dafür sorgen, dass alle Seiten überhaupt in Suchmaschinen gefunden werden können.
Wenn ein Ziel immer wieder anders heißt, verlieren Besucher das Vertrauen in deine Navigation und klicken seltener.
LösungEinige dieser Linktexte zusammenführen. Entscheide dich pro Ziel für einen Begriff, zum Beispiel immer „Restaurantfinder“ oder immer „Speisekarte“, und verwende ihn überall auf der Seite gleich.
Zu kleiner Text mit langen Zeilen ermüdet Leser schnell, besonders unterwegs auf dem Handy.
LösungLass deinen Fließtext größer darstellen, mindestens 16 Pixel, und die Textspalten schmaler machen, damit eine Zeile nicht mehr als etwa 70 Zeichen umfasst.
Seiten, die Suchmaschinen nicht erfassen oder einordnen können, tauchen bei Google schlicht nicht auf, auch wenn der Inhalt gut ist.
LösungLass deinen Entwickler prüfen, welche Seiten versehentlich auf „nicht indexieren“ stehen, und sorge dafür, dass alle wichtigen Seiten in einer Sitemap gelistet sind.
2 Seiten sagen Suchmaschinen ausdrücklich, sie nicht zu indexieren – das kostet dich Sichtbarkeit. Außerdem dauert es auf dem Handy etwa 7,5 Sekunden, bis das Hauptbild erscheint, deutlich mehr als die empfohlenen 2,5 Sekunden.
Zwei Seiten sagen Suchmaschinen aktiv, dass sie nicht in den Suchergebnissen erscheinen sollen. Zusätzlich hat keine der 16 geprüften Seiten eine sogenannte Canonical-Angabe und keine davon steht in der Sitemap. Seiten, die Suchmaschinen nicht erfassen oder einordnen können, tauchen bei Google schlicht nicht auf, auch wenn der Inhalt gut ist.
LösungLass deinen Entwickler prüfen, welche Seiten versehentlich auf „nicht indexieren“ stehen, und sorge dafür, dass alle wichtigen Seiten in einer Sitemap gelistet sind.
Noindex-Direktiven von den beiden betroffenen Seiten entfernen (robots: noindex,follow / noindex,nofollow), für alle 16 gecrawlten Seiten selbstreferenzierende canonical-Tags setzen und eine vollständige XML-Sitemap erzeugen, die in robots.txt referenziert wird.
Google Search Central: SEO Starter Guide
Auf dem Handy dauert es gemessen rund 7,5 Sekunden, bis der wichtigste Seiteninhalt sichtbar wird. Angestrebt werden unter 2,5 Sekunden. Besucher springen ab, bevor die Seite überhaupt fertig geladen ist, und das wirkt sich auch negativ auf dein Ranking bei Google aus.
LösungLass dein Hauptbild verkleinern und so einbinden, dass es früher lädt, und reduziere Skripte, die vor dem Laden der Seite ausgeführt werden.
Largest Contentful Paint liegt bei 7464,99 ms (Ziel 2500 ms) im Mobile-Lab-Test. Größtes above-the-fold-Bild komprimieren und per preload priorisieren, nicht kritisches JavaScript deferren; CLS (0,00) und Total Blocking Time (1 ms) sind bereits im grünen Bereich und müssen nicht verändert werden.
web.dev: Core Web Vitals thresholds (LCP 2.5 s, INP 200 ms, CLS 0.1)
Mindestens eine deiner Seiten hat keine Meta-Beschreibung hinterlegt, den kurzen Text, der unter dem Titel in Suchergebnissen erscheint. Ohne eigene Beschreibung entscheidet Google selbst, was angezeigt wird, was oft weniger überzeugend ist und weniger Klicks bringt.
LösungErgänze für die betroffene Seite einen kurzen, einladenden Beschreibungstext von etwa 120 bis 160 Zeichen.
Füge ein eindeutiges meta name="description" (120–160 Zeichen) für die betroffene Seite hinzu; prüfe zusätzlich alle Titel auf Eindeutigkeit und Länge (≈50–60 Zeichen).
Google Search Central: Influencing title links in search results
Wenn jemand deine Seite bei WhatsApp, Facebook oder in Chats teilt, erscheint keine Vorschau: Es fehlen Titel, Beschreibung und Bild für diese Ansicht. Geteilte Links ohne Bild und Beschreibung wirken unseriös und werden deutlich seltener angeklickt.
LösungLass deinen Entwickler ein ansprechendes Vorschaubild sowie Titel und Beschreibung für das Teilen auf Social Media einrichten.
Ergänze og:title, og:description und og:image (mindestens 1200×630px) sowie die passenden Twitter-Card-Tags auf allen wichtigen Seiten und teste sie mit einem Link-Vorschau-Tool.
Google Search Central: SEO Starter Guide
Die Bilder auf der Seite sind unnötig groß ausgeliefert – eine Optimierung könnte laut Messung rund 523 KB einsparen. Schwere Bilder verlangsamen jeden Seitenaufruf, besonders bei mobiler Verbindung, und kosten dich Besucher:innen mit Geduldsgrenze.
LösungLass deinen Entwickler die Bilder in ein modernes, kleineres Format umwandeln und in der passenden Anzeigegröße ausliefern.
Geschätztes Einsparpotenzial von 523 KiB durch verbesserte Bildauslieferung. Bilder als WebP oder AVIF in der tatsächlichen Anzeigegröße bereitstellen, width/height-Attribute setzen und loading="lazy" für Bilder unterhalb des sichtbaren Bereichs ergänzen.
Google Search Central: SEO Starter Guide
Dein Fließtext ist auf dem Desktop 14 Pixel groß, auf dem Handy sogar nur 12 – bei rund 89 Zeichen pro Zeile wird das schnell anstrengend zu lesen. Dazu kommen 5 verschiedene Schriftarten und 7 Größen ohne erkennbares System.
Der Fließtext auf deiner Seite ist mit 14 Pixel am Desktop und nur 12 Pixel auf dem Handy recht klein, und die Zeilen sind mit rund 89 Zeichen deutlich länger als angenehm zu lesen. Zu kleiner Text mit langen Zeilen ermüdet Leser schnell, besonders unterwegs auf dem Handy.
LösungLass deinen Fließtext größer darstellen, mindestens 16 Pixel, und die Textspalten schmaler machen, damit eine Zeile nicht mehr als etwa 70 Zeichen umfasst.
Body-Text auf mindestens 16px (Mobile ebenfalls ≥16px) setzen, Zeilenlänge über max-width (~65ch) auf 45–75 Zeichen begrenzen und line-height auf 1.4–1.6 anheben, betroffen u.a. div.textpicturegrid > div.col:nth-of-type(1) > div.text-wrapper:nth-of-type(1) > div.text > p:nth-of-type(1).
Matthew Butterick: Practical Typography — line length, point size, line spacing
Auf der Seite werden 5 verschiedene Schriftarten (unter anderem Overpass, Dancing Script und zwei Varianten von TheSerifC5) und 7 unterschiedliche Schriftgrößen gemischt. Ohne ein klares System wirkt die Seite unruhig, und der Unterschied zwischen Überschrift und Fließtext verschwimmt.
LösungEinige davon sind vielleicht als Akzent gedacht, etwa die Schreibschrift – prüfe trotzdem, ob du auf höchstens zwei Schriftfamilien kommen kannst.
Font-Familien auf maximal zwei (plus ggf. eine Mono-Schrift) reduzieren und alle Textstile auf eine Skala von sechs bis acht Größen (z. B. 14, 16, 20, 25, 31, 39 px) mappen; aktuell sind es 5 Familien und 7 Größen.
Adam Wathan & Steve Schoger: Refactoring UI — hierarchy, spacing systems, limited palettes
Beim Laden deiner Startseite ziehen sich mehrere Elemente in die Länge, etwa das Logo oben und das große Banner-Bild, das zwei volle Sekunden für seine Einblendung braucht. Lange Animationen lassen deine Seite träge wirken, selbst wenn sie technisch schnell lädt.
LösungLass deinen Entwickler die Einblendzeiten für Logo und Banner deutlich kürzen, idealerweise auf eine halbe Sekunde oder weniger.
Reduziere die Dauer der Lade-Animationen (fadeInDownShortLogo, fadeIn, fadeInUpShort) von aktuell 1000–2000ms auf maximal 300–400ms und verwende ease-out statt der aktuellen Easing-Kurven.
Emil Kowalski: Design engineering & animation decision framework
Beim Cookie-Banner reagieren Schaltflächen wie „Auswahl erlauben“ und „Zustimmung“ erst, wenn du den Finger oder die Maustaste wieder loslässt, nicht schon beim Antippen. Das macht Buttons spürbar träge, selbst wenn im Hintergrund alles schnell passiert.
LösungBitte deinen Entwickler, bei wichtigen Buttons sofort beim Antippen eine sichtbare Reaktion einzubauen.
Ergänze :active-Zustände mit sofortiger visueller Rückmeldung (Farbe, Rahmen) für Buttons wie #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection und #CybotCookiebotDialogNavDeclaration, statt nur auf click/release zu reagieren.
Apple: Designing Fluid Interfaces (WWDC 2018)
Die Abstände zwischen Elementen folgen keinem klaren System, und Textblöcke beginnen an sieben verschiedenen linken Kanten statt an wenigen festen Linien. Das lässt die Seite optisch unruhig wirken, auch wenn Besucher:innen nicht genau sagen können, warum.
LösungLeg dich mit deinem Entwickler auf ein einheitliches Abstandsraster fest (zum Beispiel Schritte von 8, 16, 24, 32 Pixel) und richte Textblöcke an möglichst wenigen linken Kanten aus.
Aktuell liegen nur 82% der Abstandswerte auf einem 5px-Raster und Textblöcke nutzen 7 unterschiedliche linke Kanten. Lege eine Basisgröße (4 oder 8px) fest, definiere eine begrenzte Skala (z. B. 8/16/24/32/48/64) und ersetze abweichende Margin-/Padding-Werte durch den jeweils nächstgelegenen Schritt; reduziere die linken Textkanten im Hauptbereich auf maximal 4.
Adam Wathan & Steve Schoger: Refactoring UI — hierarchy, spacing systems, limited palettes
Mit einem Lesbarkeitswert von 39 und Sätzen mit durchschnittlich 22 Wörtern ist dein Text anspruchsvoller als nötig. Dazu kommen 6 vage Linktexte wie „mehr erfahren“, der an 3 unterschiedlichen Stellen auf der Seite verwendet wird.
Mehrere Buttons und Links mit dem Text „MEHR ERFAHREN“ beziehungsweise „mehr“ führen zu ganz unterschiedlichen Zielen, etwa zu einer PDF-Datei, zum Bereich „[Marke]a“ und zu „Veranstaltungsräume“. Wenn derselbe Linktext immer woanders hinführt, wissen Besucher vorher nicht, was sie erwartet, und klicken seltener.
LösungErsetze „Mehr erfahren“ durch konkrete Texte, die sagen, wohin der Klick führt, zum Beispiel „Speisekarte als PDF öffnen“ oder „Veranstaltungsräume ansehen“.
6 generische CTA-Labels („MEHR ERFAHREN“, „mehr“, „Mehr erfahren“) durch spezifische Verb+Objekt-Texte ersetzen, passend zum jeweiligen Linkziel (u.a. PDF-Download, /[Marke]a/, /veranstaltungsraeume/). Sicherstellen, dass derselbe Linktext nicht mehr auf drei unterschiedliche URLs zeigt.
WCAG 2.2 SC 2.4.4
Der Lesbarkeits-Wert (Flesch, Amstad) liegt bei 39 von anzustrebenden mindestens 60, und Sätze sind im Schnitt 22 Wörter lang. Lange, verschachtelte Sätze kosten Leser, auch unterwegs auf dem Handy.
LösungKürze lange Sätze, nutze einfache Alltagswörter und schreibe möglichst aktiv statt passiv.
Texte redaktionell überarbeiten: Zielwert durchschnittliche Satzlänge ≤ 20 Wörter, Flesch-Amstad-Wert ≥ 60, Passivkonstruktionen auf unter 10 % senken.
plainlanguage.gov: Federal Plain Language Guidelines
8 Bedienelemente lassen sich nicht mit der Tastatur ansteuern, und 58 von 122 Fokuspunkten sind von anderen Elementen verdeckt. Auch Animationen laufen weiter, selbst wenn Besucher „Bewegung reduzieren“ aktiviert haben – das sollte dein Entwicklerteam sich ansehen.
Beim Durchtabben der Seite bleiben 8 klickbare Elemente außen vor, darunter der Hinweis „Powered by Cybot“ im Cookie-Banner. Menschen, die keine Maus nutzen können oder wollen, erreichen diese Elemente dann gar nicht und können die zugehörige Funktion nicht nutzen.
LösungBitte deinen Entwickler, alle klickbaren Elemente so umzusetzen, dass sie auch mit der Tabulatortaste erreichbar sind, und einen „Zum Inhalt springen“-Link einzubauen.
Alle interaktiven Elemente als echte <button> oder <a href> umsetzen statt per div/span mit Klick-Handler, sicherstellen, dass tabindex nicht negativ gesetzt oder entfernt wird; betroffen u.a. #CybotCookiebotDialogPoweredbyCybot. Einen Skip-Link zum Hauptinhalt ergänzen, insgesamt 8 von 122 Fokusstopps derzeit nicht erreichbar.
WCAG 2.2 SC 2.1.1, 2.1.2
Bei 58 von 122 Stationen verschwindet der Fokusrahmen hinter anderen Elementen, zum Beispiel wird der Link „Karriere“ im Menü vom Cookie-Banner überdeckt, ebenso „Newsletter“, „[Marke]a“ und „Allergene & Nährwerte“. Wer mit der Tastatur navigiert, verliert dadurch die Orientierung, weil nicht sichtbar ist, wo der Fokus gerade steht.
LösungLass deinen Cookie-Banner und ähnliche Einblendungen so platzieren, dass sie nie über einem angewählten Menüpunkt liegen. Dein Entwickler kann das mit der Technik-Notiz unten umsetzen.
Z-Index und Layout des Cybot-Cookiebanners (#CybotCookiebotDialogHeader, #CybotCookiebotDialogPoweredbyLink, #CybotCookiebotDialogNavDeclaration) so anpassen, dass er fokussierte Elemente im Untermenü (ul.nav li.uid2/uid3 > ul.subnav > a) nie überlagert; zusätzlich eine klare :focus-visible-Markierung mit ausreichendem Kontrast ergänzen.
WCAG 2.2 SC 2.4.7, 2.4.11
Die Seite spielt 8 Animationen ab, und auch wenn Besucher in ihrem Gerät „Bewegung reduzieren“ einschalten, laufen weiterhin alle 8. Für manche Menschen führt dauerhafte Bewegung zu Schwindel oder Konzentrationsproblemen, besonders wenn sie das extra abgeschaltet haben.
LösungSorge dafür, dass die Einstellung „Bewegung reduzieren“ im Gerät tatsächlich respektiert wird und Animationen dann gestoppt oder deutlich reduziert werden.
Eine Media Query prefers-reduced-motion: reduce implementieren, die nicht-essenzielle CSS- und JS-Animationen deaktiviert oder auf transform: none bzw. animation: none setzt; aktuell greift die Einstellung bei keiner der 8 Animationen.
WCAG 2.2 SC 2.2.2, 2.3.1
Wenn Zeilen-, Wort- oder Buchstabenabstand vergrößert wird, werden die Texte „Restaurants“, „Speisen“ und „Reservieren“ in den schwebenden Buttons am Bildschirmrand abgeschnitten. Menschen, die Text zum besseren Lesen vergrößern oder den Abstand anpassen, verlieren dadurch wichtige Buttons.
LösungLass die schwebenden Buttons am Rand so gestalten, dass sie mitwachsen, wenn Nutzer Text- oder Zeilenabstand vergrößern.
Feste Höhen/Breiten bei aside.stickybuttons > a.link mit festen px-Werten durch flexible, inhaltsbasierte Maße ersetzen, damit die Elemente auch mit WCAG-Textabstand-Overrides (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em) nicht abgeschnitten werden.
WCAG 2.2 SC 1.4.4, 1.4.10
Auf allen 15 geprüften Seiten ist die Reihenfolge der Navigationspunkte anders als auf deiner Startseite. Wenn sich das Menü ständig verschiebt, verlieren Besucher die Orientierung, besonders Menschen, die mit Tastatur oder Screenreader navigieren.
LösungSorge dafür, dass die Hauptnavigation auf jeder Seite in derselben Reihenfolge erscheint.
Vereinheitliche die Reihenfolge und Struktur der Navigationselemente in allen Templates, sodass die Markup-Reihenfolge seitenübergreifend identisch ist.
WCAG 2.2 SC 3.2.1, 3.2.2
Auf der Seite springt die Gliederung von einer „h3“-Überschrift direkt zu einer „h5“-Überschrift bei „RESTAURANTS“, ohne dass eine „h4“ dazwischen liegt. Wer die Seite per Screenreader nutzt, orientiert sich an der Überschriften-Hierarchie – übersprungene Ebenen machen den Seitenaufbau verwirrend.
LösungLass deinen Entwickler die Überschriften-Reihenfolge prüfen und die übersprungene Ebene bei „RESTAURANTS“ auf die nächsttiefere Stufe korrigieren.
Der Sprung von h3 zu h5 bei „RESTAURANTS“ verletzt die semantische Verschachtelung. Überschriften müssen lückenlos ineinander verschachtelt sein (h2 unter h1, h3 unter h2 usw.); ändere das betroffene Element zu h4 oder passe die vorangehende Ebene entsprechend an.
WCAG 2.2 SC 1.3.1, 1.3.2
Mit 7,5 Sekunden Ladezeit für das Hauptbild und 44,8 Megabyte an Daten auf dem Handy verlierst du wahrscheinlich ungeduldige Besucher, bevor sie überhaupt etwas sehen. Das wäre meine erste Baustelle, bevor wir uns die weiteren Schritte im Bestellprozess ansehen.
Das Hauptbild braucht auf dem Handy etwa 7,5 Sekunden, bis es erscheint, und die Seite überträgt dabei rund 44,8 MB an Daten. Jede zusätzliche Sekunde Ladezeit auf dem Handy kostet dich Besucher, die vorher abspringen.
LösungLass Bilder stärker komprimieren und nicht benötigte Skripte oder Schriften entfernen, damit die Seite deutlich schneller lädt.
Mobile LCP von aktuell 7465 ms auf unter 2500 ms senken und die Seitengröße von 44,8 MB auf unter 2 MB bringen: Bilder komprimieren/modernes Format (WebP/AVIF) nutzen, ungenutzte JS/CSS entfernen, Fonts subsetten und Below-the-fold-Inhalte lazy-loaden.
web.dev: Core Web Vitals thresholds (LCP 2.5 s, INP 200 ms, CLS 0.1)
Ich bin auf 8 Linktexte gestoßen, die zu unterschiedlichen Zielen führen, und insgesamt 37 Seiten, die unter verschiedenen Namen erreichbar sind. Das macht es Besuchern schwer, sich zu orientieren – hier würde ich ansetzen.
Auf deiner Seite führen mehrere Begriffe zum selben Ziel: „restaurants“ und „restaurantfinder“ meinen offenbar dasselbe, genauso wie „karriere“, „jobs“ und „karriere starten“. Auch bei der Speisekarte gibt es gleich mehrere Bezeichnungen wie „speisekarte“, „zur speisekarte“ und „aus unserer speisekarte“ für ähnliche Ziele. Wenn ein Ziel immer wieder anders heißt, verlieren Besucher das Vertrauen in deine Navigation und klicken seltener.
LösungEinige dieser Linktexte zusammenführen. Entscheide dich pro Ziel für einen Begriff, zum Beispiel immer „Restaurantfinder“ oder immer „Speisekarte“, und verwende ihn überall auf der Seite gleich.
Alle Links, die auf dieselbe URL zeigen, mit identischem Linktext versehen (Navigation, Footer, Buttons). Betroffene Gruppen laut Crawl: „restaurants“/„restaurantfinder“ (54/50 Vorkommen), „essen mit kindern“/„kinderspeisekarte“, „karriere“/„jobs“/„karriere starten“, „speisekarte“/„monatsaktion“/„allergene nährwerte“. Dubletten konsolidieren oder klar unterschiedliche Ziele mit unterschiedlichen, eindeutigen Labels versehen.
Jakob Nielsen, NN/g: 10 Usability Heuristics for User Interface Design
Auf dem Handy sind mehrere wichtige Buttons wie „RESTAURANTS“, „RESERVIEREN“ und „ONLINESHOP“ im Banner nur 41 Pixel hoch, statt der empfohlenen Mindestgröße. Die erste wirklich wichtige Aktion liegt zudem erst knapp unterhalb des ersten Bildschirms. Zu kleine Tasten sind auf dem Handy schwer zu treffen, und die meisten deiner Besucher kommen über das Smartphone.
LösungVergrößere die drei genannten Buttons im Banner auf eine komfortable Tipp-Höhe und prüfe, ob die wichtigste Aktion gleich sichtbar ist, ohne scrollen zu müssen.
Erhöhe die Tap-Target-Höhe der Links a.button ("RESTAURANTS", "RESERVIEREN", "ONLINESHOP") im Banner auf mindestens 44px und platziere die primäre Handlungsaufforderung innerhalb des ersten sichtbaren Viewports bei 390px Breite.
NN/g: Mobile UX guidelines (touch targets, content priority)
Kleine Änderungen mit großer Wirkung. Hak sie nach und nach ab.