Barrierefreie Landingpages für deine Besucher.
SmartChat baut deine Landingpage so, dass mehr Menschen sie lesen, bedienen und sich für deinen WhatsApp-Newsletter anmelden können.
Der Kontrast wird gemessen.
Änderst du Farben deiner Landingpage, misst SmartChat den Kontrast nach WCAG. Liegt er unter 4,5:1, verhindert SmartChat die Farbe, damit die Schrift gut lesbar bleibt.
Geprüfte Farbpaare
Beim ersten Bau nimmt SmartChat AI nur Farbpaare, die von Hand auf ausreichenden Kontrast geprüft sind.
Zu schwacher Kontrast wird verhindert
SmartChat verhindert zu schwachen Kontrast. Der Wert von 4,5 zu 1 ist Pflicht.
Feste Teile bleiben
Impressum, Datenschutz und das Anmelde-Formular lassen sich nicht wegblenden.
Barrierefreiheit steckt im Code deiner Landingpage.
Diese Teile setzt SmartChat automatisch, du musst nichts programmieren.
.bk-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }Sichtbarer Fokus
Wer mit der Tabulatortaste über deine Seite geht, sieht auf Buttons, Fragen und Links einen deutlichen Rahmen. Auf dunklen Flächen ist er weiß.
<html lang="de">Sprache der Seite
Vorleseprogramme und die Übersetzung im Browser lesen deine Landingpage in der richtigen Sprache.
<img alt="Backhaus Sommer: Hauptbild des Betriebs">Bildbeschreibungen
Jedes Bild hat eine Beschreibung in der Sprache deiner Seite, die seine Rolle nennt.
<div role="dialog" aria-modal="true"> <button aria-label="Schließen"> <select aria-label="Ländervorwahl">Beschriftetes Anmelde-Fenster
Das Anmelde-Fenster ist als Dialog ausgezeichnet. Schließen-Button und Ländervorwahl tragen eine Beschreibung.
@media (prefers-reduced-motion: reduce) { .bk-hero-video video { display: none } }Weniger Bewegung
Hat ein Besucher weniger Bewegung eingestellt, zeigt deine Seite statt des Hintergrundvideos ein Standbild.
Ein beschriftetes Anmelde-Fenster.
Vorleseprogramme erkennen das Anmelde-Fenster als Dialog mit Überschrift. Auch das Feld für die Ländervorwahl und der Schließen-Button sind beschriftet.
Dialog mit Überschrift
Das Fenster sagt Vorleseprogrammen, worum es geht.
Ländervorwahl beschriftet
Die Auswahl der Vorwahl wird als Ländervorwahl vorgelesen.
Ohne Animation auf Wunsch
Bei weniger Bewegung erscheint das Fenster ohne Animation.
Was SmartChat übernimmt und was du selbst prüfst.
SmartChat legt die Grundlagen. Einen vollständigen Test deiner Seite ersetzt das nicht.
Das prüfst du selbst
- Eigene Farben: Prüfe selbst, ob deine Seite für deine Besucher gut lesbar ist.
- Eigene Bilder: Schreib wichtige Infos als Text auf die Seite, damit Vorleseprogramme sie lesen.
- Recht: Ob für dein Unternehmen besondere Regeln gelten, klärst du mit deiner Rechtsberatung.
Das übernimmt SmartChat
- Kontrast nach WCAG messen und zu schwachen Kontrast verhindern.
- Sichtbarer Rahmen für die Bedienung mit der Tastatur.
- Sprache der Seite, Bildbeschreibungen und weniger Bewegung auf Wunsch.
Häufig gestellte Fragen zu Barrierefreiheit.
Ist meine SmartChat-Landingpage barrierefrei?
SmartChat baut viele Grundlagen automatisch ein: gemessenen Kontrast, sichtbaren Tastatur-Fokus, Seitensprache, Bildbeschreibungen, ein beschriftetes Anmelde-Fenster und weniger Bewegung auf Wunsch. Einen vollständigen Test deiner Seite ersetzt das nicht.
Ersetzt das eine rechtliche Prüfung?
Das kann SmartChat dir nicht zusagen. Ob für dein Unternehmen besondere Regeln gelten und was sie verlangen, klärst du mit deiner Rechtsberatung.
Wie prüft SmartChat den Kontrast?
SmartChat berechnet das Kontrastverhältnis zwischen Schrift und Hintergrund nach WCAG. Liegt es unter 4,5:1, verhindert SmartChat die Farbe, damit die Schrift gut lesbar bleibt.
Blockiert SmartChat Farben mit zu wenig Kontrast?
Ja. SmartChat verhindert zu schwachen Kontrast, der Wert von 4,5 zu 1 ist Pflicht. Beim ersten Bau nimmt SmartChat AI nur Farbpaare, die auf ausreichenden Kontrast geprüft sind.
Lässt sich meine Landingpage mit der Tastatur bedienen?
Buttons, ausklappbare Fragen und Links in der Fußzeile zeigen einen deutlichen Rahmen, sobald jemand mit der Tabulatortaste über die Seite geht. Auf dunklen Flächen ist der Rahmen weiß.
Was liest ein Vorleseprogramm bei meinen Bildern vor?
Jedes Bild hat eine Beschreibung in der Sprache deiner Seite, zum Beispiel „Backhaus Sommer: Hauptbild des Betriebs“. Sie nennt die Rolle des Bildes, nicht jedes Detail darauf.
Warum steht die Sprache im Code meiner Landingpage?
Damit Vorleseprogramme und die Übersetzung im Browser deine Seite in der richtigen Sprache lesen. SmartChat trägt die Sprache automatisch ein.
Was sehen Besucher, die weniger Bewegung eingestellt haben?
Statt des Hintergrundvideos ein Standbild. Bewegungen der Buttons und die Animation des Anmelde-Fensters entfallen.
Ist das Anmelde-Fenster für Vorleseprogramme verständlich?
Es ist als Dialog mit Überschrift ausgezeichnet, und der Schließen-Button und die Ländervorwahl sind beschriftet.
Geht es hier um die Barrierefreiheit der SmartChat-Webseite?
Nein, diese Seite zeigt die Landingpages, die SmartChat für dich baut. Unsere eigene Erklärung findest du unter Barrierefreiheit.
Baue deine Landingpage in 60 Sekunden.
Gib deine Webseite ein. SmartChat AI baut deine Landingpage mit gemessenem Kontrast, sichtbarem Fokus und Bildbeschreibungen.