WordPress Sicherheit: So schützt du deine Website vor Hackern

WordPress Sicherheit: So schützt du deine Website vor Hackern

WordPress ist das meistgenutzte Content-Management-System der Welt. Das zeigt, wie großartig es ist, macht es aber auch zum beliebten Ziel für Angriffe aller Art. Nach der Installation und Einrichtung solltest du dich noch nicht entspannt zurücklehnen, sondern mit den nachfolgenden Schritten schauen, ob du bei deinem WordPress noch etwas optimieren kannst:

Sicheres Passwort wählen

Vergib unbedingt ein sicheres (=langes, komplexes) Administrator Passwort! Lass dies am beste von deinem Browser generieren und notfalls speichern – ich nutze dafür sehr gerne LastPass. Und wie immer gilt: Nutze nicht überall das gleiche Passwort 🙂 Sonst ist vielleicht neben WordPress auch noch gleich dein E-Mail-Postfach und dein Facebook Account gehackt.

Vermeide „admin“ als Benutzer

Suche dir zugleich am besten schon bei der WordPress Installation einen persönlichen Benutzernamen aus (statt dem Standard admin) und lösche nachträglich den admin Nutzer, falls er doch schon angelegt wurde.

Plugins, Themes und WordPress aktuell halten

Die meisten Angriffe werden durch veraltete Plugins und Themes (oder zu einfache Passworte) möglich gemacht. Um hier immer auf dem neuesten Stand zu sein, solltest du nicht nur WordPress, sondern auch alle installierten Erweiterungen sehr regelmäßig, am besten alle 1-2 Wochen, aktualisieren (gib die Wartung gern an mich ab, wenn du dich darum nicht selbst kümmern möchtest).

WordPress selbst bietet auch die Option, Plugins und Themes automatisch aktualisieren zu lassen – dies kannst du theoretisch einstellen, damit alles von selbst sofort gemacht wird. Ich würde dir diese Option nicht empfehlen (oder höchstens bei super unwichtigen kleinen Plugins), weil du bei einem fehlerhaften Update nicht direkt merkst, dass etwas nicht mehr läuft.

Bei einigen Aktualisierungen empfiehlt es sich außerdem, noch ein wenig abzuwarten – z.B. falls für eine neue WordPress Version noch nicht alle Plugins kompatibel sind und somit noch gar nicht mit der neuen Version funktionieren würden.

Anzahl an installierten Plugins minimieren

Installiere nur die Plugins, die du auch wirklich benötigst. Deinstalliere Plugins unbedingt, wenn sie dir nicht mehr länger dienen (nur deaktivieren reicht hier übrigens nicht, denn dann bleiben die Dateien trotzdem auf deinem Server). Und achte auch darauf, dass du dir keine WordPress Plugins einfach irgendwo herunterlädst, sondern installiere sie wenn möglich über den Plugins -> Installieren Menüpunkt deines Dashboards. Hier kannst du zudem schauen, wie häufig das Plugin im Einsatz ist und wann es zuletzt aktualisiert wurde:

Plugin Nutzung

Bei uralten, wenig genutzten Plugins ist ggf. Vorsicht geboten, gerade da sie vermutlich nicht mehr den neuesten Sicherheitsstandards entsprechen.

Ein Backup einrichten

Damit du für den Fall der Fälle – falls die Seite doch gehackt wurde oder etwas bei einem Update schief gelaufen ist – abgesichert bist, empfehle ich dir, mind. 1x pro Woche ein automatisches Update machen zu lassen. Hierfür kannst du z.B. Updraft Plus (ruhig in der kostenlosen Version) nutzen. Du musst einmal einstellen, wie häufig und wohin welche Daten gesichert werden sollen und wie viele Versionen beibehalten werde sollen und schon bis du fertig!

Oft sichert der Webhoster deine Website zwar auch – da hast du jedoch selbst keinen Einfluss darauf, wie häufig was genau gesichert wird und kannst auch nicht nur einzelne Teile (z.B. nur die Datenbank oder nur die Dateien) zurücksichern.

In diesem Video zeige ich dir, wie du das Backup einrichten kannst.

Benutzerrollen & Rechte – Nur so viel Macht wie nötig

Mal Hand aufs Herz: Hast du schon mal anderen Leuten Zugriff auf deine Website gegeben, weil sie dir „nur kurz helfen“ sollten? Dann kennst du das Risiko: Zu viele Köche verderben nicht nur den Brei, sondern gefährden auch die Sicherheit deiner Seite.
Nutze daher konsequent die WordPress-Benutzerrollen:

  • Administrator: Nur du (oder dein*e Web-Expert*in) sollte diese Rechte haben.

  • Redakteur, Autor, Mitarbeiter: Gib diese Rollen nur, wenn jemand wirklich Inhalte bearbeiten soll – und dann auch nur genau die Rechte, die er oder sie braucht.

  • Abonnent: Ideal für einfache Logins, z. B. bei geschützten Bereichen oder Mitgliederseiten.

Falls jemand dich nicht mehr unterstützt, lösche ihren oder seinen Account. Er kann ja später jederzeit wieder eingerichtet werden, wenn die Person wieder Zugriff benötigt.

Bonustipp: Stell bitte sicher, dass auch alle anderen Administratoren, Redakteure etc. ein sicheres Passwort wählen und dies im Idealfall regelmäßig ändern und nicht für andere Zugänge nutzen. 

👉 Mein Grundsatz: So wenig Admins wie möglich, so viele eingeschränkte Rollen wie nötig. Das senkt das Risiko von ungewollten Änderungen oder Hacks enorm.

SSL-Zertifikat & HTTPS einrichten!

Kennst du dieses kleine Schloss-Symbol in der Browserzeile🔒 – oder alternativ den Hinweis „Nicht sicher“, falls es fehlt? Das Schloss ist kein nettes Gimmick, sondern ein absolutes Muss!
Ohne SSL-Zertifikat wird deine Website nämlich nicht nur von Google abgestraft, sondern die Daten deiner Besucher*innen – vor allem beim Einloggen oder Kontaktformular-Ausfüllen – werden unverschlüsselt übertragen. Und das ist ungefähr so sicher, wie deinen Haustürschlüssel auf die Fußmatte zu legen.
Die gute Nachricht: Fast alle Hoster bieten dir heute ein kostenloses Let’s-Encrypt-Zertifikat an, das du mit wenigen Klicks aktivieren kannst. Danach ist deine Seite über https:// erreichbar und das Schloss erscheint. Achte darauf, dass wirklich alle Seiten auf HTTPS umgeleitet werden – bei Bedarf hilft ein Plugin wie Really Simple SSL oder Better Search Replace (in diesem Youtube-Video zeige ich dir, wie das geht).

Sicherheits Plugins installieren

Auch wenn du alles andere berücksichtigst, machen die folgenden Sicherheitsplugins Sinn:

  • Ninja Firewall, Wordfence Security oder mein Favorit: Limit Login Attempts Reloaded um generelle Attacken auf deine Website zu verhindern (hier reicht jeweils die kostenlose Version für den normalen Schutz erstmal aus). Wenn ein schädliches Script z.B. mehrmals hintereinander versucht, sich als Administrator auf deiner Seite einzuloggen, wird der Account vorsichtshalber eine zeitlang blockiert. Die IP-Adresse der Nutzer wird durch diese Plugins evtl. mitgeloggt, sodass ein entsprechender Hinweis in deiner Datenschutzerklärung erfolgen sollte.
  • WPS Hide Login oder Loginizer – falls man den Adminbereich nicht über die Standard Adresse /wp-login und /wp-admin erreichbar machen möchte. Hilft gegen automatisierte Hackerattacken.

Zwei-Faktor-Authentifizierung – Admin-Zugang doppelt abgesichert

Du willst Hackern so richtig den Spaß verderben? Dann setze unbedingt auf Zwei-Faktor-Authentifizierung (2FA)!
Das heißt: Neben deinem Passwort brauchst du beim Einloggen noch einen zweiten Code, z. B. aus einer Authenticator-App auf deinem Handy. Damit schützt du deinen Zugang auch dann, wenn dein Passwort in falsche Hände gerät.
Ich empfehle dir die Plugins Security Optimizer, Two Factor oder WP 2FA, die sich recht easy einrichten lassen und deine Login-Sicherheit massiv erhöhen.

Wichtig für die 2FA: Es gibt oft auch für Administratoren keine Hintertür – wenn du nicht mehr reinkommst, ist die einzige Möglichkeit, das Plugin händisch, also z.B. über ein FTP Programm, zu löschen. Falls du dir das nicht selbst zutraust stelle besser vorher sicher, dass dich jemand dabei unterstützen könnte.

Hier ein Screenshot der 2FA Konfigurationsmöglichkeit in meinem Lieblings-Security-Plugin Security Optimizer:

Security Optimizer mit 2 Faktor Authentifizierung

PHP Version aktuell halten

Bei deinem Hoster kannst du in der Regel einstellen, welche PHP Version für deine Website genutzt werden soll.

WordPress selbst zeigt mittlerweile bei veralteten Vesionen einen Warnhinweis im Backend an – spätestens dann ist es höchste Zeit, deine Seite auf die neueste PHP Version umzustellen. Solltest du hierbei Schwierigkeiten haben, kontaktiere am besten deinen Hoster.

Bei all-inkl.com kannst du es nach dem Login in die Verwaltung über all-inkl.com/kas beim Menüpunkt Domain einstellen:

PHP Version umstellen

Mit diesen wenigen Schritten hast du die Sicherheit deines WordPress schon sehr erhöht. Lass gern einen Kommentar hier, wenn du noch weitere Tipps oder Fragen hast 🙂

Du willst ganz sicher sein, dass deine Website nicht angreifbar ist?
Lass sie von mir einmal gründlich durchchecken!

Technik-Check für deine WordPress-Website
Ich überprüfe deine Plugins, Updates, Sicherheitseinstellungen, Backups und mehr und stelle dir alles bestmöglich ein.

👉 Jetzt Technik-Check buchen

Oder möchtest du lieber, dass ich mich regelmäßig darum kümmere?

Monatliche Website-Wartung
Ich halte deine Website aktuell, sicher und funktionsfähig – ganz ohne Aufwand für dich.

👉 Mehr zur Wartung erfahren

Barrierefreie Website – Der komplette Guide für WordPress und Divi (inkl. Screenreader-Optimierung)

Barrierefreie Website – Der komplette Guide für WordPress und Divi (inkl. Screenreader-Optimierung)

Das Thema Barrierefreiheit für Websites ist nicht nur ethisch wichtig, sondern seit dem neuen Barrierefreiheitsstärkungsgesetz (sag das mal 3x schnell hintereinander 😅) auch rechtlich relevant geworden.

Als Webdesignerin werde ich immer häufiger gefragt: „Muss meine Website barrierefrei sein?“ und „Wie mache ich meine WordPress-Website barrierefrei?“

In diesem ausführlichen Blogartikel zeige ich dir:

  • Wann das neue Barrierefreiheitsgesetz für dich gilt
  • Wie du prüfst, ob deine Website barrierefrei ist
  • Schritt-für-Schritt Anleitungen für WordPress und Divi
  • Wie du deine Website für Screenreader optimierst
  • Welche Tools dir bei der Umsetzung helfen
  • Häufige Fehler und wie du sie vermeidest

Was bedeutet Barrierefreiheit bei Websites?

Barrierefreiheit (auch Web Accessibility genannt) bedeutet, dass deine Website für alle Menschen zugänglich und nutzbar ist – unabhängig von körperlichen oder technischen Einschränkungen.

Das betrifft konkret Menschen mit:

  • Sehbehinderungen oder Blindheit (nutzen oft Screenreader, wo ihnen der Bildschirminhalt vorgelesen wird)
  • Hörbehinderungen oder Gehörlosigkeit
  • Motorischen Einschränkungen (können z.B. keine Maus verwenden)
  • Kognitiven Beeinträchtigungen
  • Temporären Einschränkungen (z.B. gebrochener Arm)

Eine barrierefreie Website ist aber nicht nur für Menschen mit Behinderungen hilfreich – sie verbessert die Nutzererfahrung für alle Besucher*innen und kann sogar dein SEO-Ranking positiv beeinflussen! Also unabhängig davon, ob das Gesetz für dich gilt oder nicht, kannst du dir aus diesem Artikel eine Verbesserungsvorschläge für deine Website mitnehmen!

Das Barrierefreiheits-stärkungsgesetz – gilt es für deine Website?

Ab dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) auch für bestimmte private Unternehmen. Die wichtigste Frage ist: Bist du betroffen?

Wer muss seine Website barrierefrei gestalten?

Das Gesetz gilt für Unternehmen, die Dienstleistungen für Verbraucher*innen anbieten in folgenden Bereichen:

  • E-Commerce und Online-Shops (Verkauf von Produkten)
  • Dienstleistungen im Bereich Mobilität (z.B. Reisebuchungen, Taxi-Services)
  • Bankwesen und Finanzdienstleistungen
  • Kommunikationsdienste (Telefonie, Messaging)
  • Personenbeförderung (Fluglinien, Bahn, Bus)
  • Audiovisuelle Mediendienste (Streaming, Video-on-Demand)

So prüfst du, ob das Gesetz für dich gilt:

  1. Bietest du Dienstleistungen für Endverbraucher*innen an? (B2C, nicht B2B)
  2. Fällst du in eine der oben genannten Kategorien?
  3. Hast du mehr als 10 Mitarbeiter*innen ODER einen Jahresumsatz über 2 Millionen Euro?

Wenn du alle drei Fragen mit „Ja“ beantwortest, dann gilt das Gesetz für dich. Für einen Großteil der Leser*innen hier – mich eingeschlossen – wird das Gesetz also offiziell nicht gelten.

Aber Achtung: Auch wenn du nicht direkt betroffen bist, ist es sinnvoll, deine Website barrierefrei zu gestalten – für bessere Nutzererfahrung und potenzielle Kund*innen.

Die Richtlinien für barrierefreie Websites – WCAG 2.1

Es wird jetzt etwas technisch, aber wichtig: Die Web Content Accessibility Guidelines (WCAG) 2.1 sind der internationale Standard für barrierefreie Websites. Sie basieren auf vier Grundprinzipien:

1. Wahrnehmbar (Perceivable)

Informationen müssen für alle Nutzer*innen wahrnehmbar sein.

Das heißt konkret: Die Inhalte müssen für alle erfassbar sein – auch z.B. für Menschen mit Seh- oder Hörbeeinträchtigung.
Beispiel:
Du hast ein schönes Bild auf deiner Startseite, das zeigt, wie du mit Kund*innen arbeitest. Wenn du keinen Alternativtext (ALT-Text) hinzufügst, weiß ein Screenreader nicht, was darauf zu sehen ist – und blinde Menschen bekommen diese Info nicht mit.
Lösung: Schreib z. B. als ALT-Text: „Coach arbeitet mit Kundin in hellem Büro, beide lachen.“

2. Bedienbar (Operable)

Die Website muss mit verschiedenen Eingabemethoden bedienbar sein.

Das heißt konkret: Nutzer*innen müssen sich auf deiner Website zurechtfinden – auch ohne Maus.
Beispiel:
Eine Nutzerin kann nur mit der Tastatur navigieren – doch dein Menü klappt nur per Maus auf? Dann ist die Seite für sie nicht nutzbar.
Lösung: Achte darauf, dass dein Menü, Buttons und Formulare per Tabulator erreichbar sind. Das kannst du selbst testen: Einfach mal mit der Tab-Taste durch deine Seite springen.

3. Verständlich (Understandable)

Inhalte und Bedienung müssen verständlich sein.

Das heißt konkret: Inhalte und Bedienung sollen klar und nachvollziehbar sein – auch bei kognitiven Einschränkungen oder wenn Deutsch nicht die Muttersprache ist.
Beispiel:
Du schreibst: „Tragen Sie zur Authentifizierung bitte Ihren Token ein.“
Vielleicht wissen aber viele gar nicht, was genau ein Token und eine Authentifizierung genau sind. Verständlicher wäre: „Gib bitte deinen Anmeldecode ein.“
Lösung: Vermeide Fachchinesisch und erkläre, was du meinst – am besten so, dass auch 12-jährige ohne Expertise in deinem Bereich verstehen können.

4. Robust (Robust)

Die Website muss mit verschiedenen Technologien kompatibel sein.

Es gibt drei Konformitätsstufen: A (grundlegend), AA (erweitert) und AAA (höchste Stufe). Für die meisten Websites ist Level AA der angestrebte Standard.

Das heißt konkret: Deine Website sollte mit möglichst vielen Geräten, Browsern und Hilfstechnologien funktionieren.
Beispiel:
Ein Formularfeld ist falsch programmiert, sodass ein Screenreader es nicht erkennt – z. B. fehlt das „Label“, das erklärt, was hier eingetragen werden soll.
Lösung: Nutze sauberen, standardkonformen HTML-Code oder gute Page Builder mit sinnvoller Strukturierung. Lass deine Seite am besten mal von einem Screenreader „vorlesen“ – du wirst staunen, was da (nicht) ankommt.

Und was ist mit den Stufen A, AA und AAA?

Die WCAG kennt drei Stufen:

  • A: Das absolute Minimum – hier geht es z. B. um einfache Tastaturbedienung oder ALT-Texte.
  • AA: Der Standard, den öffentliche Stellen und auch die meisten Unternehmen anstreben sollten.
  • AAA: Die Königsdisziplin – zum Beispiel mit Gebärdensprachvideos oder besonders einfacher Sprache.

Für die meisten Websites reicht Level AA – aber selbst das ist oft noch Neuland. Und genau deshalb lohnt sich ein Blick auf die wichtigsten Stellschrauben, die du auch ohne Technikstudium umsetzen kannst. Bevor du damit loslegst, kannst du erstmal den Status Quo abfragen.

So prüfst du, ob deine WordPress-Website barrierefrei ist

Bevor du mit der Optimierung beginnst, solltest du deine WordPress-Website einmal unter die Lupe nehmen.

Das kannst du zum Beispiel mit den folgenden Tools ausprobieren:

Automatisierte Tests über Online-Tools

  1. Experte.de
    • Mein aktueller Favorit!
    • Als Website aufrufbar: https://www.experte.de/barrierefreiheit
    • Prüft deine Website und alle Unterseiten und gibt dir deutschsprachige Hinweise dazu, was genau auf welcher Seite optimiert werden müsste (z.B. Kontrast erhöhen)
  2. WAVE (Web Accessibility Evaluation Tool)
    • Kostenlose Browser-Erweiterung
    • Zeigt Fehler direkt auf der Website an
    • Link: wave.webaim.org
  3. axe DevTools
    • Browser-Erweiterung für Chrome/Firefox
    • Sehr detaillierte Fehleranalyse
    • Perfekt für Entwickler*innen
  4. Lighthouse
    • In Chrome DevTools integriert
    • Prüft auch Performance und SEO
    • Rechtsklick → Untersuchen → Lighthouse

Nach der Analyse wird dir dann ein umfangreicher Bericht zur Verfügung gestellt inkl. Verbesserungshinweisen (die mal mehr, mal weniger kryptisch sind 😬)

Manuelle Tests

Automatisierte Tools erfassen nur etwa 30% aller Barrieren. Daher sind manuelle Tests wichtig:

  1. Tastatur-Navigation testen
    • Navigiere nur mit der Tab-Taste durch deine Website
    • Alle Elemente sollten erreichbar und sichtbar fokussiert sein
  2. Screenreader testen auf deinem Computer
    • Windows: NVDA (kostenlos)
    • Mac: VoiceOver (integriert)
    • Teste, ob alle Inhalte vorgelesen werden (ist nicht ganz einfach, die Bedienung von Screenreadern zu verstehen, je nachdem welches System du nutzt musst du dafür evtl. noch eine spezielle Anleitung zu Rate ziehen)
  3. Kontraste prüfen

Hierzu gelten die offiziellen Empfehlungen für Level AA:

Ein Kontrastverhältnis von mindestens 4,5:1 ist erforderlich für normalen Fließtext.
Für großen Text (mindestens 18 pt oder fett formatiert) genügt ein Verhältnis von 3:1.

Level AAA (höchste Stufe):

Ein Verhältnis von mindestens 7:1 für normalen Text
und mindestens 4,5:1 für großen oder fetten Text.

Barrierefreiheit in WordPress umsetzen – Schritt für Schritt

WordPress bietet von Haus aus bereits eine gute Basis für Barrierefreiheit. Hier ist deine Schritt-für-Schritt-Anleitung:

Schritt 1: Barrierefreies Theme wählen

Wenn du noch kein Theme hast, wähle ein Theme, das als „accessibility-ready“ bzw. „Für Barrierefreiheit geeignet“ zertifiziert ist.

In WordPress kannst du dazu bei Design -> Themes nach Funktionen filtern:

Beliebte barrierefreie Themes sind:

  • Twenty Twenty-Four
  • Astra
  • GeneratePress
  • Kadence

Wenn du wie ich das Divi-Theme nutzt, kannst du weiter unten Tipps finden, wie du deine Inhalte damit weitestgehend barrierefrei umsetzt.

Schritt 2: Überschriften richtig strukturieren

Sorge dafür, dass die Überschriften auf deinen Seiten – mit H1, H2 usw. eingeteilt – korrekt verwendet werden. Auf jeder Seite kannst du nur eine H1 verwenden, wenn du weitere Unterüberschriften hast, sollten diese H2 sein und Überschriften, die deine Inhalte noch feiner einteilen dann H3, also ungefähr so:

html<h1>Hauptüberschrift (nur einmal pro Seite)</h1>
<h2>Hauptabschnitt</h2>
<h3>Unterabschnitt</h3>
<h2>Zweiter Hauptabschnitt</h2>

Ich kenne ja einige, die die Überschriften danach auswählen, wie groß der Text gerade dargestellt werden soll – das solltest du allerdings ab jetzt nicht mehr tun.

In WordPress:

  • Nutze die Überschriften-Blöcke im Gutenberg-Editor (oder im Divi Builder beim Textmodul die H1, H2 etc. Auswahl)
  • Überspringe keine Überschriftenebenen (nicht von H1 auf H3)
  • Pro Seite nur eine H1-Überschrift

Übrigens empfehle ich dir auch wenn du das Divi-Theme oder ein anderes Theme mit Pagebuilder verwendest, die Blogartikel ruhig mit dem Gutenberg-Editor zu schreiben. Der erzeugt meist sehr sauberen Code ohne Schnickschnack, während du bei Pagebuildern eigentlich immer noch weitere Codeschnipsel auf deiner Seite hast, die die Barrierefreiheit verringern.

Schritt 3: Alt-Texte für alle Bilder

Generell solltest du schon beim Hochladen der Bilder in deine Mediathek darauf achten, dass du einen „vernünftigen“ = sprechenden Dateinamen (also z.B. Frau-am-Computer.jpg statt IMG01238.jpg) verwendest.

In den ALT-Texten /ALT Tags beschreibst du dann, was genau in dem Bild zu sehen ist.

So geht’s in WordPress:

  1. Klicke auf ein Bild im Editor (oder in der Mediathek)
  2. Rechte Sidebar → „Alt-Text (alternativer Text)“
  3. Beschreibe den Bildinhalt prägnant – was sieht man auf dem Bild?
  4. Bei dekorativen Bildern: Alt-Text leer lassen, sonst wird vom Screenreader was vorgelesen, was gar nicht relevant ist

Gute Alt-Texte:

  • „Frau arbeitet am Laptop im Café“
  • „Balkendiagramm zeigt Umsatzsteigerung von 20%“

Schlechte Alt-Texte:

  • „Bild1.jpg“
  • „Klicke hier“
  • Zu lange Beschreibungen

Schritt 4: Links verständlich gestalten

Schlechte Linktexte:

  • „Hier klicken“
  • „Weiterlesen“
  • „Mehr“

Gute Linktexte:

  • „Kostenlose Website-Checkliste herunterladen“
  • „Preise für Webdesign-Pakete ansehen“
  • „Kontakt für individuelle Beratung“

Schritt 5: Farben und Kontraste optimieren

Als nächstes schaust du, ob du wirklich Farben mit guten Kontrasten verwendest – falls nicht, kannst du diese jetzt anpassen.

WordPress-Anpassungen:

  1. Gehe zu Design → Customizer → Farben oder → Global – Farben (je nachdem, welches Theme du verwendest, kann dies auch an anderer Stelle stehen – bei Divi findest du Farben z.B. bei Divi → Theme Optionen → Standardpalette Farbauswähler und kannst diese dann separat bei Typographie, Buttons, Footer etc. im Theme Customizer einstellen)
  2. Prüfe alle Farbkombinationen mit https://coolors.co/contrast-checker/112a46-acc8e5, oder WebAIM Contrast Checker (oder einem anderen Kontraste-Tool deiner Wahl)
  3. Mindestkontrast: 4.5:1 für normalen Text, 3:1 für große Überschriften – wenn du es ganz genau wissen willst:

Schritt 6: Formulare barrierefrei gestalten

Wichtige Elemente:

  • Jedes Eingabefeld braucht ein eindeutiges Label (quasi einen Titel für das Feld)
  • Pflichtfelder solltest du deutlich kennzeichnen (üblich ist ein *)
  • Fehlermeldungen sollten klar formuliert sein, damit man genau weiß, was nicht passt (z.B. Postleitzahl darf nur aus 5 Ziffern bestehen)

Schritt 7: Videos barrierefrei einbinden

  • Untertitel für alle Videos
  • Audio-Beschreibung für wichtige visuelle Inhalte
  • Steuerelemente mit Tastatur bedienbar

Wenn du Videos aus Youtube einbettest, würdest du es über diesen angepassten Code machen können:

html<!-- Barrierefrei eingebettetes YouTube-Video -->
<div class="video-container" role="region" aria-label="Video: Website-Optimierung Tipps">
<iframe
src="https://www.youtube.com/embed/VIDEO-ID?cc_load_policy=1"
title="Website-Optimierung: 10 wichtige Tipps"
allowfullscreen>
</iframe>
</div>

Schritt 8: Menü barrierefrei gestalten

Damit dein Hauptmenü barierefrei wird, prüfe einmal die folgenden Punkte:

Skip-Links einbauen
Ermögliche deinen Besucher*innen, direkt zum Hauptinhalt zu springen – ohne sich erst durch zig Menüpunkte oder Header-Elemente tabben zu müssen. Das spart Nerven und Zeit. Beispiel: Ein unsichtbarer Link ganz oben auf der Seite, der beim Fokus sichtbar wird und direkt zum Inhalt führt. Klingt unscheinbar, macht aber einen riesigen Unterschied.

Tastaturfreundlich statt Maus-zentriert
Dein Menü sollte sich komplett mit der Tastatur bedienen lassen – also per Tab-Taste durchklickbar, Untermenüs sollten sich mit Enter öffnen lassen und nicht nur beim Hovern mit der Maus auftauchen. Probiere es selbst mal aus: Hände weg von der Maus und einmal durch die Navigation tabben. Läuft’s flüssig?

Aktuellen Menüpunkt markieren
Ein kleiner, aber wichtiger Helfer für die Orientierung: Markiere den aktuell aktiven Menüpunkt visuell – z. B. durch eine andere Farbe oder Unterstreichung. So wissen alle sofort, wo sie sich auf deiner Website gerade befinden.

Breadcrumb-Navigation ergänzen
Besonders auf größeren Websites lohnt sich eine Brotkrumen-Navigation (auch Breadcrumbs genannt). Sie zeigt übersichtlich den Pfad zur aktuellen Seite an – z. B. Startseite > Blog > SEO-Tipps. Du kennst es vielleicht aus Online-Shops, aber oft macht dies auch auf Websites mit viel Inhalt Sinn. Es hilft nicht nur Nutzer*innen mit Screenreader, sondern auch allen anderen, die sich sonst schnell verirren.

Schritt 9: Barrierefreie Schriftarten für Websites: Das solltest du bei der Schriftwahl beachten

Barrierefreiheit endet nicht beim Überschriftenlevel oder den Kontrasten – auch die gewählte Schriftart beeinflusst ganz erheblich, wie gut deine Inhalte wahrgenommen werden.

Denn: Eine schöne Schrift bringt nichts, wenn sie niemand entziffern kann.

Hier sind ein paar einfache, aber oft übersehene Regeln, mit denen du die Lesbarkeit deiner Website sofort verbesserst:

Diese Schriftarten solltest du auf barrierefreien Websites vermeiden

  • Schnörkelschriften und verspielte Fonts (z. B. für Zitate oder Überschriften) wirken zwar hübsch, sind aber oft schwer lesbar, besonders für Menschen mit Legasthenie, Sehschwäche oder Konzentrationsproblemen.
    → Wenn überhaupt, dann bitte sparsam und nur dekorativ als Akzent verwenden.
  • Zentrierter Fließtext über mehrere Zeilen:
    Klingt unwichtig, aber erschwert beim Lesen enorm die Orientierung – gerade bei längeren Absätzen. Der Blick muss bei jeder neuen Zeile erst wieder den Anfang suchen.
    → Besser: Linksbündig – das ist übrigens auch auf Mobilgeräten deutlich angenehmer. Netter Nebeneffekt: Verringert auch die Absprungrate deiner Besucher*innen, weil sie deinen Text besser und einfacher aufnehmen können!
  • Längere Texte in Großbuchstaben (VERSALIEN):
    Wir erkennen Wörter nicht nur Buchstabe für Buchstabe, sondern als Form – Großbuchstaben zerstören diese Form und sollten daher auch nicht für längere Texte verwendet werden.
    → Verwende Großbuchstaben nur für ganz kurze Wörter oder Buttons.
  • Zu dünne, zu kleine oder extrem gestaltete Schriftarten:
    Gerade bei kleiner Darstellung oder schlechtem Kontrast gehen feine Linien unter. Achte also darauf, dass insbesondere feine / dünne Schriftarten ausreichend groß dargestellt werden, damit sie lesbar bleiben.
    → Wichtig für Mobilansicht & ältere Bildschirme!

Empfohlene Schriftarten für barrierefreie Websites: 19 gut lesbare Fonts

Wenn du auf Nummer sicher gehen willst, nutze gut ausgebaute, serifenlose Schriften, die speziell für Bildschirmdarstellung optimiert wurden.
Hier findest du eine Auswahl von 19 Schriftarten, die sich für barrierefreie Websites besonders eignen:

Google Fonts – zuverlässig & DSGVO-konform einbindbar (lokal, wie ich das in diesem Blogartikel zeige)

  • Poppins – klar, modern, vielseitig
  • Open Sans – Klassiker mit sehr guter Lesbarkeit
  • Inter – speziell für Interfaces entwickelt
  • Roboto – technisch & vertraut
  • Lato – weich und neutral
  • Source Sans Pro – neutraler Allrounder
  • Nunito / Nunito Sans – freundlich, leicht rund
  • Work Sans – schlicht und effektiv
  • IBM Plex Sans – modern mit Charakter
  • Mulish – leicht und vielseitig einsetzbar

Weitere barrierefreundliche Schriften:

  • Arial – langweilig, aber funktional
  • Verdana – für Bildschirmdarstellung entwickelt
  • Tahoma – sehr gute Abstände, ideal für kleinere Schrift
  • Trebuchet MS – webfreundlich & robust
  • Atkinson Hyperlegible – speziell für Sehbehinderte entwickelt
  • Fira Sans – technisch, gut bei kleinen Schriftgrößen
  • Segoe UI – von Microsoft für gute Lesbarkeit optimiert
  • Quicksand – eher weich, aber gut strukturiert
  • Helvetica Neue – gut lesbar, aber nur mit sauberem Einbau empfehlenswert

Mehr zur Auswahl findest du in meinem Blogartikel „Schriftarten für deine Website wählen„.

Divi barrierefrei gestalten – Spezielle Tipps

Divi ist nicht von Haus aus barrierefrei, kann aber mit einigen Anpassungen deutlich verbessert werden:

Divi-spezifische Probleme und Lösungen

Problem 1: Fehlende Überschriften-Struktur

  • Lösung: Nutze die Text-Module und stelle die Überschriften manuell ein
  • Markiere dafür eine Zeile und wähle H1, H2, H3 etc. bewusst aus – passend zur Inhaltsstruktur

Tipp: Auf jeder Seite sollte es nur eine H1 geben – das ist die Hauptüberschrift. Danach folgt logisch die H2 (z. B. für einzelne Abschnitte) und dann H3 (z. B. für Unterpunkte).

Problem 2: Fehlende Alt-Texte bei Hintergrundbildern

  • Lösung: Nutze das Bild-Modul statt Hintergrundbilder für wichtige Inhalte

Problem 3: Slider sind schwierig für Screenreader

Wenn es irgendwie möglich ist, solltest du auf Slider verzichten (das gilt nicht nur für das Divi-Theme). Oft lassen sie sich nicht per Tastatur bedienen, die Inhalte darin werden nicht korrekt vorgelesen und die Bewegung lenkt ab oder ist nicht steuerbar.

Wenn du unbedingt Slider nutzen möchtest, dann …

  • Max. 3–5 Slides – und diese kurz & aussagekräftig
  • Keine Autoplay-Funktion aktivieren, wenn der Slider nicht manuell pausiert werden kann
    das geht oft direkt im Inhaltsbereich unter „Slider -> Autoplay“: NO statt YES 🙂
  • Pfeile & Punkte gut sichtbar machen, damit Nutzer*innen sehen, dass hier etwas gesteuert werden kann

Wie genau das im Detail umgesetzt wird, lernst du auch in meinem Divi Powerkurs.

Hilfreiche Plugins und Tools

WordPress-Plugins für Barrierefreiheit

1. WP Accessibility

  • Kostenlos
  • Skip-Links einfügen: Besucher*innen können per Tastatur direkt zum Hauptinhalt springen, ohne durch Header und Menü zu tabben.
  • Formulare verbessern: Das Plugin ergänzt fehlende Beschriftungen (Labels) und sorgt so dafür, dass Screenreader die Felder korrekt vorlesen.
  • Fehlende Alt-Texte kennzeichnen – damit du keinen vergisst.
  • Barrierefreiheits-Hinweise anzeigen – z. B. zu Kontrasten oder Strukturelementen.

2. One Click Accessibility – fügt eine Toolbar zu deiner Website hinzu!

Mit dieser Toolbar können Besucher*innen selbst:

  • Schriftgröße ändern – Ideal für Menschen mit eingeschränkter Sehkraft.
  • Kontrastmodus aktivieren – Z. B. hoher Kontrast oder dunkler Hintergrund.
  • Screenreader-Modus einschalten – Anpassungen, die das Lesen per Screenreader erleichtern.
  • Unterstreichung aller Links – Für bessere Sichtbarkeit von klickbaren Elementen.
  • Benutzerdefinierte Einstellungen für Farben und Sichtbarkeit

3. AccessibleWP – Accessibility Toolbar

  1. Kostenlos
  2. Tastaturnavigation: Ermöglicht die Navigation mit der Tastatur.
  3. Animationen deaktivieren: Schaltet CSS3-Animationen aus.
  4. Kontrastmodus: Bietet Optionen für dunklen Kontrast und ermöglicht die Auswahl benutzerdefinierter Farben.
  5. Schriftgröße ändern: Erlaubt das Vergrößern oder Verkleinern der Schriftgröße.
  6. Lesbare Schriftart: Wechselt zu einer besser lesbaren Schriftart.
  7. Titel markieren: Hebt Überschriften hervor.

Die Plugins werde ich in Kürze testen und dann hier im Detail berichten! Schreib mir gern in die Kommentare, ob du eins der Plugins – oder ein anderes – schon kennst und nutzt und empfehlen kannst.

Häufige Fehler bei der Barrierefreiheit vermeiden

Fehler 1: Nur auf automatisierte Tests vertrauen

Problem: Tools wie WAVE erfassen oft nur 30% aller Barrieren.

Lösung: Kombiniere automatisierte Tests mit manuellen Tests:

  • Tastatur-Navigation testen
  • Screenreader verwenden
  • Verschiedene Browser testen

Fehler 2: Alt-Texte für dekorative Bilder

Problem: Dekorative Bilder sollten leere Alt-Texte haben.

Beispiel:

html<!-- Dekoratives Bild -->
<img src="deko-linie.jpg" alt="" role="presentation">

<!-- Inhaltliches Bild -->
<img src="team-foto.jpg" alt="Unser fünfköpfiges Team bei der Arbeit">

Fehler 3: Farbe als einziges Unterscheidungsmerkmal beim Link

Problem: Links nur durch Farbe zu kennzeichnen reicht nicht. Sie sollten unterstrichen sein, oder du arbeitest alternativ mit Icons wie z.B. 🔗, die du vor oder nach den Linktext stellst. Den folgenden CSS Code könntest du für eine Unterstreichung in deinem Theme Customizer bei „Zusätzliches CSS“ eintragen und deine Farbe entsprechend anpassen.

Codebeispiele:

css/* Nur Links im Fließtext unterstreichen */
p a,
li a {
color: #005fcc;
text-decoration: underline;
}

Das eignet sich, wenn du z. B. Links im Footer, Header oder Navigationsmenü ausnehmen willst.

css/* Alle Links unterstreichen, aber NICHT innerhalb von Buttons oder mit Bildern */
a {
color: #005fcc;
text-decoration: underline;
}

/* Ausnahmen definieren */
a.et_pb_button, /* Divi-Buttons */
a.button, /* generische Button-Klassen */
a img, /* verlinkte Bilder */
.et_pb_button a, /* Buttons innerhalb von anderen Elementen */
.wp-block-button__link, /* Gutenberg-Buttons */
a[class*="button"] /* Buttons mit „button“ im Klassennamen */
{
text-decoration: none !important;
}

Diese Variante funktioniert gut mit Divi, Gutenberg und vielen Themes – du kannst sie bei Bedarf noch um eigene Button-Klassen erweitern.

Fehler 4: Unverständliche Fehlermeldungen

Problem: „Fehler in Feld 3“ sagt nichts aus.

Lösung: Konkrete, hilfreiche Fehlermeldungen:

html<!-- Schlecht -->
<div class="error">Ungültige Eingabe</div>

<!-- Gut -->
<div class="error" role="alert">
    Die E-Mail-Adresse muss ein @-Zeichen enthalten.
    Beispiel: name@domain.de
</div>

Video: Barrierefreie Website ab 2025: Wer ist betroffen & 5 einfache Maßnahmen

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Fazit: Barrierefreiheit ist ein Prozess

Barrierefreiheit ist kein einmaliges Projekt, sondern ein kontinuierlicher Prozess. Starte mit den wichtigsten Punkten:

  1. Prüfe deine rechtliche Verpflichtung mit den Kriterien oben
  2. Teste deine aktuelle Website mit den vorgestellten Tools und manuellen Tests
  3. Behebe die wichtigsten Probleme zuerst (Überschriften, Alt-Texte, Kontraste)
  4. Implementiere systematisch weitere Verbesserungen
  5. Teste regelmäßig mit echten Nutzer*innen

Die Investition in Barrierefreiheit lohnt sich: Du erreichst eine größere Zielgruppe, verbesserst dein SEO-Ranking und zeigst gesellschaftliche Verantwortung 💪. Außerdem ist eine barrierefreie Website oft auch für alle anderen Nutzer*innen benutzerfreundlicher!

Brauchst du Hilfe bei der Umsetzung? Barrierefreiheit kann am Anfang überfordernd wirken. Gerne unterstütze ich dich mit einem VIP Umsetzungstag dabei, deine WordPress-Website mit Divi barrierefrei zu gestalten – von der ersten Analyse bis zur vollständigen Umsetzung.

Schreib mir gerne in die Kommentare, welche Fragen du zur Barrierefreiheit hast oder welche Tools du bereits verwendest!

Was Teilnehmer*innen über Weekend Website sagen – echte Erfahrungen & Ergebnisse

Was Teilnehmer*innen über Weekend Website sagen – echte Erfahrungen & Ergebnisse

Website erstellen? Für viele klingt das nach Wochen voller Technik-Frust, unübersichtlicher Baukästen und fehlender Klarheit. Genau deshalb habe ich den Kurs „Weekend Website entwickelt – für Selbstständige, die endlich eine professionelle Website wollen, ohne sich durch stundenlange Tutorials zu quälen oder die Erstellung noch monatelang aufzuschieben, weil alles so kompliziert und überwältigend ist.

In diesem Artikel zeige ich dir, was ehemalige Teilnehmer*innen über den Kurs sagen, welche Herausforderungen sie vorher hatten – und wie sie sie gelöst haben. Ihre Worte sprechen für sich.

Vielleicht erkennst du dich in der einen oder anderen Situation sogar wieder?


„Der „Weekend Website“ Kurs hat mir damals super geholfen, die Grundlagen (und noch einiges mehr) rund um WordPress wirklich zu verstehen. Innerhalb weniger Tage stand mein Website-Grundgerüst – und ich wusste genau, wie ich selbst Dinge anpassen kann. Gerade diese Unabhängigkeit ist mir total wichtig. Ich kann den Kurs von Herzen empfehlen, wenn Du schnell und ohne Technik-Overload eine eigene Website aufbauen willst! “ – Veronika Munt, Digital Workplace Managerin & Expertin für digitalen Minimalismus


„Vor dem Kurs wusste ich gar nicht, wo ich überhaupt anfangen sollte. Allein die Begriffe wie Hosting, Theme, Plugins – das war für mich komplettes Neuland. Ich hatte keine Ahnung, wie ich das alles jemals umsetzen sollte.
Durch den Kurs konnte ich meine Website selbst gestalten und bin damit direkt mit meinem Pinterest-Angebot online gegangen. Tatsächlich habe ich meine erste Pinterest-Kundin gewonnen, weil ich bereits eine Website hatte und mein Auftritt damit professioneller wirkte als bei anderen Pinterest VAs.
Besonders begeistert hat mich, dass wirklich alles Schritt für Schritt erklärt wurde – perfekt für Anfängerinnen. Als Mama mit wenig Zeit war das genau das Richtige. Ich konnte direkt loslegen, habe in kurzer Zeit meine eigene Website erstellt und einen großen Schritt in Richtung Sichtbarkeit getan.Anni Hochdorfer, Pinterest-Expertin


„Ich hatte wirklich keine Ahnung, wie ich eine Website gestalte, bzw. wie so etwas überhaupt aufgebaut ist. Man sieht ja immer nur die tollen, fertigen Webseiten, aber der Weg dorthin war mir völlig unklar. Ich hatte zwar schon auf YouTube immer wieder nach Videos geschaut, aber geholfen hat es mir nicht. Es gab auch einfach zu viel Auswahl. Was ich brauchte, war wirklich eine Step by Step Anleitung von Anfang an.
Der Kurs hat mir eine großartige Basis an Verständnis über den Aufbau und die Funktionen einer Website vermittelt. Ich bin dadurch in der Lage, immer wieder an meiner Website herumzubasteln und diese umzugestalten. Und es macht mir tatsächlich Spaß! Da ich mittlerweile auf Malta lebe und sich mein Angebot verändert hat, konnte ich Dank des Kurses meine Website komplett überarbeiten und neu aufbauen. Die Investition hat sich für mich wirklich gelohnt und ich würde den Kurs zu 100 % weiterempfehlen.
Für mich war es einfach das Gesamtpaket, das mich sehr begeistert hat. Ich habe wirklich alles Wissenswerte für den Start vermittelt bekommen und konnte mich Stück für Stück durch die Lektionen arbeiten. Einfach gut didaktisch aufbereitet! Danke 😊“ Yvonne Büserhttps://yvonnesayurvedakitchen.com/


„Ich habe zuerst versucht meine Website mit einem Baukastensystem meines Webhosters zu erstellen, war aber nicht mit den Möglichkeiten der Konfiguration zufrieden. Dann habe ich überlegt, meine Website mit WordPress umzusetzen, wusste aber 
nicht wie ich am besten starten sollte. Da kam Weekend Website gerade richtig. Durch „Weekend Website“ konnte ich in kürzester Zeit die Grundstruktur meiner Website erstellen und war begeistert endlich alles so individuell einstellen zu können, wie ich es mir von Anfang an gewünscht hatte. Mir hat der ganze Kurs sehr gut gefallen, da er Schritt für Schritt aufgebaut ist und es wirklich leicht ist, sehr schnell die eigene Website zu erstellen. Alles wichtige für den Start wird erklärt und WordPress mit Divi bietet die Flexibilität sich eine Website ganz nach den eigenen Vorstellungen und Wünschen zu gestalten.“ Iris Klawatsch, Expertin für gehirngerechtes Arbeiten


„Vor dem Kurs hatte ich keine Ahnung, wie man eine Website erstellt und großen Respekt vor dem Projekt. Immer die Angst im Nacken, schaffe ich das wirklich? Verstehe ich die technische Umsetzung? Andererseits war der Wunsch nach einer eigenen Website da und zu wenig Geld auf dem Konto, so dass ich die Aufgabe nicht auslagern konnte.
Durch die Schritt für Schritt Erklärungen und die sehr gut verständlichen Videos, habe ich alles in meinem Tempo umsetzen können. Durch die Videos kann man sich einzelne Punkte einfach immer wieder anschauen und dann gleich direkt umsetzen. 
Ich getraue mir, neue Ideen jetzt selbst auszuprobieren und z.B. Unterseiten zu erstellen, die nur Kunden mit einem entsprechenden Passwort öffnen können. So kann ich Inhalte direkt über meine Seite zur Verfügung stellen.
Mich hat begeistert, dass ich am Ende meine Website wirklich selbst erstellt habe und diese online ist.
Auch im Nachgang kann man sich immer wieder gezielt bestimmte Inhalte anschauen und Änderungen selbst vornehmen.“ Sandy UrbanekStruktur Klarheit

Weitere Erfahrungen:


„Meine größte Herausforderung vor dem Kurs war, dass ich gar nicht wusste, wo ich anfangen soll und wie ich mit der Technik zurecht kommen soll bzw. wie ich alles einstellen und programmieren muss. Durch „Weekend Website“ konnte ich Schritt für Schritt meine Website selbst erstellen. Du hast alles sehr verständlich und nachvollziehbar erklärt, ich konnte dir sehr gut folgen und meine Website nahm immer mehr Gestalt an. Auch deine Stimme war total angenehm und es hat sogar Spaß gemacht, den Kurs durchzuarbeiten 🙂 Mich hat das Endergebnis begeistert und dass ich im Prinzip alles alleine hinbekommen habe (natürlich mit deiner Unterstützung, aber im Endeffekt selbstständig). Der Schritt von „absolut kein Plan von der Erstellung einer Website“ hin zu meiner fertigen Website war rückblickend ein richtig tolles Gefühl.“ Alina Tappert, Psychologin


Ich hatte zuvor versucht, meine Website mit Elementor zu bauen, aber das war für mich total umständlich und frustrierend. Dann bin ich auf deinen „Weekend Website“-Kurs gestoßen – und das hat für mich wirklich alles verändert. Dank deiner klaren Struktur, der verständlichen Schritt-für-Schritt-Anleitung und dem Einsatz von Divi konnte ich endlich loslegen und meine Website in kurzer Zeit aufbauen. Der Kurs hat mir genau das gegeben, was ich gebraucht habe: eine pragmatische Anleitung ohne unnötigen Schnickschnack. Inzwischen baue ich sogar zwischendurch mal eben Landing Pages – zwischen Aufwachen und Frühstück, ganz ohne Stress.“ Dajana Plautz


„Stefanies Kurs war für mich als Technik-Laie, die sich lange vor dem Projekt „Webseite“ gedrückt hat ein absoluter Glücksgriff. Der Kurs ist wirklich Step by Step und vor allem auch sehr gut verständlich aufgebaut. Selbst kleine Besonderheiten wie ein Farbverlauf wurden sehr gut erklärt. Besonders gefiel mir auch,- ich Vergleich zu anderen Kursen, dass ich sehr gut mitgekommen bin und das, was gezeigt wurde auch direkt nachvollziehen konnte. Nun habe ich eine kleine Seite, die erstmal nur als Virtuelle Visitenkarte gilt inkl. Newsletter Einbindung, bei der ich mich dank dem Weekend -Kurs auch sicher fühle, sie nach und nach, zu erweitern.“ – Sabine Weippert, Autorin

„Ich hatte zwar vor Jahren mal mit TYPO3 gearbeitet, aber das lag lange zurück – ich war unsicher, ob ich es wirklich schaffe, meine Website selbst aufzubauen, ohne komplett den Überblick zu verlieren. Der Kurs hat mir das nötige Know-how und vor allem das Selbstvertrauen gegeben, Schritt für Schritt vorzugehen – plötzlich war das Ganze nicht mehr überwältigend, sondern machbar. Mich hat begeistert, wie klar und strukturiert alles aufgebaut war – und dass ich am Ende wirklich meine Website in den Händen hielt, die genau zu mir passt. “ Claire Fahnenstich

Bist du bereit, auch deine Erfolgsstory zu schreiben und endlich mit deinem Angebot sichtbar zu werden? Dann leg gleich los und sichere dir „Weekend Website„.

Weekend Website - Erstelle deine Website an einem Wochenende
Über-mich-Seite schreiben: Der ausführliche Guide für Coaches, Berater*innen und Dienstleister*innen

Über-mich-Seite schreiben: Der ausführliche Guide für Coaches, Berater*innen und Dienstleister*innen

Du sitzt vor dem leeren Bildschirm und sollst deine Über-mich-Seite schreiben – und plötzlich weißt du nicht mehr, wer du eigentlich bist und was du da überhaupt tun sollst! 😅 Die gute Nachricht: Du bist damit nicht allein. Die schlechte: Ohne eine richtig gute Über-mich-Seite verschenkst du jeden Tag wertvolle Chancen, neue Kund*innen zu gewinnen (sie ist übrigens fast immer die meistgelesene Unterseite auf deiner Website – no pressure).

In diesem Artikel erfährst du, wie du endlich deine Über-mich-Seite schreiben kannst, die nicht nur dich authentisch präsentiert, sondern auch tatsächlich neue Aufträge generiert.

Nach dem Lesen wirst du wissen, was wirklich auf deine Über-mich-Seite gehört – und was du getrost weglassen kannst!

Warum deine Über-mich-Seite kein Lebenslauf sein sollte

Stell dir vor, jemand fragt dich auf einer Party: „Und, was machst du so?“ – würdest du mit deinem Schulabschluss anfangen und dann chronologisch durch dein Leben wandern? Wohl kaum! Und doch ist genau das der häufigste Fehler auf Über-mich-Seiten: Sie beginnen bei Adam und Eva und enden irgendwann bei der aktuellen Tätigkeit – wenn die Leser*innen bis dahin nicht schon abgesprungen sind.

Viele tun sich so schwer mit dieser Seite, weil sie nicht wissen, was sie eigentlich damit erreichen wollen (und weil sie Angst haben, sich öffentlich zu zeigen, wie in diesem Blogartikel beschrieben). Deine Über-mich-Seite ist kein notwendiges Übel oder ein verstaubter Ladenhüter auf deiner Website – sie ist dein Türöffner, dein Handschlag, dein erster richtiger Kontakt mit potenziellen Kund*innen!

Ihre wahre Aufgabe? Vertrauen aufzubauen, eine Verbindung zu schaffen und – ganz wichtig – zu zeigen, warum ausgerechnet DU die richtige Person für das Problem deiner Besucher*innen bist (oder eben auch nicht, falls die Besucher*in so gar nicht zu dir passt!). Sie ist kein Selbstzweck, sondern dein heimlicher Verkaufsstar – das macht sie so viel einfacher zu schreiben, als du vielleicht denkst.

Was Besucher*innen wirklich auf deiner Über-mich-Seite wissen wollen

Wenn jemand auf deiner Website auf „Über mich“ klickt, dann nicht, weil diese Person deine komplette Biografie lesen möchte – naja, meistens jedenfalls nicht.

Nein, in Wahrheit geht es um drei essentielle Fragen:

  1. Verstehst du mein Problem? (Empathie)
  2. Kannst du mir helfen? (Expertise)
  3. Kann ich dir vertrauen? (Authentizität)

Das Über-mich-Seite schreiben ist also eigentlich ein versteckter Dialog. Du zeigst: „Ich weiß genau, wo du stehst“ – und schaffst damit sofort eine Verbindung. Du demonstrierst deine Fähigkeiten und Erfahrungen – aber immer bezogen auf den Nutzen für deine Kund*innen, sonst schweifst du zu sehr ab und verlierst deine Leser*innen. Und du lässt ein Stück deiner Persönlichkeit durchscheinen, damit die Menschen hinter dem Bildschirm dich als echten Menschen wahrnehmen.

Besonders als Coach, Berater*in oder Dienstleister*in bist DU ja die Person, die die Aufträge ausführt – und brauchst eine gute Über-mich-Seite, die genau diese Brücke baut. Denn bei persönlichen Dienstleistungen kaufen die Menschen nicht nur dein Angebot – sie kaufen DICH.

Die größte Falle: Zu viel Ich, zu wenig Du

Hand aufs Herz: Wie oft kommt das Wort „Ich“ auf deiner aktuellen Über-mich-Seite vor? Vermutlich ziemlich häufig, oder? Das ist auch ganz natürlich – schließlich geht es ja um dich! Aber hier liegt der größte Irrtum beim Über-mich-Text schreiben: Es geht eigentlich gar nicht um dich – es geht um deine Leser*innen und was du für sie tun kannst (mehr dazu findest du auch in meinem Workbook „Website-Texte leicht gemacht“).

Ein typischer Fehler ist der chronologische Lebenslauf ohne erkennbare Relevanz für die Zielgruppe:

„Ich habe BWL studiert, dann drei Jahre in einer Agentur gearbeitet, bevor ich 2018 meine Ausbildung zum Coach abgeschlossen habe. Seit 2019 bin ich selbständig und biete Coachings an.“

Das Problem bei dieser eher langweiligen Aufzählung: Dieser Text beantwortet keine der drei wichtigen Fragen, die wir oben besprochen haben. Er zeigt weder Empathie noch klaren Nutzen.

Der Idealfall ist eine Über-mich-Seite, die deine Persönlichkeit mit deinem Nutzenversprechen verbindet:

„Als jemand, der selbst jahrelang im Hamsterrad der Selbstzweifel steckte, weiß ich genau, wie es sich anfühlt, wenn du das Gefühl hast, unter deinen Möglichkeiten zu bleiben. Heute helfe ich ambitionierten Frauen dabei, ihre Selbstsabotage zu überwinden und endlich das Business aufzubauen, das sie verdienen.“

Siehst du den Unterschied? Der zweite Text macht sofort klar: Ich verstehe dich, ich kann dir helfen, und hier ist meine Geschichte, die zeigt, warum du mir vertrauen kannst.

So gelingt dir ein starker Einstieg

Klar kannst du auch starten mit „Hallo, ich bin XY und ich bin Coach/Beraterin/Dienstleisterin für Z“ (das schreibe ich bei mir auch so ähnlich) – aber es geht auch packender, individueller, raffinierter! Was du brauchst, ist ein sogenannter „Hook“ – ein Haken, oder auch Aufhänger, der sofort packt und Interesse weckt.

Hier sind drei unterschiedliche Beispiele, von denen du dich mal inspirieren lassen kannst – komplett individuell und du bekommst direkt einen Eindruck davon, welche Persönlichkeit sich hinter diesem jeweiligen Einstieg verbirgt, oder?

Wie du zum Beispiel auch einsteigen könntest:

Mit dem, was du tust (elegant verpackt mit deiner Expertise): In den letzten 7 Jahren habe ich über 500 Kund*innen dabei begleitet, ihre größte Angst zu überwinden – die Angst, sichtbar zu werden. Was ich dabei gelernt habe: Es ist nie zu spät, deine wahre Stimme zu finden.“

Oder mit einem Problem, was vielen nicht bewusst ist, deine Zielgruppe aber betrifft: „Die meisten Unternehmen scheitern nicht an ihren Produkten, sondern an der Art, wie sie darüber sprechen. Meine Mission ist es, komplexe Ideen in Botschaften zu verwandeln, die nicht nur verstanden, sondern auch gefühlt werden.“

Oder mit etwas, was dich in deinem Feld besonders macht und deine Superkraft hervorhebt: „Ich glaube an die Kraft des Unerwarteten. Während andere nach Trends suchen, designe ich das, was noch nicht existiert – aber genau das, was deine Kund*innen nicht mehr missen möchten, sobald sie es gesehen haben.“

Ein solcher Einstieg für deine Über-mich-Seite weckt sofort Neugier und schafft den perfekten Übergang zu deiner Geschichte und deinem Angebot.

Der perfekte Aufbau für deine Über-mich-Seite

Mit dem folgenden Aufbau für deine Über-mich-Seite kannst du sicher sein, dass du alle wichtigen Elemente abdeckst:

Der Hook – dein unwiderstehlicher Einstieg

Wie im Abschnitt hiervor erwähnt: Beginne mit einer starken Aussage, einer überraschenden Erkenntnis oder einer Geschichte, die sofort zum Weiterlesen animiert. Zeige gleich zu Beginn, dass du die Herausforderungen deiner Zielgruppe verstehst.

Dein Warum – was dich antreibt

Hier kommt deine persönliche Geschichte ins Spiel – aber nicht als chronologischer Lebenslauf, sondern als Erklärung, warum du tust, was du tust. Was hat dich zu deiner Arbeit gebracht? Welches Problem wolltest du lösen? Diese Story schafft Authentizität und emotionale Verbindung. Du kannst hier auch prima deine Werte unterbringen – so wird gleich beim Lesen geprüft, ob sie übereinstimmen (wenn ja gibt das dicke Vertrauens-Bonuspunkte!).

Der Nutzen – was deine Kund*innen davon haben

Jetzt wird es konkret: Welche Transformation (ich hasse dieses Wort, aber das bringt auf den Punkt, was deine Arbeit tun sollte) bietest du an? Wie verändert sich das Leben oder Business deiner Kund*innen durch die Zusammenarbeit mit dir? Hier darfst du auch Ergebnisse und Erfolge teilen – aber immer mit dem Fokus darauf, was das für zukünftige Kund*innen bedeutet.

Die persönliche Note – Mensch statt Marke

Ein kleiner Einblick in dein Leben abseits des Business macht dich nahbar und sympathisch. Das können Hobbys sein, eine Leidenschaft oder auch ein überraschendes Detail. Ich bin ja ein großer Fan von Fun Facts, die du auf meiner Über-mich-Seite auch finden wirst.

Gar nicht so einfach, ich weiß! Aber genau diese persönlichen Elemente bleiben oft am stärksten in Erinnerung und helfen oft dabei, dich noch menschlicher und echter wahrzunehmen.

Der Call to Action – der nächste Schritt

Was sollen deine Besucher*innen als Nächstes tun? Biete ihnen einen klaren Weg, wie sie mit dir in Kontakt treten oder mehr über deine Angebote erfahren können.

Dieser Über-mich-Seite Aufbau ist natürlich flexibel – du kannst die Länge der einzelnen Abschnitte an deine individuelle Geschichte und dein Angebot anpassen. Wichtig ist nur, dass alle Elemente einen klaren Bezug zu deiner Zielgruppe haben und dass die ganze Seite im Idealfall einen roten Faden hat und nicht total im Chaos ausartet.

Dos and Don’ts – Das gehört rein (und das bitte nicht!)

Was macht eine Über-mich-Seite wirklich stark, und was solltest du unbedingt vermeiden?

Dos – Das gehört auf deine Über-mich-Seite:

  • Deine Expertise klar benennen – Was ist dein Spezialgebiet? Worin bist du besonders gut?
  • Die Verbindung zu deiner Zielgruppe herstellen – Wie bist du selbst mit dem Problem in Berührung gekommen, das du jetzt löst?
  • Konkrete Ergebnisse nennen – Nicht „Ich helfe Menschen“, sondern „Ich helfe dir, deinen Umsatz innerhalb von 3 Monaten zu verdoppeln“
  • Deinen einzigartigen Ansatz erklären – Was macht deine Arbeitsweise besonders?
  • Ein professionelles, authentisches Foto – Menschen kaufen von Menschen!
  • Persönliche Werte einbringen – Wofür stehst du? Was treibt dich an?
  • Qualifikationen, die relevant sind – Ausbildungen und Erfahrungen, die direkt mit deinem Angebot zusammenhängen

Don’ts – Das hat auf deiner Über-mich-Seite nichts zu suchen:

  • Lückenloser Lebenslauf – Deine Schulzeit ist nur in den seltensten Fällen relevant
  • Generische Floskeln – „Ich bin kreativ, zuverlässig und kommunikativ“ (das behaupten alle)
  • Zu viele irrelevante Qualifikationen – Nicht jedes Wochenend-Seminar muss erwähnt werden
  • Übertriebene Selbstdarstellung – „Ich bin die beste/einzige/revolutionärste…“
  • Zu viel Fachsprache – Nicht jeder versteht deine Branchenabkürzungen
  • Unspezifische Versprechen – „Ich helfe dir, dein volles Potenzial zu entfalten“
  • Fehlender Call-to-Action – Deine Leser*innen sollten mindestens am Ende wissen, was sie als Nächstes tun sollen

Diese Liste ist natürlich nicht vollständig, aber sie gibt dir eine gute Orientierung, um deine Über-mich-Seite zu überprüfen oder neu zu schreiben. Das Wichtigste: Jedes Element sollte einen klaren Zweck erfüllen und zur Gesamtwirkung deiner Seite beitragen.

Bonus-Tipp: So machst du deine Über-mich-Seite SEO-fit

Eine gute Über-mich-Seite spricht nicht nur deine Besucher*innen an, sondern auch die Suchmaschinen. Hier sind die wichtigsten Punkte, die du beachten solltest:

  • Meta-Titel: Nutze hier dein Hauptkeyword, z.B. „Über mich: [Dein Name] – [Deine Kernleistung]“ (du kannst den Meta-Titel mit kostenlosen WordPress Plugins wie z.B. RankMath einstellen)
  • URL: Halte sie kurz und prägnant, z.B. deineadresse.de/ueber-mich
  • H1-Überschrift: Integriere dein Keyword, aber bleib natürlich, z.B. „Über mich: Wie ich dir helfe, [Ergebnis zu erreichen]“
  • Zwischenüberschriften: Nutze H2- und H3-Überschriften mit relevanten Keywords
  • Interne Verlinkungen: Verlinke zu deinen Angeboten, deiner Kontaktseite und anderen relevanten Seiten
  • Alt-Texte für Bilder: Beschreibe dein Foto mit Keywords, z.B. „Coach für XY [Dein Name]“

Mehr zur Suchmaschinenoptimierung (und wie du wo was genau einstellst) erkläre ich in meinem Kurs „SEO leicht gemacht„.

So hilft dir mein Workbook dabei, deine Über-mich-Seite endlich konkret zu schreiben

Das hat dir sicherlich schon Einiges zum Nachdenken gegeben, oder? Aber ich weiß, manchmal ist der Weg von der Theorie zur Praxis gar nicht so einfach. Deshalb habe ich das Workbook „Website-Texte leicht gemacht“ entwickelt, der dir beim Aufbau und Schreiben im Detail weiterhilft.

Das Workbook ist speziell für Coaches, Berater*innen und Dienstleister*innen, die:

  • endlich ihre wichtigsten Unterseiten (Startseite, Über-mich-Seite, Angebotsseite, Kontaktseite) fertigstellen wollen
  • nicht mehr stundenlang vor dem leeren Bildschirm sitzen möchten
  • ihre Persönlichkeit authentisch zum Ausdruck bringen wollen, ohne sich auf die Brust zu trommeln
  • mit ihrer Website mehr Kund*innen gewinnen möchten

Auf 50 Seiten bekommst du alles an die Hand, was du brauchst, um nicht nur deine Über-mich-Seite, sondern auch alle weiteren Website-Texte endlich mit viel mehr Leichtigkeit, Freude und ohne Schreibblockaden angehen zu können.

Fazit: Deine Über-mich-Seite ist keine Pflicht, sondern deine Chance

Deine Über-mich-Seite ist so viel mehr als nur ein notwendiger Teil deiner Website – sie ist deine Bühne, dein Vertrauensbeweis und oft der entscheidende Faktor, ob jemand mit dir zusammenarbeiten möchte oder nicht.

Die gute Nachricht: Mit den richtigen Bausteinen und einem klaren Fokus auf das, was deine Zielgruppe wirklich über dich wissen will, wird das Über-mich-Seite schreiben plötzlich viel einfacher. Du musst nicht dein ganzes Leben offenlegen oder eine perfekte Geschichte erzählen – du musst nur authentisch sein und zeigen, wie du deinen Kund*innen helfen kannst.

Also, los geht’s! Es ist Zeit, dass deine Über-mich-Seite endlich die Arbeit macht, für die sie gedacht ist: Vertrauen aufbauen und Kund*innen gewinnen!

Zum Workbook: Website Texte leicht gemacht

Verlink auch super gern deine Über-mich-Seite hier in den Kommentaren!

Microsoft Clarity – geniales, kostenloses Website Analysetool

Microsoft Clarity – geniales, kostenloses Website Analysetool

Was ist Microsoft Clarity?

Microsoft Clarity ist ein kostenloses Analysetool, mit dem du das Verhalten deiner Website-Besucher*innen besser verstehen kannst. Es bietet Heatmaps, Session Recordings (also Aufzeichnungen der Sitzung von Besucher*innen) und detaillierte Analysen, um Schwachstellen auf deiner Website zu identifizieren und die Nutzererfahrung zu verbessern.

Microsoft Clarity wurde entwickelt, um eine Alternative zu kostenpflichtigen Analyse-Tools zu bieten. Es kombiniert leistungsstarke Funktionen mit einer intuitiven Benutzeroberfläche, sodass auch Anfänger ohne technisches Vorwissen sofort loslegen können. Während Google Analytics vor allem auf Daten, Zahlen und Statistiken fokussiert ist, ermöglicht Clarity eine visuelle Analyse des Nutzerverhaltens.

Warum solltest du Microsoft Clarity nutzen?

Kostenlos & unbegrenzt

Im Gegensatz zu vielen anderen Tools gibt es keine Einschränkungen bei der Menge der Datenerfassung. Selbst für stark besuchte Websites mit viel Traffic fallen keine Kosten an.

Einfache Integration

Microsoft Clarity lässt sich mit wenigen Klicks in WordPress, Shopify und andere Plattformen einbinden. Auch mit Google Analytics kann es verknüpft werden, um eine noch tiefere Analyse zu ermöglichen.

Heatmaps & Session Recordings

  • Heatmaps: Zeigen, wo Nutzer*innen klicken, scrollen und interagieren.
  • Session Recordings: Zeichnen echte Besuche auf, sodass du das Verhalten jedes einzelnen Besuchers nachvollziehen kannst.

DSGVO-konform & datenschutzfreundlich

MS Clarity anonymisiert Nutzerdaten automatisch und speichert keine sensiblen Informationen. Trotzdem musst du den MS Clarity Cookie in dein Cookie-Banner einfügen und das Tool in die Datenschutzerklärung mit aufnehmen.

Die wichtigsten Funktionen von Microsoft Clarity

Heatmaps: Nutzerverhalten visuell analysieren

Heatmaps helfen dir zu verstehen, wie Besucher mit deiner Website interagieren. Es gibt zwei Hauptarten:

  • Click-Heatmaps: Zeigen, wo Nutzer*innen am häufigsten klicken, sodass du optimieren kannst, ob wichtige Elemente richtig platziert sind.
  • Scroll-Heatmaps: Analysieren, wie weit Nutzer*innen nach unten scrollen. Das ist besonders wichtig für lange Landingpages und Blogartikel.
Microsoft Clarity Heatmap

Session Recordings: Besucher in Echtzeit beobachten

Mit den Sitzungsaufzeichnungen – meiner Lieblingsfunktion – kannst du genau sehen, wie Besucher*innen sich auf deiner Website verhalten. Es wird also konkret eine Aufzeichnung gemacht, wohin sie scrollen, was sie anklicken, wie lange sie wo bleiben – total spooky, aber auch super cool!

Damit kannst du nicht nur sehen, welche Inhalte beliebt und nützlich sind, sondern auch nachvollziehen, welche Probleme Nutzer*innen auf deiner Website haben:

  • Werden wichtige Buttons übersehen?
  • Gibt es technische Fehler, die zum Absprung führen?
  • Wo brechen Nutzer*innen am häufigsten ab?
Microsoft Clarity Aufzeichnungen

Links unten bei den Sitzungen gibt es übrigens immer die Möglichkeit, Sitzungserkenntnisse per KI generieren zu lassen (siehe Screenshot), die oft sehr hilfreich sind.

Praxis-Tipp:

Betrachte mindestens 10–15 Aufzeichnungen pro Tag, um Muster zu erkennen. Falls viele Nutzer*innen an derselben Stelle abbrechen, solltest du diese Stelle gezielt optimieren und dann erneut prüfen, ob sich das Verhalten verändert hat.

3. Insights & Filter

MS Clarity bietet verschiedene Filteroptionen, um spezifische Nutzergruppen gezielt zu analysieren. Mögliche Filter sind:

  • Gerät (Desktop, Mobile, Tablet)
  • Betriebssystem & Browser
  • Sitzungsdauer & Interaktionsgrad
  • Fehlermeldungen und JavaScript-Probleme

Besonders spannend: MS Clarity erkennt automatisch sogenannte „Wut-Klicks“ – also Situationen, in denen Nutzer wiederholt auf dasselbe Element klicken, weil sie eine Funktion erwarten, die nicht vorhanden ist (Wobei ich sowas auch oft einfach mal so mache, z.B. damit der Bildschirm sich ohne Ladegerät nicht dunkel schaltet, oder einfach aus Gewohnheit vor dem Weiterscrollen – ich bin nicht wütend!).

Microsoft Clarity in WordPress integrieren

Schritt 1: Microsoft Clarity Konto erstellen

Besuche clarity.microsoft.com und melde dich mit deinem Microsoft-Konto an (oder erstelle eins, wenn du noch keins hast).

Schritt 2: Tracking-Code DSGVO-konform hinzufügen

  • Füge den Tracking-Code in dein Cookie-Banner (z.B. Borlabs) ein, um den Besucher*innen die Möglichkeit zu geben, ein Tracking anzunehmen oder abzulehnen
  • Aktualisiere deine Datenschutzerklärung (z.B. mit e-recht24.de), um einen Abschnitt zu Microsoft Clarity mit aufzunehmen

Schritt 3: Erste Analysen durchführen

Sobald MS Clarity aktiv ist, kannst du – je nachdem, wie viele Besucher*innen du auf deiner Website hast – nach wenigen Stunden oder Tagen die ersten Heatmaps und Session Recordings auswerten.

Microsoft Clarity vs. Google Analytics: Was ist besser?

FeatureMicrosoft ClarityGoogle Analytics
HeatmapsJaNein
Session RecordingsJaNein
Echtzeit-TrackingNeinJa
Conversion-TrackingNeinJa
DatenvisualisierungHochNiedrig

Wann solltest du welches Tool nutzen?

  • Nutze Microsoft Clarity, wenn du insbesondere das Nutzerverhalten auf deiner Website verstehen möchtest.
  • Nutze Google Analytics, wenn du detaillierte Traffic-Daten und Conversion-Tracking brauchst.

Fazit: Warum Microsoft Clarity ein Must-Have für deine Website ist

Microsoft Clarity ist eine wertvolle Ergänzung zu klassischen Analyse-Tools. Es hilft dir, das Verhalten deiner Website-Besucher*innen besser zu verstehen, Schwachstellen zu identifizieren und die Nutzererfahrung zu optimieren – und das vollkommen kostenlos.

Microsoft Clarity hilft dir dabei,

  • Heatmaps & Session Recordings zu analysieren
  • Fehler auf deiner Website zu entdecken
  • Die Conversion-Rate zu steigern
  • Deine Inhalte gezielt zu optimieren

Übrigens: Im Kurs „SEO leicht gemacht“ zeige ich dir nicht nur, wie du Microsoft Clarity nutzen kannst, sondern auch generell, mit welchen Schritten du deine Website bei Google ganz nach vorne bringst!

Suchmaschinen Online Kurs

Solltest du Hilfe bei der Einrichtung benötigen, kontaktiere mich gern für ein VIP Umsetzungspaket.