CP Registry

Wissensbasis

Redakteure

Aufgaben-orientierte Wissensbasis für Content-Menschen, die im TYPO3 pflegen. Agentur-typische Beispiele (Landingpage, Service-Hub, Kampagne), kein Code.

12 Aufgaben in dieser Wissensbasis
  1. Überschriften-Stufe nie nach Optik wählen
  2. Linktexte beschreiben das Ziel
  3. Rich-Text-Editor ohne Freistil nutzen
  4. Alt-Texte beschreiben Inhalt, nicht das Bild
  5. Schlechten Kontrast melden, nicht hinnehmen
  6. Bildschirm-Texte werden gescannt, nicht gelesen
  7. Block-Typ passt zum Inhalt, nicht zur Optik
  8. Mobil-Test vor jeder Veröffentlichung
  9. Tabellen-Kopfzeile macht Daten verständlich
  10. Struktur vor Text — nicht umgekehrt
  11. Suchmaschinen-Felder vollständig pflegen
  12. Neue Seiten in die Struktur einhängen
kritisch

Überschriften-Stufe nie nach Optik wählen

Die Stufe sagt dem Browser "neues Kapitel" — nicht die Schriftgröße.

Problem: Wenn die falsche Überschriften-Stufe gewählt wird, springen blinde Nutzer über Abschnitte hinweg oder verpassen sie komplett.

Vorlese-Programme melden mehrere Hauptthemen auf einer Seite — der Nutzer hält es für eine andere Seite und verliert die Orientierung.

  1. Einzelne H1

    Pro Seite gibt es genau eine Überschrift hoechster Stufe — die Seitenüberschrift ist bereits vom System gesetzt.

  2. Stufen abwärts

    Darunter stufenweise abwärts arbeiten — nie eine Stufe überspringen.

  3. Aussehen trennen

    Wenn eine Überschrift zu gross aussieht: nicht die Stufe wechseln, sondern im TYPO3-Backend die "Aussehen"-Variante ändern.

  4. Designer fragen

    Im Zweifel den Designer fragen: "Welches Aussehen ist hier gemeint?" — Stufe und Aussehen sind getrennte Entscheidungen.

Beispiel

Service-Hub-Seite

Seitenüberschrift "Unsere Services im Überblick". Darunter "Beratung", "Produkte", "Support". Unter "Produkte" stehen "Starter", "Professional", "Enterprise" eine Stufe tiefer — saubere Hierarchie.

Gegenbeispiel

Falsche Stufe aus Optik

"Enterprise" als hoechste Stufe gesetzt, weil die Variante optisch passte. Das Vorlese-Programm meldet jetzt zwei Hauptthemen statt eines.

Weiter: Überschriften-Trainer

kritisch

Linktexte beschreiben das Ziel

Vorlese-Programme listen alle Links isoliert auf — "hier klicken" fünf Mal macht eine Seite unbrauchbar.

Problem: Wenn Link-Texte das Ziel nicht beschreiben, verliert jeder Nutzer den Kontext, sobald er Links isoliert liest oder navigiert.

Für blinde Nutzer wird die Seite unbrauchbar; das ist ein BFSG-Verstoß und ein handfestes Risiko bei Audits.

  1. Ziel benennen

    Der Linktext beschreibt das Ziel, nicht die Aktion: "Service-Anmeldung starten" statt "hier klicken".

  2. Verben prüfen

    Verben nur verwenden, wenn sie zum Ziel gehören: "Kontakt aufnehmen" passt, "Mehr erfahren" nicht.

  3. Downloads kennzeichnen

    Bei Datei-Downloads Format und Größe nennen: "Produktbroschüre als PDF, 320 KB".

  4. Duplikate prüfen

    Linktexte einer Seite dürfen sich nicht wiederholen, wenn sie zu unterschiedlichen Zielen führen.

Beispiel

Kampagnen-Landingpage

Statt "Mehr Informationen finden Sie [hier]" steht "Lies das [Whitepaper Digitale Transformation als PDF, 4,2 MB]." Klar, was kommt und in welchem Format.

Gegenbeispiel

Unsichtbarer Link

"Um die Produkt-Anmeldung abzuschliessen, klicken Sie [hier]." Das Vorlese-Programm sagt nur "Link: hier".

kritisch

Rich-Text-Editor ohne Freistil nutzen

Wer Schriftgrößen, Farben und Zeilenumbrueche manuell setzt, baut eine Seite, die beim nächsten Brand-Update auseinanderfliegt.

Problem: Der Rich-Text-Editor laesst zu viel zu — Schriftgrößen, Farben, fette Absätze.

Manuelle Stile überlagern das Designsystem und werden beim nächsten Brand-Update nicht automatisch aktualisiert — Folge: händlicher Räumungsaufwand für den Designer.

  1. Keine manuellen Stile

    Keine Schriftgrößen, Farben oder Schriftarten manuell setzen — das macht der Designer über das Design-System.

  2. Bilder separat

    Keine Inline-Bilder aus Word kopieren — Bilder werden über das Datei-Modul hochgeladen.

  3. Keine Hartumbrüche

    Keine harten Zeilenumbrueche nutzen, um Layout zu erzwingen — Mobilgeräte brechen das sofort kaputt.

  4. Tabellen sparsam

    Tabellen nur dort, wo wirklich Daten sind, nicht für Layout-Zwecke.

  5. Reinen Text einfügen

    Im Zweifel Inhalt als reinen Text einfügen, dann mit den System-Stilen strukturieren.

Beispiel

Produkt-Detail-Seite

Text als reinen Absatz gepflegt, Aufzählungen als Liste, Bilder über das Datei-Modul. Beim nächsten Brand-Update zieht die Seite automatisch mit.

Gegenbeispiel

Manuell überschrieben

Überschriften manuell auf 24px und Rot gesetzt. Beim Brand-Update bleibt diese Seite in der alten Optik — der Designer muss alles haendisch aufräumen.

Weiter: TYPO3-Pflege

wichtig

Alt-Texte beschreiben Inhalt, nicht das Bild

Ohne Alt-Text liest das Vorlese-Programm den Dateinamen vor — "Bild_004" hilft niemandem.

Problem: Der Alt-Text ist die Beschreibung für Menschen, die das Bild nicht sehen können — weil sie blind sind oder das Bild nicht laedt.

Fehlende Alt-Texte sind ein BFSG-Verstoß und blockieren das Verständnis der Seite für einen Teil der Nutzer.

  1. Inhalt fragen

    Frag dich: Was sieht ein Sehender, was ein Blinder ohne Alt-Text verpassen würde?

  2. Inhalt beschreiben

    Beschreibe den Inhalt, nicht das Bild: "Frau steigt in einen E-Bus ein", nicht "Foto eines Busses".

  3. Dekorativ leerlassen

    Bei rein dekorativen Bildern: Alt-Text leer lassen — das Bild wird dann übersprungen.

  4. Text-Bilder woertlich

    Bei Bildern, die nur Text enthalten (Plakat, Infografik): den Text woertlich übernehmen.

  5. Kurz halten

    Maximal 1-2 Sätze. Kein Roman.

Beispiel

Kampagnen-Landingpage

"Zwei Personen besprechen ein Dashboard auf einem Laptop." — das transportiert den Inhalt des Angebots und hilft der Suchmaschine.

Gegenbeispiel

Dateiname als Alt-Text

"Bild_004.jpg" oder "Foto" oder "Hier ein schönes Foto". Das hilft niemandem — auch der Suchmaschine nicht.

Vertiefung

Sortiere zuerst: Welche Bilder transportieren Inhalt, welche sind dekorativ? Die Inhalts-Bilder bekommen einen sorgfältigen Alt-Text. Die dekorativen ein leeres Alt. Vergib Bildern beim Hochladen schon sprechende Dateinamen — das spart später Zeit.

wichtig

Schlechten Kontrast melden, nicht hinnehmen

Hellgrau auf Weiß sieht schick aus — bei Sonneneinstrahlung auf dem Smartphone liest es niemand.

Problem: Ein Kontrast, der zu schwach ist, ist für ältere Augen, Menschen mit Sehschwäche und alle unter direkter Sonneneinstrahlung faktisch unsichtbar.

Der wichtige Hinweis bleibt für einen Teil der Nutzer unsichtbar — und verfehlt so sein Ziel.

  1. Selbst-Test

    Wenn dir ein Block schwer lesbar erscheint: einmal selbst auf dem Smartphone draussen testen.

  2. Ticket aufmachen

    Wenn der Eindruck bleibt: Ticket per Awork an Renana mit Screenshot und Anmerkung "Kontrast bitte prüfen".

  3. Stärkere Variante

    Im Zweifel die stärkere Variante wählen, die der Designer ohnehin als Alternative vorgesehen hat.

  4. Nicht selbst anpassen

    Niemals selbst die Farbe im TYPO3 überschreiben — das macht der Designer im Stilvorrat.

Beispiel

Service-Übersicht

Hinweistexte in hellem Grau auf weissem Grund sind draussen kaum lesbar. Ticket auf, der Designer wählt einen Kontrast, der den Standard erfüllt.

Gegenbeispiel

Hinnehmen

Du nimmst es hin ("der Designer wird schon recht haben") — der wichtige Hinweis bleibt für einen Teil der Besucher unsichtbar.

wichtig

Bildschirm-Texte werden gescannt, nicht gelesen

Lange Sätze und endlose Absätze führen dazu, dass der Leser nach drei Sekunden weiterzieht.

Problem: Am Bildschirm wird nicht gelesen, sondern gescannt.

Wer die wichtigste Information hinten versteckt, verliert den Großteil der Leser, bevor sie ankommen.

  1. Sätze kuerzen

    Sätze kurz halten. Eine Idee pro Satz.

  2. Absätze umbrechen

    Absatz nach 3-4 Zeilen umbrechen.

  3. Listen nutzen

    Aufzählungen als Liste setzen, nicht als Satz mit Kommas.

  4. Wichtiges vorn

    Wichtigste Information immer nach vorn — kein "erst die Vorgeschichte, dann die Pointe".

  5. Komposita prüfen

    Lange deutsche Komposita prüfen: bricht das Wort sauber um? Sonst Designer oder Frontend Bescheid geben.

Beispiel

Produkt-Vergleich

Erster Satz nennt direkt das Ergebnis ("Drei Tarife, ein klares Ziel: der richtige Plan für jedes Team."). Danach drei Listenpunkte. Kein Vorgeplaenkel.

Gegenbeispiel

Behördenstil

"Im Rahmen der kontinuierlichen Bemühungen unserer Kommune ..." — nach diesem Satz wissen die meisten noch immer nicht, wo eine Säule steht.

Weiter: Layout & Lesbarkeit · Schreib-Lab

Vertiefung

Faustregel: Wenn du den Satz beim lauten Vorlesen einmal Luft holen musst, ist er zu lang. Splitten.

wichtig

Block-Typ passt zum Inhalt, nicht zur Optik

Der falsche Block macht Inhalt unhandlich oder mobil unlesbar.

Problem: Im TYPO3 stehen viele Blöcke zur Auswahl: Karten, Akkordeon, Tabelle, Teaser, Galerie.

Wer den falschen Block wählt, erzwingt später entweder ein Ticket oder eine schlechte Nutzererfahrung auf Mobilgeräten.

  1. Vergleichbar → Card

    Mehrere gleichartige Einträge, die man vergleichen will: Card-Grid.

  2. Vertiefbar → Akkordeon

    Lange Texte, die optional vertieft werden: Akkordeon.

  3. Daten → Tabelle

    Echte Daten mit klaren Spalten und Zeilen: Datentabelle.

  4. Handlung → CTA

    Ein wichtiger Aufruf zur Handlung: Teaser-Block oder CTA-Block.

  5. Zweifel → Baum

    Im Zweifel den Entscheidungsbaum nutzen.

Beispiel

Service-Übersicht

12 Leistungen als Card-Grid mit Filter (Bereich, Laufzeit). Daneben drei FAQ als Akkordeon ("Wie buche ich?", "Was kostet es?", "Wen kontaktiere ich?").

Gegenbeispiel

30 Standorte als Tabelle

Tabelle mit 8 Spalten. Auf dem Smartphone wird das eine endlose Scroll-Wuerge.

Weiter: Block-Entscheidungsbaum · Werkstatt

wichtig

Mobil-Test vor jeder Veröffentlichung

Mehr als die Hälfte der Besucher ruft Seiten vom Smartphone ab.

Problem: Wenn etwas auf dem Smartphone bricht, ist die Seite faktisch nicht erreichbar — auch wenn sie am Desktop perfekt aussieht.

Eine nicht mobile-taugliche Seite schließt die Mehrheit der Besucher aus und beschädigt das Vertrauen in den digitalen Kanal.

  1. Echtes Gerät

    Vor Veröffentlichung die Seite einmal auf einem echten Smartphone öffnen — nicht nur Desktop verkleinern.

  2. Überschrift ok?

    Ist die Hauptüberschrift sichtbar, ohne dass du seitlich scrollen musst?

  3. Daumen-Test

    Funktionieren Knöpfe und Links auch mit dem Daumen?

  4. Tabellen/Bilder

    Sind Tabellen oder Bilder lesbar — oder muss man zoomen?

  5. Ticket bei Problem

    Bei Problemen: Screenshot, Ticket per Awork an Renana.

Beispiel

Kampagnen-Landingpage

Preistabelle ist quer scrollbar, "Jetzt starten"-Knopf ist gross genug für den Daumen, Hero-Bild laedt schnell. Freigabe.

Gegenbeispiel

Nur Desktop abgenommen

Die Seite wird nur am 27-Zoll-Monitor abgenommen. Mobil sind die Knöpfe so klein, dass jeder Klick daneben geht.

Weiter: Mobile Studio

wichtig

Tabellen-Kopfzeile macht Daten verständlich

Vorlese-Programme lesen Zellen einzeln vor — ohne Kopfzeile weiß niemand, zu welcher Spalte sie gehören.

Problem: Eine Tabelle mit Zahlen ist für Sehende meist intuitiv, aber Vorlese-Programme lesen Zellen Stück für Stück vor.

Ohne Kopfzeile wird die Tabelle für blinde Nutzer komplett unverständlich.

  1. Kopfzeile anhaken

    Bei jeder Tabelle im TYPO3 die Option "Kopfzeile" und ggf. "erste Spalte als Kopf" anhaken.

  2. Nur für Daten

    Tabellen nur für echte Daten nutzen, nicht für Layout.

  3. Beschriftung oben

    Kurze Beschriftung über der Tabelle ("Tarife 2026 im Vergleich"), damit klar ist, was sie zeigt.

  4. Spalten begrenzen

    Spalten und Zeilen so wenig wie möglich. Mehr als 6 Spalten brechen mobil.

Beispiel

Tarife 2026 im Vergleich

Spalten "Plan", "Preis pro Monat", "Laufzeit". Erste Zeile als Kopfzeile angehakt. Das Vorlese-Programm sagt: "Spalte Plan: Professional. Spalte Preis: 49 Euro."

Gegenbeispiel

Tabelle ohne Kopfzeile

Das Vorlese-Programm sagt nur "Professional. 49. 12 Monate." Niemand weiß mehr, was wozu gehört.

wichtig

Struktur vor Text — nicht umgekehrt

Text aus Word direkt eingefügt ergibt eine Textwand. Mobil wird daraus eine Tapete.

Problem: Wenn du Text direkt aus einer Vorlage ins TYPO3 kippst, entsteht meist eine lange Wand aus Fließtext.

Der Leser findet die wichtige Information nicht — mobil scrollt er weg, bevor er ankommt.

  1. Ziel klären

    Beantworte zuerst: Was soll der Leser am Ende tun? (Kontakt aufnehmen, Produkt bestellen, Onboarding starten.)

  2. Blöcke definieren

    Gliedere die Seite in maximal 5 Blöcke: Einstieg, Voraussetzungen, Schritte, FAQ, Handlungsaufruf.

  3. Überschriften setzen

    Gib jedem Block eine eigene Überschrift, bevor du Text einfügst.

  4. Text einpflegen

    Fuege den Text erst danach in den richtigen TYPO3-Block ein.

Beispiel

Produkt-Anmeldung

Kurzer Einstieg, Aufzählung der Voraussetzungen, drei nummerierte Schritte zum Onboarding, am Ende Handlungsaufruf "Jetzt starten". Kein Leser verliert sich.

Gegenbeispiel

AGB als Textwand

Alle rechtlichen Fussnoten oben, die eigentliche Frage "Wie melde ich mich an?" versteckt im fuenften Absatz. Mobile Leser scrollen weg.

Weiter: Block-Entscheidungsbaum · Werkstatt

Vertiefung

Der Aufbau "Einstieg → Voraussetzungen → Schritte → Handlung" entspricht dem klassischen Lese-Pfad. Wer scannt, springt direkt zu den Schritten. Wer alles liest, bekommt die Reihenfolge so, dass keine Frage offen bleibt.

wichtig

Suchmaschinen-Felder vollständig pflegen

Suchmaschinen lesen nicht den ganzen Text, sondern stützen sich auf bestimmte Felder.

Problem: Wenn du Seitentitel und Beschreibung leer laesst, entscheidet die Suchmaschine selbst — und das Ergebnis ist meist suboptimal.

Niemand klickt auf "... wie in Paragraph 4 Absatz 2 ..." — die Seite bleibt im Treffer unsichtbar.

  1. Seitentitel

    Im TYPO3 das Feld "Seitentitel" pflegen — das erscheint im Such-Treffer als Überschrift.

  2. Beschreibung

    Das Feld "Beschreibung" pflegen — das ist der Vorschau-Text im Such-Treffer (1-2 Sätze).

  3. Erster Satz

    Den ersten Satz der Seite so formulieren, dass er das Thema klar nennt.

  4. Bilddateinamen

    Beim Hochladen von Bildern den Dateinamen aussagekräftig wählen ("feature-showcase-dashboard-2026.jpg" statt "IMG_2034.jpg").

Beispiel

Service-Übersicht 2026

Seitentitel: "Service-Übersicht 2026 — Agentur Musterwerk". Beschreibung: "Alle Leistungen auf einen Blick. Direkt anfragen." Klarer Treffer.

Gegenbeispiel

Alles leer gelassen

Seitentitel leer, Beschreibung leer. Die Suchmaschine zeigt einen Zufallssatz aus dem fuenften Absatz. Niemand klickt.

wissenswert

Neue Seiten in die Struktur einhängen

Eine Seite in der falschen Ebene finden weder Besucher noch Suchmaschinen.

Problem: Eine neue Seite, die in der falschen Ebene hängt, wird nicht gefunden — und Suchmaschinen erkennen keinen thematischen Bezug.

Die Seite braucht extra Werbung, weil sie sonst leer bleibt.

  1. Hauptthema klären

    Vor dem Anlegen klären: zu welchem Hauptthema passt die Seite? (Services, Produkte, Referenzen, Kontakt.)

  2. Unterordnen

    Die neue Seite eine Ebene unterhalb des passenden Hauptthemas anlegen.

  3. Sammelseite suchen

    Sichten, ob es schon eine Sammelseite gibt (z.B. "Service-Übersicht") — dort einhängen.

  4. Abklären

    Im Zweifel mit dem Projektmanager (Renana) abklären, ob die Seite eine eigene Ebene rechtfertigt.

Beispiel

Feature-Showcase 2026

"Feature-Showcase 2026" wird unter "Produkte → Neuheiten" eingehängt — gleichberechtigt mit "Produkt-Vergleich". Suchmaschinen erkennen die thematische Nähe.

Gegenbeispiel

Inselseite

"Feature-Showcase 2026" landet auf der gleichen Ebene wie die Startseite. Niemand findet sie über das Menü.

Weiter im Material: Layout & Lesbarkeit · TYPO3-Pflege · A11y-Audit