Barrierefreiheit: Website Umsetzung und Checkliste für Squarespace
Barrierefreiheit ist ein Thema, das uns in allen Bereichen des Lebens begegnet. Es gibt offensichtliche Formen im Alltag, wie barrierefreie Zugänge zu Gebäuden. Aber auch für Unbetroffene auf den ersten Blick nicht erkennbare Bereiche, wie die Gestaltung von Websites, sind für eine erfolgreiche Inklusion von großer Bedeutung. Durch das Barrierefreiheitsstärkungsgesetz (BFSG), das ab Juni 2025 gilt, beschäftigen sich aktuell wieder mehr Menschen mit dem Thema Barrierefreiheit im Kontext digitaler Produkte wie Websites oder Apps.
Im Beitrag erklären wir euch, was eine barrierefreie Website ist und wie ihr eure Squarespace-Site barrierefrei umsetzt (inklusive kostenloser Checkliste). Außerdem erfahrt ihr, was das BFSG ist, welche Vorgaben es gibt und für wen das Gesetz gilt.
Disclaimer: Achtung, da wir keine Rechtsexperten oder gar Anwälte sind, stellt dieser Artikel keinesfalls eine Rechtsberatung dar. Er dient der reinen Information über das Thema Barrierefreiheit von Websites, damit in Zusammenhang stehende Richtlinien und zeigt euch Lösungsmöglichkeiten auf. Mit rechtlichen Fragen wendet euch bitte an eure Rechtsberatung.
Inhaltsverzeichnis
Was ist eine barrierefreie Website?
Barrierefreiheit im Webdesign bedeutet, dass Websites von Menschen trotz verschiedener Einschränkungen ohne fremde Hilfe wahrgenommen, bedient und verstanden werden. Zu den Einschränkungen gehören beispielsweise Blindheit und Sehbehinderung, Gehörlosigkeit und nachlassendes Hörvermögen, eingeschränkte Bewegungsfähigkeit, Sprachbehinderungen, Photosensibilität sowie Lernbehinderungen und kognitive Einschränkungen.
Alle relevanten Inhalte einer barrierefreien Website tragen in ihrer Umsetzung und Darstellung zu Verständnis, Wahrnehmung und Bedienbarkeit bei. Webinhalte sind dabei alle Informationen einer Website sowohl in Form von Text und Bild als auch in Ton oder Video.
Bei der Umsetzung der Barrierefreiheit einer Website helfen Richtlinien wie die Web Content Accessibility Guidelines (kurz: WCAG) oder die EU-Norm EN 301 549, die mit dem Barrierefreiheitsstärkungsgesetz (kurz: BFSG) in Deutschland durchgesetzt werden.
Exkurs zum Barrierefreiheitsstärkungsgesetz – Was wird zur barrierefreien Website Pflicht ab Juni 2025?
Im Juni 2025 – genauer gesagt am 28.06.2025 – tritt das BFSG in Kraft. Es regelt die gesetzliche Pflicht zur Barrierefreiheit unter anderem für Websites und ist die deutsche Umsetzung der EU-Richtlinie des European Accessibility Act. In ganz Europa soll digitale Barrierefreiheit dadurch einheitlich durchgesetzt werden. Als Basis dienen die Norm EN 301 549, sowie die internationalen Richtlinien für barrierefreie Webinhalte (WCAG) des Word Wide Web Consortium (kurz: W3C).
Das BFSG gilt zunächst für Unternehmen ab 10 Mitarbeiter:innen bzw. einem Jahresumsatz von mehr als 2 Millionen Euro. Vom Gesetz ausgeschlossen sind vorerst reine B2B Angebote und private Medien.
Produkte und Dienstleistungen, die unter das BFSG fallen, müssen ab Juni 2025 mit den festgelegten Richtlinien umgesetzt werden. Außerdem muss eine „Erklärung zur Barrierefreiheit“ zugänglich sein, die Nutzer:innen darüber aufklärt, wie die Barrierefreiheit sichergestellt wird, und welche Elemente des Mediums ggf. nicht barrierefrei sind.
Innerhalb der Richtlinien wird zwischen dekorativen und für das Verständnis relevanten Inhalten unterschieden. Die Vorgaben betreffen dabei nur relevante Elemente und sind nicht auf dekorative Bestandteile eines Mediums anzuwenden.
Dekorative und relevante Elemente – Bedeutung für die Barrierefreiheit
Relevante Website-Elemente tragen direkt zum Verständnis eines Webinhalts bei und unterliegen allen Vorgaben der Barrierefreiheit. Dazu gehören ganz klassisch Fließtexte, Überschriften, Buttons aber u.a. auch Bilder, die erklärende Infografiken enthalten, oder Icons, die Nutzer:innen bei der Website-Navigation helfen.
Allerdings werden auf jeder Website ebenfalls Elemente genutzt, die rein dekorativen Zwecken dienen. Die Rede ist z. B. von Mood-Bildern oder grafischen Elementen im Hintergrund, die euer Markenbild zwar unterstützen, jedoch inhaltlich keinen Mehrwert vermitteln. Diese Elemente unterliegen nicht dem Barrierefreiheitsstärkungsgesetz.
Übrigens: Die Anwendung mancher Vorgaben zur Barrierefreiheit auf rein dekorative Elemente wirkt sich sogar nachteilig auf deine barrierefreie Website aus. Beispielsweise stören dekorative Bilder mit Alt-Text den Lesefluss, da Screenreader nur leere Alt-Tags ignorieren können.
Barrierefreie Website mit Squarespace umsetzen
Jetzt wird es konkret. Wir gehen an die Umsetzung der Barrierefreiheit für eure Squarespace Website. Die technischen Voraussetzungen, die das Website-Tool mit sich bringt, lassen sich nicht von euch beeinflussen. Hervorragend also, dass Squarespace bereits alles mitbringt, was wir für eine barrierefreie Website benötigen. So kann eure gesamte Website beispielsweise allein mit der Tastatur bedient werden.
An ein paar Punkten müsst ihr als Websitebetreiber:in allerdings selbst Hand anlegen. Wir haben die Vorgaben der WCAG einmal für euch zusammengefasst und weiter unten im Beitrag bekommt ihr eine kostenlose Checkliste obendrauf:
Farben
Farben sind eines der wichtigsten Elemente eurer Brand. Achtet bereits bei der Erstellung eures Corporate Designs darauf, dass eure Wunschfarben ohne Probleme oder mit geringen Anpassungen auf eure barrierefreie Website übertragen werden können. Farben passt ihr für eure Squarespace-Website im Stil-Panel an, erreichbar über das Pinsel-Icon oder unter Website / Stil. Unter Farben bearbeitet ihre eure Palette und optimiert die Farbschemata eurer Website.
Achtet bei der Farbwahl auf einen ausreichend hohen Kontrast für die verschiedenen Elemente eurer barrierefreien Website:
Kontrastverhältnis von Text mindestens 4,5:1
Bilder, grafische Objekte und Bestandteile der Benutzeroberfläche, die zum Verständnis des Inhalts beitragen, mindestens 3:1
Heißer Tipp: Nutzt einen Kontrast-Checker, um eure Website-Farben zu prüfen, z. B. diesen hier: zum WCAG Kontrast-Checker.
Schriften
Eure Schriften bearbeitet ihr in Squarespace in eurem Stil-Panel. Unter Schriftarten wählt ihr eure Basisgröße aus (wir empfehlen 16 px) und trefft Angaben für Überschriften, Absätze, Buttons usw.:
Zeilenhöhe mindestens 1,5 em
Zeichenabstand mindestens 0,12 em
Achtet außerdem auf einen ausreichenden Abstand zwischen verschiedenen Absätzen. Dieser sollte mindestens das 2-fache der Schriftgröße betragen.
Nice to have, aber keine Voraussetzung im BFSG: Lasst den Blocksatz weg und nutzt eine Zeilenbreite von maximal 80 Zeichen.
Lesetipp: Eure Hausschrift gehört zu den Google Fonts? Wir zeigen euch, wie ihr in eure Squarespace-Website Google Fonts lokal einbindet.
Bilder
Die Bilder eurer Website bearbeitet ihr im Seiten-Editor über das Stift-Icon des jeweiligen Bildes:
Beschreibt das Bild mit Bild-Alternativtext (auch: Alt-Text oder Alt-Tag)
Achtet auch bei Bildern auf Farbkontraste (mindestens 3:1), vor allem bei Infografiken
Fügt relevante Texte, nicht direkt in Bilder ein oder macht diese zusätzlich als Fließtext oder via Alt-Text zugänglich.
DO: Eine Infografik enthält Text in Form von statistischen Werten. Im vorangegangen Fließtest wurden diese Werte genannt und erklärt.
DON‘T: Eine Überschrift wird in ein Foto eingefügt, als JPG ausgegeben und als Headerbild auf einer Website eingefügt. Die Überschrift selbst taucht auf der Website nicht in Textform auf.
Heißer Tipp für Alt-Text: Achtet auf eine Länge von maximal 100 Zeichen. Beschreibt nur den Inhalt des Bildes und spart euch Aussagen wie „Das Bild zeigt …“ – Screenreader erkennen automatisch, dass es sich um ein Bild handelt, und lesen dieses entsprechend vor.
Lesetipp: Alt-Texte spielen auch für die Suchmaschinenoptimierung eine tragende Rolle. Wir verraten euch unsere Expertentipps für die Bilder-SEO.
Formulare
Formulare bearbeitet ihr im Seiten-Editor über das Stift-Icon des jeweiligen Formulars. Hier legt ihr den Button-Text des Formulars fest.
Dieser muss die auslösende Aktion eindeutig beschreiben, z. B. „Formular absenden“, „Jetzt kostenpflichtig buchen“.
Über Formularfelder bearbeiten passt ihr die einzelnen Feldeigenschaften an.
Achtet bei euren Formularfeldern auf ein aussagekräftiges Label und fügt eine kurze Beschreibung hinzu, um die Verständlichkeit zu erhöhen.
Struktur
Eine klare Struktur eurer Website ist ausschlaggebend für das Verständnis eurer Inhalte. Bei einem Buch, das mit dem Schluss beginnt, würdet ihr vermutlich auch erstmal nichts verstehen. Für eine barrierefreie Website ist nicht nur die optische Struktur wichtig, die ihr durch die Reihenfolge von Elementen und verschiedene Schriftgrößen erzeugt. Auch die auf den ersten Blick unsichtbare Meta-Ebene müsst ihr einbeziehen:
Beachtet die Überschrifthierarchie: In Text-Blöcken weist ihr euren Überschriften und Absätzen verschiedene Formate zu. Nutzt Überschrift 1 nur für den Titel eurer Seite. Überschrift 2, Überschrift 3 und Überschrift 4 sind einander jeweils untergeordnet.
Aussagekräftige Meta-Texte: Füllt den Seitentitel und die SEO-Texte eurer Unterseiten aus. Ihr gelangt über das Zahnrad-Icon zu den Einstellungen und findet die Eigenschaften in Allgemein und SEO.
Aussagekräftige Link-Texte: Nutzt kurze Wortgruppen, die die Aktion des Links eindeutig beschreiben. Das gilt gleichermaßen für Buttons.
Zugänglichkeit von Seiten: Macht eure Unterseiten von mindestens 2 Stellen eurer Website aus zugänglich, z. B. durch eine Verlinkung im Hauptmenü und Footer oder die Nutzung eines Suche-Blocks.
Videos / Audios
Audios und Videos müsst ihr vor dem Hochladen auf Squarespace oder einer Plattform zum Einbetten barrierefrei aufbereiten.
Stellt zu euren Videos Untertitel und Audiobeschreibungen zur Verfügung.
Bereitet Deskriptionen und Untertitel für eure Audios vor und fügt sie gemeinsam ein.
Barrierefreie Website Checkliste
Alle Infos zur Barrierefreiheit auf Websites mit Squarespace haben wir für euch in ein Whitepaper gepackt. Mit dem Leitfaden steht euch das Wichtigste zum Thema auch offline zur Verfügung. Das Beste daran? Exklusiv für euch Whitepaper-Leser:innen haben wir eine Checkliste für barrierefreie Websites erstellt. So könnt ihr alle oben genannten Punkte übersichtlich auf einer Seite durchgehen und parallel zur Prüfung eurer Squarespace-Site abhaken.
Website Barrierefreiheit – Ein Thema der Zukunft?
Egal, ob euer Unternehmen unter das Barrierefreiheitsstärkungsgesetz fällt oder nicht, zu empfehlen ist die Umsetzung einer barrierefreien Website für alle. Damit könnt ihr gewährleisten, dass ihr eure gesamte Zielgruppe erreicht. Außerdem helft ihr dabei, einen neuen Standard für digitale Inhalte zu schaffen, der den Weg zu einer inklusiven Gesellschaft ebnet. Nicht jedem Menschen sind Beeinträchtigungen anzusehen und nicht jede Barriere ist für alle Personen gleichermaßen vorhanden.
