Wie kann ich die Barrierefreiheit meiner SmartWebsite verbessern?
Am 28. Juni 2025 ist der European Accessibility Act (EAA) in Kraft getreten – ein wichtiger Schritt zur Förderung der digitalen Inklusion in ganz Europa. Dieses Gesetz hat weitreichende Auswirkungen auf viele Online-Dienste und -Produkte, einschließlich Websites. Wir möchten Sie dabei unterstützen, Ihre Online-Präsenz für alle Nutzer zugänglich zu machen – unabhängig von ihren Fähigkeiten.
Barrierefreiheit ist nicht nur eine gesetzliche Anforderung, sondern auch eine Chance, Ihre Reichweite zu vergrößern und ein breiteres Publikum anzusprechen. In diesem Artikel finden Sie unsere Empfehlungen, wie Sie Ihre SmartWebsite barrierefrei gestalten und von den Vorteilen einer inklusiven Online-Präsenz profitieren können.
SmartWebsite aufrufen
Melden Sie sich in Ihrem STRATO-Kundenlogin an.
Klicken Sie in der Paketübersicht auf »SmartWebsite starten«.
Es öffnet sich das Projekt Dashboard in einem neuen Browser-Tab. Klicken Sie hier bitte auf »Webseite« → »Editor«.
Der Editor wird ebenfalls in einem neuen Tab geöffnet.
Bildbeschreibungen (Alt-Text) ergänzen
Alt-Text ist eine Maßnahme, die dafür sorgt, dass Besucher, die auf einen Screenreader angewiesen sind, auf den Inhalt einer Website zugreifen und diesen adäquat interpretieren können.
Aus diesem Grund wird empfohlen, den Alt-Text zu allen relevanten Bildern hinzuzufügen. Als »relevant« werden im vorliegenden Kontext Bilder bezeichnet, die dazu beitragen, die Intention einer Seite zu erfassen.
Für Bilder, die für die Suchanfrage nicht relevant sind, ist es empfehlenswert, den Alt-Text entsprechend unausgefüllt zu lassen. In den meisten Fällen sind diese Bilder als Hintergrundbilder zu klassifizieren, die für das Verständnis des Inhalts einer Seite nicht zwingend erforderlich sind.
Erzeugen von Alt-Text für ein Bildelement
Klicken Sie in der Menüleiste des SmartWebsite-Editors auf »INHALTE«.
Bewegen Sie die Maus über den Detailbereich und klicken Sie auf ein Bildelement. Die Bild-Werkzeugleiste wird eingeblendet.
Klicken Sie in der Werkzeugleiste auf »Details«.
Beschreiben Sie im Feld »Alternativer Text« den Inhalt des Bildes. Da Ihre Besucher Ihre Bilder möglicherweise nicht (vollständig) sehen können, ist es wichtig, den Bildinhalt zu beschreiben.
Erzeugen von Alt-Text für eine Bildergalerie
- Klicken Sie in der Menüleiste des SmartWebsite-Editors auf »INHALTE«.
- Bewegen Sie die Maus über den Detailbereich und klicken Sie auf ein Galerie-Element. Die Galerieübersicht wird angezeigt.
- Klicken Sie auf das gewünschte Bild in der Vorschauansicht. Die dazugehörigen Details werden auf der rechten Seite eingeblendet.
- Klicken Sie in der Detailansicht im Feld »Alternativer Text«, um den Inhalt des Bildes zu beschreiben. Bedenken Sie dabei immer, dass Ihre Besucher die Bilder möglicherweise nicht vollständig sehen können. Beschreiben Sie daher, was auf dem Bild zu sehen ist.
Überschriftenstruktur Ihrer Website überprüfen
Die Überschriftenstruktur Ihrer Website hilft Webbrowsern und Screenreadern zu verstehen, wie der Inhalt Ihrer Website organisiert und dargestellt werden sollte. Sogenannte Überschriften-Typen führen zu einer solchen Struktur, wenn sie in einer klaren Reihenfolge festgelegt werden.
Die Überschriften sind hierarchisch von H1 (Überschrift 1) bis H6 (Überschrift 6) geordnet.
Empfehlungen für die Struktur von Überschriften
Bei der Aufbereitung von Website-Texten empfehlen wir, die folgenden Richtlinien zu beachten:
- Generell sollten die Überschriften beschreibend sein, das heißt, sie sollten den darunter liegenden Text bezeichnen.
- Wenn Sie eine Überschrift in mehrere Zeilen aufteilen möchten, verwenden Sie die Tastenkombination »Shift + Eingabetaste«. Vermeiden Sie eine zweite Zeile für die Überschrift.
- Jede einzelne Seite Ihrer Website sollte nur eine Überschrift vom Typ H1 haben. Im Normalfall ist dies die Hauptüberschrift der Seite und steht ganz oben.
- Die folgenden Überschriften-Typen (H2, H3, H4, …) sollten auf dieser Seite logisch, fortlaufend und strukturiert sein. Das heißt, die Überschriften eines oder mehrerer Abschnitte (z. B. Über uns, Unsere Services …) können dann mit einem H2-Typ versehen werden.
- Alle weiteren „Unter-Unter“-Überschriften in einem Abschnitt können dann mit einem H3-Typ versehen werden. Falls nötig, folgen Sie dieser Logik mit den Überschriften Typ H4, H5 und H6.
- Auf diese Weise können Besucher mit Sehbeeinträchtigungen in logischer Reihenfolge zwischen den Inhalten wechseln.
Überschriften-Typ anpassen
- Klicken Sie auf die Überschrift, deren Überschriften-Tag (H1, H2, H3, …) Sie ändern wollen.
- Wählen Sie in der aufkommenden Actionbar die Option „Überschrift-Typ (H1)“ aus.
- Im sich öffnenden Dropdown-Menü können Sie zwischen „Überschrift 1” (H1) und „Überschrift 6” (H6) wählen.
- Folgen Sie den oben aufgeführten Empfehlungen bei der Gestaltung Ihrer Überschriftenstruktur.
Kontraste von Texten und Hintergründen anpassen
Für Besucher mit beeinträchtigtem Sehvermögen kann es eine Herausforderung darstellen, den Unterschied zwischen Vordergrund und Hintergrund einer Website zu erkennen. Wir empfehlen daher, die Kontraste auf ihrer Website zu überprüfen und bei Bedarf anzupassen.
Um die Barrierefreiheit für Besucher mit unterschiedlichen Seh-Anforderungen zu erhöhen, empfehlen wir Folgendes:
- Es wird empfohlen, für den Text und den Hintergrund ein Kontrastverhältnis von 4,5 zu 1 für normalen Text und 3 zu 1 für großen Text einzustellen.
- Es wird ein Kontrastverhältnis von mindestens 3:1 für Grafiken und Komponenten der Benutzeroberfläche (wie beispielsweise Eingabefelder, Platzhalter et cetera) empfohlen.
Tipp:
Es gibt zahlreiche Websites und Browser-Erweiterungen, zum Beispiel Silktide oder WAVE.
Diese Erweiterungen helfen Ihnen dabei, Ihre Kontraste zu überprüfen. Eine einfache Internetsuche nach »Barrierefreiheit Kontraste Check Add-on« für Ihren Browser wird Ihnen dabei helfen, das Passende zu finden.
Anpassen von Farbkontrasten
- Klicken Sie in der Menüleiste des SmartWebsite-Editors auf »DESIGN«.
- Öffnen Sie nun die Option »Farbe«.
- Hier finden Sie die Option »Kontrast-Intensität«, bei der Sie zwischen »Niedrig«, »Mittel« und »Hoch« wählen können.
- Versuchen Sie zuerst die Option »Hoch«.
- Möglicherweise reicht diese Einstellung bereits aus, um Barrierefreiheit herzustellen. Andernfalls müssen Sie die Farben einzeln anpassen.
Anpassen von Farben in Farbpaletten
- Klicken Sie in der Menüleiste des SmartWebsite-Editors auf »DESIGN«.
- Öffnen Sie nun die Option »Farbe«.
- Klicken Sie auf den Reiter »Benutzerdefinierte«.
- Nun können Sie die Akzente der Farbpalette einzeln festlegen, um die Kontraste entsprechend zu erhöhen.
Erklärung zur Barrierefreiheit erstellen
Eine Barrierefreiheitserklärung ist eine Unterseite deiner Website. Sie beschreibt, welche Teile deiner Website barrierefrei sind, welche nicht und warum.
Eine Barrierefreiheitserklärung ist eine klare, transparente und hilfreiche Erklärung, die die Barrierefreiheit deiner Website dokumentiert.
Wichtig!
Eine Barrierefreiheitserklärung ist keine rechtliche Absicherung. Das heißt, nur weil Sie schriftlich festhalten, dass Sie beispielsweise keine Zeit haben, eine Überschriftenstruktur herzustellen, schützt Sie das nicht vor potenziellen rechtlichen Konsequenzen.
Wie erstelle ich eine Barrierefreiheitserklärung?
Eine Barrierefreiheitserklärung ist sehr individuell und muss zu Ihrer Website passen. Daher sollten Sie auf spezialisierte, seriöse und etablierte Anbieter zurückgreifen.
Diese finden Sie über eine einfache Suchmaschinen-Suche bei Google & Co. mit Stichwörtern wie »Barrierefreiheit Erklärung Konfigurator« oder »Accessibility Statement Generator in Deutsch/Französisch/Spanisch/Schwedisch/Italienisch …«.
Über eine solche Suche werden Sie beispielsweise in Deutschland auf Anbieter wie IT-Recht, eRecht24 oder TrustedShops treffen. Unter Umständen sind diese Generatoren sogar kostenlos.
Unser Tipp:
Der STRATO Website-Abmahnschutz enthält ebenfalls einen Generator, mit dem sich eine Barrierefreiheitserklärung erstellen lässt.
Dokumente barrierefrei gestalten
Wenn Sie Dokumente auf Ihrer Website zum Herunterladen anbieten, sollten Sie sicherstellen, dass diese barrierefrei gestaltet sind.
Info:
Da PDF- und Word-Dokumente keine Produkte von STRATO sind, müssen Sie diese nach den Vorgaben des jeweiligen Programm-Anbieters anpassen.
- Für PDF-Dokumente finden Sie Hilfe auf den Seiten von Adobe:
PDF erstellen und Barrierefreiheit prüfen (Acrobat Pro)- Für Word-Dokumente (.docx) finden Sie Hilfe auf den Seiten von Microsoft:
Gestalten barrierefreier Word-Dokumente für Personen mit Behinderungen - Microsoft-Support
Die Beschriftung von Textlinks, Buttons und externen Einbindungen überprüfen
Für Besucher mit beeinträchtigtem Sehvermögen ist es wichtig, dass die von ihnen genutzte Screenreader-Software den Kontext von Verlinkungen in Form von Textlinks oder Buttons vermittelt. Daher sollte der Zweck einer Verlinkung klar erkennbar sein. Link-Texte oder Buttons wie »Mehr erfahren« oder »Weiter« sind für Nutzer mit assistierenden Technologien nicht hilfreich.
Empfehlungen für barrierefreie Textlinks und Button-Beschriftungen
- Textlinks und Button-Beschriftungen sollten möglichst beschreiben, was passiert, wenn man darauf klickt, zum Beispiel »Laden Sie über diesen Link unsere Speisekarte herunter« oder »Link zu unserem Online-Shop«.
- Vermeiden Sie gleiche bzw. doppelte Beschriftungen von Textlinks und Buttons.
- Ausnahmen von diesen Regeln sind natürlich zulässig, aber bedenken Sie immer, dass Beschreibungen von Buttons und Textlinks allen Menschen einen Mehrwert bringen.
Empfehlungen für barrierefreie Beschreibungen externer Einbindungen
- Screenreader haben es bei externen Einbindungen wie Google Maps, YouTube oder Code-Snippets oft schwer, zu verstehen, worum es sich bei der Einbindung handelt. Daher ist es wichtig, ihnen einen beschreibenden Titel zu geben.
- Hierzu finden Sie bei den Elementen für Google Maps, YouTube und Code unter »Details« die Möglichkeit, einen Titel einzugeben.
- Der Titel sollte immer so formuliert werden, dass daraus hervorgeht, worum es sich bei der externen Einbindung handelt, z. B.: »Hier finden Sie ein YouTube-Video, das unsere Produkte vorstellt« oder »Auf folgender Google-Maps-Karte ist zu sehen, unter welcher Adresse wir zu finden sind« usw.
Optimierung von Texten und Schriften
Für die Erstellung barrierefreier Inhalte ist die Verbesserung des Textabstands entscheidend. Dadurch wird die Lesbarkeit und das Verständnis insbesondere für Personen mit Legasthenie oder Sehbehinderungen verbessert.
Empfehlungen für den Textabstand
Bei der Anpassung des Textabstands sollten Sie die Bedürfnisse von Lesern berücksichtigen, die möglicherweise mehr Platz benötigen, um Texte bequem erfassen zu können. Stellen Sie sicher, dass Ihre Inhalte wie folgt umgesetzt sind:
- Zeilenhöhe: mindestens das 1,5-fache der Schriftgröße. Dieser Abstand verhindert das Überlappen von Textzeilen und erleichtert das Verfolgen von einer Zeile zur nächsten.
- Buchstabenabstand: Das Anpassen des Abstands zwischen den Zeichen auf mindestens das 0,12-fache der Schriftgröße verbessert die Lesbarkeit, insbesondere für Personen mit Legasthenie.
- Absatzabstand: Der Abstand zwischen zwei Textabsätzen sollte mindestens das 2-fache der Schriftgröße betragen, wodurch eine deutliche Trennung zwischen den Textblöcken entsteht.
Barrierefreie Schriftgrößen
Für normalen Text wird eine Mindestschriftgröße von 16 Pixeln empfohlen.
Bei Überschriften sollte die Schriftgröße jedoch deutlich größer sein, um die Informationshierarchie zu verdeutlichen.
Bedenken Sie:
Je größer der Text, desto größer muss der Abstand sein, damit er gut lesbar ist.
Schriftarten im SmartWebsite-Projekt anpassen
Vordefinierte Schriftstile
SmartWebsite hat bereits eine Auswahl an Schriftstilen vorbereitet, die Sie sofort auf Ihrer Website verwenden können. Um einen dieser vordefinierten Schriftstile auszuwählen, nutzen Sie bitte die folgende Vorgehensweise:
- Bitte navigieren Sie im SmartWebsite-Editor zur Sektion "Design" und wählen Sie dort die Option »Schrift« aus.
- Wählen Sie bitte im Feld »Schriftart« eines der angezeigten Schriftartensets aus. Um Ihnen die Auswahl zu erleichtern, wird von jedem Schriftstil die verwendete Schriftart für Überschrift und Absatz angezeigt. Die Vorschauansicht des SmartWebsite-Editors wird automatisch aktualisiert.
- Bei Bedarf besteht die Möglichkeit, die Schriftgröße in drei Stufen anzupassen. Die Größenauswahl umfasst die Kategorien »Klein« (S), »Mittel« (M) und »Groß« (L).
- Durch Betätigung der Schaltfläche »Veröffentlichen« erfolgt die Anwendung der Einstellungen auf die vorgenommene Website.
Benutzerdefinierte Schriftstile
Durch die Verwendung eines benutzerdefinierten Schriftstils besteht die Möglichkeit, die Website-Elemente Überschrift, Absatz und Schaltfläche individuell anzupassen. Benutzerdefinierte Schriftstile werden automatisch gespeichert und können zu einem späteren Zeitpunkt angepasst oder gelöscht werden. Die benutzerdefinierten Schriftstile finden Sie am Ende der Liste der vordefinierten Schriftstile.
- Bitte navigieren Sie im SmartWebsite-Editor zur Option »Design« und wählen Sie anschließend die Option »Schrift« aus. Daraufhin erscheint die Option »Schriftstil anpassen«.
- Wählen Sie für jeden möglichen Elementtyp (Überschriften, Absätze und Schaltflächen) die Schriftfamilie aus, indem Sie die gewünschte Schriftart im jeweiligen Auswahlfeld einstellen.
- Um Detailanpassungen für das Element (Überschrift, Absatz, Schaltfläche) vorzunehmen, klicken Sie bitte auf die Verknüpfung »Benutzerdefinierte …«, die Sie direkt unterhalb des jeweiligen Auswahlfeldes finden.
- Durch Betätigung der Schaltfläche »Veröffentlichen« erfolgt die Anwendung der Einstellungen auf die vorgenommene Website.