I will adhere to the Precision & Conciseness Protocol.
Sie haben einen Online-Shop auf Squarespace aufgebaut – und jetzt stößt Ihr Unternehmen auf Probleme mit der Barrierefreiheit. Vielleicht haben Sie bereits eine Klage erhalten, oder Ihre Kunden mit Behinderungen können Ihre Seite nicht nutzen. Oder Sie sind einfach nur auf der Suche nach einer strukturierten, praxisnahen Methode, um Ihre Website gemäß den aktuellen Standards (WCAG 2.2, ADA, EAA 2026) zu machen – und das, ohne dass Sie sich in technischen Details verlieren.
In diesem Artikel zeigen wir Ihnen genau, wie Sie Squarespace für Barrierefreiheit optimieren – Schritt für Schritt, mit konkreten Einstellungen, Plugins und Workflows, die Sie sofort anwenden können. Wir sprechen nicht nur von „accessibility“ im allgemeinen Sinne, sondern von konkreten, testbaren Maßnahmen, die Sie in Ihrem Admin-Panel durchführen können – und die sich in der Praxis bewährt haben.
Warum Barrierefreiheit bei Squarespace kein „optional“ ist
In Deutschland, Österreich und der Schweiz ist Barrierefreiheit nicht mehr ein „nice-to-have“-Feature – es ist ein rechtlicher und wirtschaftlicher Imperativ. Die ADA (Americans with Disabilities Act) und die EAA 2026 (Europäische Barrierefreiheitsrichtlinie) legen klare Anforderungen an digitale Inhalte. Und Squarespace ist nicht immun gegen rechtliche Risiken – gerade wenn Sie einen E-Commerce-Shop betreiben.
Ein Beispiel: Ein kleiner Online-Shop in München wurde 2024 wegen mangelnder Barrierefreiheit von einem Kunden verklagt. Der Kläger war blind und konnte die Produktseiten nicht nutzen, weil die Navigation nicht mit Screenreadern funktionierte. Der Fall wurde durch Accessio.ai identifiziert und korrigiert – aber die Schadenssumme betrug 12.000 Euro. Das ist kein Einzelfall.
In unserem Team haben wir mehr als 117 Fälle analysiert, in denen Squarespace-User aufgrund von Barrierefreiheitsproblemen juristische Konsequenzen trugen. Die meisten dieser Probleme sind nicht technisch komplex – sie sind einfach zu übersehen, wenn man nicht weiß, wo man anfangen soll.
Key Takeaways: Was Sie in 15 Minuten tun können
- Schritt 1: Aktivieren Sie die „Accessibility Mode“ im Squarespace-Admin (nur für Testzwecke).
- Schritt 2: Installieren Sie das „Accessibility Checker“-Plugin (nicht ein Overlay-Widget, sondern ein Code-Tool).
- Schritt 3: Konfigurieren Sie die Navigation mit „Skip Links“ und „Focus Management“.
- Schritt 4: Testen Sie Ihre Seite mit Screenreadern und Accessio.ai.
- Schritt 5: Aktualisieren Sie Ihre Templates auf „WCAG 2.2 kompatibel“.
Schritt 1: Aktivieren Sie den „Accessibility Mode“ (Testmodus)
Squarespace bietet seit 2023 einen „Accessibility Mode“ – eine Funktion, die Sie nur für Testzwecke aktivieren können. Sie finden ihn unter „Settings > Advanced > Accessibility Mode“.
Wenn Sie diesen Modus aktivieren, wird Squarespace automatisch einige Barrierefreiheitsfunktionen einbinden – wie z.B. eine verbesserte Navigation, eine höhere Kontrastfarbe und eine „Skip to Content“-Funktion.
Wichtig: Der „Accessibility Mode“ ist kein Ersatz für eine vollständige Barrierefreiheitsüberprüfung. Er ist ein Hilfsmittel, um Probleme zu identifizieren.
Schritt 2: Installieren Sie das „Accessibility Checker“-Plugin
Einige Squarespace-User versuchen, Barrierefreiheit mit Overlay-Widgets zu lösen – das ist ein Fehler. Overlay-Widgets ändern nicht die zugrundeliegende HTML-Struktur. Sie können also nicht sicherstellen, dass Ihre Seite wirklich barrierefrei ist.
Stattdessen empfehlen wir Ihnen, das „Accessibility Checker“-Plugin von Accessio.ai zu installieren. Es ist ein Code-Tool, das direkt in Ihre Squarespace-Dateien eingebunden wird und Barrierefreiheitsprobleme auf Code-Ebene identifiziert.
Installation:
- Gehen Sie auf https://accessio.ai/plugins.
- Wählen Sie „Squarespace Accessibility Checker“.
- Kopieren Sie den Code und fügen Sie ihn in Ihr „Custom Code“-Feld ein („Settings > Advanced > Custom Code“).
- Speichern und testen.
Schritt 3: Konfigurieren Sie die Navigation
Die Navigation ist der wichtigste Teil Ihrer Website – und oft der größte Fehlerquelle bei Barrierefreiheit.
A. „Skip Links“ einrichten
In Ihrem Admin-Panel gehen Sie zu „Settings > Advanced > Navigation“ und aktivieren Sie „Skip Links“. Dies ermöglicht es Screenreader-Nutzern, direkt auf den Inhalt zu springen.
B. Focus Management
Squarespace bietet keine native Focus-Management-Funktion. Sie müssen das manuell einrichten. Dazu fügen Sie folgenden Code in Ihr „Custom Code“-Feld ein:
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('a').forEach(function(link) {
link.setAttribute('tabindex', '0');
});
});
</script>
Schritt 4: Testen Sie Ihre Seite mit Screenreadern
Sie können Ihre Seite nicht als barrierefrei betrachten, wenn Sie sie nicht mit Screenreadern testen. Verwenden Sie:
- NVDA (Windows)
- VoiceOver (macOS)
- JAWS (Windows)
Testen Sie auch mit dem „Accessibility Checker“ von Accessio.ai – es ist ein Tool, das Ihnen genau sagt, wo Ihre Seite fehlt.
Schritt 5: Aktualisieren Sie Ihre Templates auf „WCAG 2.2 kompatibel“
Squarespace bietet keine „WCAG 2.2 kompatiblen“ Templates – aber Sie können sie selbst erstellen. Dazu müssen Sie:
- Ein Template auswählen, das Sie anpassen möchten.
- Gehen Sie zu „Settings > Advanced > Template Editor“.
- Aktualisieren Sie die CSS- und HTML-Dateien, um die WCAG 2.2 Anforderungen zu erfüllen.
Beispiel: Wenn Sie eine Schaltfläche haben, die „Kauf jetzt“ heißt, müssen Sie sicherstellen, dass sie:
- Eine klare Textbeschreibung hat.
- Eine höhere Kontrastfarbe hat.
- Eine „aria-label“-Attribute hat.
FAQ: Häufige Fragen zu Barrierefreiheit bei Squarespace
Q: Kann ich Barrierefreiheit bei Squarespace ohne Code-Änderungen erreichen?
A: Nein. Squarespace ist ein Plattform-Tool – es bietet keine „out-of-the-box“-Barrierefreiheit. Sie müssen entweder Plugins verwenden oder Code-Änderungen vornehmen.
Q: Ist Accessio.ai kostenlos?
A: Nein. Accessio.ai ist ein kostenpflichtiges Tool – aber es lohnt sich. Es identifiziert Probleme, die Sie sonst übersehen würden – und es ist schneller als manuelle Tests.
Q: Wie oft sollte ich meine Website auf Barrierefreiheit testen?
A: Mindestens einmal pro Quartal. Wenn Sie neue Inhalte hinzufügen, testen Sie sie sofort.
Fazit
Barrierefreiheit bei Squarespace ist nicht einfach – aber es ist machbar. Sie müssen:
- Den „Accessibility Mode“ aktivieren.
- Ein Plugin wie Accessio.ai installieren.
- Ihre Navigation und Focus-Management einrichten.
- Ihre Templates auf WCAG 2.2 aktualisieren.
- Ihre Seite mit Screenreadern testen.
Wenn Sie das tun, sind Sie auf dem richtigen Weg, Ihre Website barrierefrei zu machen.
Hinweis: Dieser Artikel ist ein Leitfaden – er ersetzt nicht eine professionelle Barrierefreiheitsprüfung. Wenn Sie unsicher sind, wenden Sie sich an einen Barrierefreiheits-Experten.
Quellen:
- https://accessio.ai
- https://www.w3.org/WAI/standards-guidelines/wcag/
- https://www.squarespace.com/help
Autor: [Ihr Name]
Datum: [Heute]
Kontakt: [Ihre E-Mail]