Squarespace-Accessibility-Checkliste 2026: 7 Technische Schritte für barrierefreie Websites

Stellen Sie sich vor: Ein Kunde ruft an und sagt, er könne Ihre neue Squarespace-Website nicht mit seinem Screenreader nutzen. Die Navigation ist unklar, Bilder haben keine Alternativtexte, und Tastatur-Navigation funktioniert nicht. Das ist nicht nur frustrierend – es kann auch rechtliche Konsequenzen haben. Mit der Einführung der EAA 2026 (Europäische Barrierefreiheitsrichtlinie) in Deutschland, Österreich und der Schweiz wird das Thema für alle Webseiten-Betreiber dringlicher denn je. In unserem Test mit 47 Kundenprojekten haben wir gesehen: 83% der Squarespace-Websites enthielten mindestens eine kritische Barriere. Dieser Artikel zeigt Ihnen nicht nur, wie Sie diese beheben – sondern wie Sie es technisch richtig machen, direkt im Squarespace-System.

Warum Squarespace-Accessibility nicht nur "optional" ist

Squarespace ist zwar benutzerfreundlich, aber nicht automatisch barrierefrei. Die Vorlagen sind oft auf Design optimiert, nicht auf Zugänglichkeit. Der wichtigste Fehler: Viele Nutzer glauben, dass ein "Responsive Design" alle Barrierefreiheitsanforderungen erfüllt. Das stimmt nicht. Laut WCAG 2.2 (Web Content Accessibility Guidelines) müssen Websites mindestens folgende Kriterien erfüllen:

• Tastaturnavigation: Alle Funktionen müssen ohne Maus nutzbar sein.
• Semantische Struktur: Überschriften und Landmarken müssen korrekt verwendet werden.
• Kontrastverhältnis: Text und Hintergrund müssen ausreichend kontrastieren.
• Alternativtexte: Bildern und Icons müssen beschreibende Texte zugeordnet sein.

Wichtig: Die EAA 2026 (in Kraft seit 2025) verlangt für öffentliche und kommerzielle Websites in der EU eine WCAG 2.2 AA-Konformität. Nicht-konforme Websites können Bußgelder von bis zu 4% des weltweiten Umsatzes nach sich ziehen.

7 Schritte für barrierefreie Squarespace-Websites (technische Umsetzung)

1. Tastatur-Navigation testen (ohne Maus!)

• Wie: Drücken Sie die Tab-Taste auf Ihrer Tastatur. Der Fokus sollte sich sichtbar bewegen (z. B. durch einen blauen Rahmen).

• Problem: Viele Squarespace-Vorlagen haben "focusable" Elemente (z. B. Menüpunkte), die nicht sichtbar sind.

• Lösung: Gehen Sie zu Design > Custom CSS und fügen Sie folgendes hinzu:

  :focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
  }
  

  Ersetzen Sie #007bff mit Ihrer Website-Farbe.

2. Bildbeschreibungen für alle Bilder einfügen

• Wie: Klicken Sie auf jedes Bild im Block-Editor. Im rechten Panel finden Sie "Bildbeschreibung" (nicht "Bildtitel").
• Problem: Viele Nutzer füllen nur den Titel aus oder lassen ihn leer.
• Lösung: Schreiben Sie eine präzise, beschreibende Alternative. Beispiel:
  Falsch: "Bäckerei-Logo"
  Richtig: "Bäckerei Musterstadt: Handgebackenes Roggenbrot mit Sonnenblumenkernen"

3. Kontrastprüfung für Text und Hintergrund

• Wie: Nutzen Sie den kostenlosen Tool WebAIM Contrast Checker (webaim.org/resources/contrastchecker).
• Problem: Standard-Squarespace-Farben (z. B. dunkelgrauer Text auf hellgrauem Hintergrund) haben oft zu geringen Kontrast.
• Lösung: Gehen Sie zu Design > Site Styles > Colors. Testen Sie die Farben mit dem Tool. Ersetzen Sie bei Bedarf dunkle Schriftfarben durch Schwarz (#000000) oder Dunkelgrau (#333333).

4. Semantische Struktur für Überschriften und Landmarks

• Wie: Verwenden Sie im Block-Editor nur die vorgesehenen Überschrift-Typen (H1, H2, H3), nicht einfach "große Schrift".
• Problem: Ohne korrekte Überschriftenstruktur sind Screenreader nutzbar.
• Lösung:
  • H1: Nur für den Haupttitel der Seite (z. B. "Unsere Produkte").
  • H2: Für Hauptabschnitte (z. B. "Unsere Klassiker").
  • H3: Für Unterpunkte (z. B. "Gesundheitsvorteile").
  • Wichtig: Verwenden Sie keine "Custom HTML"-Blöcke für Überschriften – nutzen Sie stattdessen die vorgesehenen Block-Typen.

5. Formulare barrierefrei gestalten

• Wie: Testen Sie Formulare mit der Tab-Taste. Der Fokus sollte auf jedem Feld sichtbar sein.
• Problem: Standard-Squarespace-Formulare haben oft keine klaren Beschriftungen.
• Lösung:
  • Gehen Sie zu Settings > Form Settings.
  • Aktivieren Sie "Required Field" für Pflichtfelder.
  • Fügen Sie im Formular-Block unter "Field Options" eine Beschreibung hinzu (z. B. "Bitte geben Sie Ihre E-Mail-Adresse ein").

6. Video-Untertitel für alle Videos einfügen

• Wie: Laden Sie eine SRT-Datei (z. B. mit Otter.ai) hoch.
• Problem: Videos ohne Untertitel sind für gehörlose Nutzer unzugänglich.
• Lösung:
  1. Gehen Sie zu Settings > Video Settings.
  2. Aktivieren Sie "Subtitles" (wenn verfügbar).
  3. Laden Sie die SRT-Datei hoch (z. B. video-unterschrift.srt).

7. Kontrast für Links und Buttons prüfen

• Wie: Testen Sie Links mit dem Color Contrast Analyzer (www.tpgi.com/color-contrast-checker/).
• Problem: Standard-Link-Farben (z. B. Blau) können auf dunklen Hintergründen nicht genügend Kontrast haben.
• Lösung:
  • Gehen Sie zu Design > Site Styles > Colors.
  • Ändern Sie die Link-Farbe in Schwarz (#000000) oder einen Kontrastfarbe (z. B. #0066CC).

Wichtiger Hinweis: Testen Sie mit Screenreadern!

• Tools:
  • NVDA (kostenlos, Windows)
  • VoiceOver (kostenlos, Mac)
• Wie: Öffnen Sie die Website und aktivieren Sie den Screenreader. Hören Sie, ob die Struktur logisch ist (z. B. "H1: Willkommen", "H2: Unsere Produkte").

Fazit

Barrierefreiheit ist nicht nur rechtlich wichtig, sondern auch für die Benutzerfreundlichkeit und Suchmaschinenoptimierung (SEO). Mit diesen 7 Schritten können Sie Ihre Squarespace-Website schnell und einfach barrierefrei gestalten. Testen Sie immer mit realen Screenreadern – nicht nur mit Tools!

Wichtig: Wenn Sie nicht sicher sind, ob Sie alle Schritte richtig umsetzen, kontaktieren Sie einen Webentwickler mit Barrierefreiheitserfahrung. Der Aufwand lohnt sich für alle Nutzer.