CP Registry
Prinzip-Lab

Vorher / Nachher

Echte Fehler aus echten Webseiten — direkt neben der besseren Lösung. Kippe zwischen den Varianten und sieh, was den Unterschied macht.

  • Erkenne, woran Content scheitert — Headlines, Hierarchie, Alt-Texte, Link-Sprache
  • Lerne die Heuristik hinter jeder Verbesserung
  • Uebertrage die Patterns in deine eigene TYPO3-Pflege
1

Hero-Headline und Buttons

Der erste Eindruck der Seite. In drei Sekunden muss klar sein, worum es geht und was der Nutzer als Nächstes tun kann.

Willkommen auf unserer Webseite!

Hier finden Sie alle Informationen rund um unser Angebot.

Hier klicken
  • 1
    Konkrete Headline statt Floskel. „Willkommen“ ist verlorener Bildschirmplatz. Der Nutzer braucht keine Sekunde um zu verstehen, worum es geht.
  • 2
    Subtitle mit Substanz. „Alle Informationen“ ist leer. Drei konkrete Leistungen schaffen Klarheit und Vertrauen.
  • 3
    Aussagekraeftige Buttons. „Hier klicken“ ist weder für Sehende noch Screenreader hilfreich — sie bekommen eine Linkliste ohne Kontext.
  • 4
    Zwei CTAs decken zwei Phasen ab. Eine Sofort-Aktion (Abo berechnen) plus ein niedrigschwelliger Einstieg (Beratung).
2

Heading-Hierarchie

Headings sind das Inhaltsverzeichnis einer Seite. Screenreader-Nutzer navigieren überwiegend hierüber. Logische Treppen statt Hop-Hop-Sprung.

Verkehrsbetrieb Musterstadt

Abos & Tickets

Klimaticket

Preise

Tagesticket

  • 1
    H1 nur einmal pro Seite. Sie ist der Seitentitel — Google und Screenreader gehen davon aus.
  • 2
    Keine Ebenen überspringen. Auf H1 folgt H2, nicht H3. Die Treppe darf hochsteigen, aber nicht überspringen.
  • 3
    Nicht nach Aussehen wählen. Headings haben Bedeutung. Wenn etwas kleiner aussehen soll, bleibt es trotzdem die richtige Ebene und wird per CSS gestaltet.
3

Link- und Button-Texte

Screenreader-Nutzer lassen sich gern alle Links einer Seite vorlesen. Wenn alle „Mehr erfahren“ heißen, ist das vollkommen nutzlos.

Wie der Screenreader die Links der Seite vorliest:

  • 🔊 „Hier klicken“
  • 🔊 „Mehr erfahren“
  • 🔊 „Mehr erfahren“
  • 🔊 „Link“
  • 🔊 „Hier klicken“
  • 🔊 „www.example.com/seite/123456?id=abc“

Was davon hilft dem Nutzer, die richtige Seite zu finden?

  • 1
    Verb + Objekt. „Abo-Rechner starten“ statt „Hier klicken“ — der Link beschreibt seine Wirkung.
  • 2
    Bei mehreren ähnlichen Links: differenzieren. „Mehr über das Klimaticket“ vs. „Mehr über das Tagesticket“ — sonst sind alle gleich.
  • 3
    Bei Downloads: Format und Größe. „PDF, 420 KB“ — der Nutzer weiß, was passiert.
4

Alt-Texte für Bilder

Alt-Texte werden Screenreader-Nutzern vorgelesen und von Google indiziert. Schlechte Alt-Texte sind verlorener Inhalt.

alt="image1.jpg"
alt="Bild"
alt="" (informatives Bild ohne Alt!)
alt="Logo Logo Logo Verkehrsbetrieb ÖPNV Bus Tram Ticket Fahrt"
  • 1
    Beschreibe den Inhalt, nicht die Datei. „image1.jpg“ ist nicht hilfreich — was ist auf dem Bild zu sehen?
  • 2
    Leerer Alt nur für Deko. Ein informatives Bild ohne Alt-Text ist für Screenreader unsichtbar.
  • 3
    Kein Keyword-Stuffing. Wiederholungen wie „Logo Logo Logo“ sind nervtoetend und schlecht für SEO.
  • 4
    Funktion vor Aussehen. Bei einem Logo: „Logo Verkehrsbetrieb“ — nicht das Aussehen beschreiben („blau-grüner Schriftzug“).
5

Karten-Texte konsistent halten

Cards in einer Reihe sollen wie Geschwister wirken. Stark unterschiedliche Textlängen brechen die Optik und ermueden das Auge.

  • 1
    Aehnliche Länge. 8–15 Wörter pro Card. Wenn ein Thema mehr Erklärung braucht, gehört es nicht in eine Card.
  • 2
    Parallel formuliert. Gleiche Satzstruktur über alle Cards in einer Reihe — das ist optisch ruhiger und leichter zu erfassen.
  • 3
    Gleiche Spezifität. „Bus“ vs. „Fahrradverleih höchster Qualität“ ist inkonsistent. Entweder alle generisch oder alle konkret.

Die wichtigsten Patterns

Wenn du dich nur an drei Sachen erinnerst:

  1. 1
    Sei konkret. Floskeln, Allgemeinplaetze, "Hier klicken" — alles raus. Jedes Wort soll arbeiten.
  2. 2
    Denke in Hierarchien. Headings sind eine Treppe, keine Stilauswahl. Cards sollen Geschwister sein, keine Fremden.
  3. 3
    Schreibe für Nicht-Sehende mit. Alt-Texte, Link-Texte, Heading-Struktur — sie helfen ALLEN, nicht nur Screenreader-Nutzern.